Java ScriptTips & Tricks

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.

Design patterns

Design patterns

Design patterns

Coding patterns

singletonfactory

decoratorobserver

...

JavaScriptspecific patterns

Design patterns

Object-Oriented

Design patterns

No Classes

Design patterns

Prototypes

Design patterns

Environment

Objects

Native Host

Minimizing Globals

var a = (b = 0);

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

Hoisting

Access to the Global Object

For Loops HTMLCollections

• document.getElementsByName()• document.getElementsByClassName()• document.getElementsByTagName()...

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 otherfunctions• Can have their own properties and methods

Any variable defined with var inside of a function is a local variable, invisibleoutside the function.

Defining a function

Function expression Function declarations

Function expression VS Function declarations

Read-only name property

Function Hoisting

Callbacks are in

- Asynchronous Event Listeners- Timeouts- Libraries- ...

- 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

Classical Pattern #1—The Default Pattern

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

Classical Pattern #2—Rent-a-Constructor

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 riskthat a child can accidentally overwrite a parent’s property.

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

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.

Classical Pattern #5—A Temporary Constructor

+ The child only inherits properties of the prototype

- We don’t have a reference to the original parent

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: