This document discusses various JavaScript design patterns and best practices including: - Common design patterns like singleton, factory, decorator, and observer. - Minimizing global variables by declaring variables with a single var statement. - Hoisting and how it provides access to function and variable declarations. - Classical inheritance patterns like using the prototype, renting a constructor, and sharing the prototype. - Defining functions as expressions vs declarations and how hoisting works. - Using immediate functions to provide scope and execute initialization code. - Callbacks and how they are used in asynchronous code.

1. Java Script
Tips & Tricks

2. They help us write better code using proven practices and not reinvent the wheel.They help us write better code using proven practices and not reinvent the wheel.
They help us write better code using proven practices and not reinvent the wheel.They provide a level of abstraction
They help us write better code using proven practices and not reinvent the wheel.They improve communication between developers and teams.

3. Design patternsDesign patterns Design patternsCoding patterns
singleton
factory
decorator
observer
...
JavaScript
specific
patterns

4. Design patternsObject-Oriented
Design patternsNo Classes
Design patternsPrototypes
Design patternsEnvironment
Objects
Native Host

5. Minimizing Globals

6. var a = (b = 0);

7. Single var Pattern Benefits
• Provides a single place to look for all the local variables
needed by the function
• Prevents logical errors when a variable is used before
it’s defined
• Helps you remember to declare variables and therefore
minimize globals
• Is less code

8. Hoisting

9. Access to the Global Object

10. For Loops HTMLCollections
• document.getElementsByName()
• document.getElementsByClassName()
• document.getElementsByTagName()
...

11. First-class objects Provide scope
Functions are objects that:
• Can be created dynamically at runtime, during the execution of the program
• Can be assigned to variables, can have their references copied to other variables,
can be augmented, and, except for a few special cases, can be deleted
• Can be passed as arguments to other functions and can also be returned by other
functions
• Can have their own properties and methods
Any variable defined with var inside of a
function is a local variable, invisible
outside the function.

12. Defining a function
Function expression Function declarations

13. Function expression VS Function declarations
Read-only name property
Function Hoisting

14. Callbacks are in
- Asynchronous Event Listeners
- Timeouts
- Libraries
- ...

17. - It provides a scope sandbox for your initialization
code
- Executes a function as soon as it is defined
Parameters of an Immediate Function Returned Values from Immediate Functions

21. Classical Pattern #1—The Default Pattern

22. Classical Pattern #1—The Default Pattern
Drawbacks
- Inherit both own properties added to
this and prototype properties
- It doesn’t enable you to pass
parameters to the child constructor

23. Classical Pattern #2—Rent-a-Constructor

24. Classical Pattern #2—Rent-a-Constructor
The drawback is that nothing from the
prototype gets inherited
A benefit is that you get true copies of the
parent’s own members, and there’s no risk
that a child can accidentally overwrite a
parent’s property.

25. Classical Pattern #3—Rent and Set Prototype
+ The result objects get copies of the parent’s own members and
references to the parent’s reusable functionality (implemented as
members of the prototype)
+ The child can also pass any arguments to the parent constructor
- The parent constructor is called twice

26. Classical Pattern #4—Share the Prototype
Classical Pattern #1 inherit Changed inherit
- If one child or grandchild somewhere down the inheritance chain modifies the
prototype, it affects all parents and grandparents.

27. Classical Pattern #5—A Temporary Constructor
+ The child only inherits properties of
the prototype
- We don’t have a reference to the
original parent

28. Another methods
With the class keyword
ECMAScript 6 introduced a new set
of keywords implementing classes.
Although these constructs look like
those familiar to developers of class-
based languages, they are not.
JavaScript remains prototype-based.
The new keywords include class,
constructor, static, extends, and
super.
With Object.create
ECMAScript 5 introduced a new
method: Object.create(). Calling
this method creates a new object.
The prototype of this object is the
first argument of the function: