JAVASCRIPT: THE CONFUSING BITS
JSON Dean
cf.Objective() 2014
Who am I?
This guy
Otherwise nobody
ARE YOU CONFUSED?
I was
JavaScript is the most confusing thing I have ever tried to learn
JavaScript is not your parents’
programming language
No Classes
Unusual inheritance
Changing scopes
Weird object creation
...
What this session isn’t
This session is not an intro to
JavaScript
You have worked with
JavaScript for a while
This sessio...
Scoping
Scoping
JavaScript Scopes !== C-Style Scopes
JavaScript does not have block scope
CFML developers are used to this
If you ...
Function Scope
JavaScript has “function scope” or “execution context”
When a variable is created, it is created in that sc...
Function Scope
JavaScript has “function scope” or “execution context”
When a variable is created, it is created in that sc...
Function Scope
JavaScript has “function scope” or “execution context”
When a variable is created, it is created in that sc...
Function Scope
JavaScript has “function scope” or “execution context”
When a variable is created, it is created in that sc...
var x = 1;



function doSomething() {

var x = 1;



for (i = 1; i < 10; i++) {

x += i;

}



console.log( "Function Sco...
var x = 1;



function doSomething() {

var x = 1;



for (i = 1; i < 10; i++) {

x += i;

}



console.log( "Function Sco...
var x = 1;



function doSomething() {

var x = 1;



for (i = 1; i < 10; i++) {

x += i;

}



console.log( "Function Sco...
var x = 1;



function doSomething() {

var x = 1;



for (i = 1; i < 10; i++) {

x += i;

}



console.log( "Function Sco...
var x = 1;



function doSomething() {

var x = 1;



for (i = 1; i < 10; i++) {

x += i;

}



console.log( "Function Sco...
var x = 1;



function doSomething() {

var x = 1;



for (i = 1; i < 10; i++) {

x += i;

}



console.log( "Function Sco...
Variable
Hoisting
“JavaScript is the world’s most
misunderstood programming
language”
!
- Douglas Crockford
Variable Hoisting
var foo = 1;



function bar() {

if (foo == undefined) {

var foo = 10;

}



console.log(foo);

}



b...
Variable Hoisting
var foo = 1;



function bar() {

if (foo == undefined) {

var foo = 10;

}



console.log(foo);

}



b...
Variable Hoisting
var foo = 1;



function bar() {

if (foo == undefined) {

var foo = 10;

}



console.log(foo);

}



b...
Variable Hoisting
var foo = 1;



function bar() {

if (foo == undefined) {

var foo = 10;

}



console.log(foo);

}



b...
Variable Hoisting
var foo = 1;



function bar() {

if (foo == undefined) {

var foo = 10;

}



console.log(foo);

}



b...
Variable Hoisting
var foo = 1;



function bar() {

if (foo == undefined) {

var foo = 10;

}



console.log(foo);

}



b...
Variable Hoisting
var foo = 1;



function bar() {

if (foo == undefined) {

var foo = 10;

}



console.log(foo);

}



b...
Variable Hoisting
var foo = 1;



function bar() {

if (foo == undefined) {

var foo = 10;

}



console.log(foo);

}



b...
Variable Hoisting
var foo = 1;



function bar() {

if (foo == undefined) {

var foo = 10;

}



console.log(foo);

}



b...
Variable Hoisting
var foo = 1;



function bar() {

if (foo == undefined) {

var foo = 10;

}



console.log(foo);

}



b...
Variable Hoisting
var foo = 1;



function bar() {

if (foo == undefined) {

var foo = 10;

}



console.log(foo);

}



b...
Variable Hoisting
var foo = 1;



function bar() {

if (foo == undefined) {

var foo = 10;

}



console.log(foo);

}



b...
Variable Hoisting
var foo = 1;



function bar() {

if (foo == undefined) {

var foo = 10;

}



console.log(foo);

}



b...
So what happened?
What we just saw is confusing
Why is the value 10 and not
1?
The answer is a combination
of
Function Sco...
So what is variable hoisting?
Function and Variable
declarations get “hoisted” to
the top of the executable
context
Functi...
Variable Hoisting
var foo = 1;



function bar() {

if (foo == undefined) {

var foo = 10;

}



console.log(foo);

}



b...
Variable Hoisting
var foo = 1;



function bar() {

if (foo == undefined) {

var foo = 10;

}



console.log(foo);

}



b...
Variable Hoisting
var foo = 1;



function bar() {

if (foo == undefined) {

var foo = 10;

}



console.log(foo);

}



b...
Variable Hoisting
var foo = 1;



function bar() {

if (foo == undefined) {

var foo = 10;

}



console.log(foo);

}



b...
Variable Hoisting
var foo = 1;



function bar() {

if (foo == undefined) {

var foo = 10;

}



console.log(foo);

}



b...
Variable Hoisting
var foo = 1;



function bar() {

if (foo == undefined) {

var foo = 10;

}



console.log(foo);

}



b...
Variable Hoisting
var foo = 1;



function bar() {

if (foo == undefined) {

var foo = 10;

}



console.log(foo);

}



b...
Variable Hoisting
var foo = 1;



function bar() {

if (foo == undefined) {

var foo = 10;

}



console.log(foo);

}



b...
Variable Hoisting
var foo = 1;



function bar() {

if (foo == undefined) {

var foo = 10;

}



console.log(foo);

}



b...
Variable Hoisting
var foo = 1;



function bar() {

if (foo == undefined) {

var foo = 10;

}



console.log(foo);

}



b...
Variable Hoisting
var foo = 1;



function bar() {

if (foo == undefined) {

var foo = 10;

}



console.log(foo);

}



b...
Variable Hoisting
var foo = 1;



function bar() {

if (foo == undefined) {

var foo = 10;

}



console.log(foo);

}



b...
Variable Hoisting
var foo = 1;



function bar() {

if (foo == undefined) {

var foo = 10;

}



console.log(foo);

}



b...
Variable Hoisting
var foo = 1;



function bar() {

if (foo == undefined) {

var foo = 10;

}



console.log(foo);

}



b...
Variable Hoisting
var foo = 1;



function bar() {

if (foo == undefined) {

var foo = 10;

}



console.log(foo);

}



b...
Variable Hoisting
var foo = 1;



function bar() {

if (foo == undefined) {

var foo = 10;

}



console.log(foo);

}



b...
Variable Hoisting
var foo = 1;



function bar() {

if (foo == undefined) {

var foo = 10;

}



console.log(foo);

}



b...
Variable Hoisting
var foo = 1;



function bar() {

if (foo == undefined) {

var foo = 10;

}



console.log(foo);

}



b...
So why did this happen?
var foo = 1;



function bar() {

if (foo == undefined) {

var foo = 10;

}



console.log( "Funct...
So why did this happen?
var foo = 1;



function bar() {

if (foo == undefined) {

var foo = 10;

}



console.log( "Funct...
So why did this happen?
var foo = 1;



function bar() {

if (foo == undefined) {

var foo = 10;

}



console.log( "Funct...
So why did this happen?
var foo = 1;



function bar() {

if (foo == undefined) {

var foo = 10;

}



console.log( "Funct...
So why did this happen?
var foo = 1;



function bar() {

if (foo == undefined) {

var foo = 10;

}



console.log( "Funct...
So why did this happen?
var foo = 1;



function bar() {

if (foo == undefined) {

var foo = 10;

}



console.log( "Funct...
So why did this happen?
var foo = 1;



function bar() {

if (foo == undefined) {

var foo = 10;

}



console.log( "Funct...
So why did this happen?
var foo = 1;



function bar() {

if (foo == undefined) {

var foo = 10;

}



console.log( "Funct...
So why did this happen?
var foo = 1;



function bar() {

if (foo == undefined) {

var foo = 10;

}



console.log( "Funct...
So why did this happen?
var foo = 1;



function bar() {

if (foo == undefined) {

var foo = 10;

}



console.log( "Funct...
So why did this happen?
var foo = 1;



function bar() {

if (foo == undefined) {

var foo = 10;

}



console.log( "Funct...
var?
So all we did was remove var from the variable assignment
Why does that matter?
Again, this will be familiar to CFML ...
var
var foo = 1;



function bar() {

if (foo == undefined) {

var foo = 10;

}



console.log( "Function Scope Variable: ...
var
var foo = 1;



function bar() {

if (foo == undefined) {

var foo = 10;

}



console.log( "Function Scope Variable: ...
var
var foo = 1;



function bar() {

if (foo == undefined) {

var foo = 10;

}



console.log( "Function Scope Variable: ...
var
var foo = 1;



function bar() {

if (foo == undefined) {

var foo = 10;

}



console.log( "Function Scope Variable: ...
var
var foo = 1;



function bar() {

if (foo == undefined) {

var foo = 10;

}



console.log( "Function Scope Variable: ...
No var
var foo = 1;



function bar() {



foo = 10;



}



bar();

console.log( "Global Scope Variable: " + foo);
One mo...
No var
var foo = 1;



function bar() {



foo = 10;



}



bar();

console.log( "Global Scope Variable: " + foo);
One mo...
No var
var foo = 1;



function bar() {



foo = 10;



}



bar();

console.log( "Global Scope Variable: " + foo);
One mo...
No var
var foo = 1;



function bar() {



foo = 10;



}



bar();

console.log( "Global Scope Variable: " + foo);
One mo...
No var
var foo = 1;



function bar() {



foo = 10;



}



bar();

console.log( "Global Scope Variable: " + foo);
One mo...
PROTOTYPAL INHERITANCE
Objects from Objects
JavaScript Prototypes
Objects inherit from objects.
What could be more object
oriented than that? - Douglas
Crockford
In J...
Classical Inheritance
Classical Inheritance
Super-Class
Classical Inheritance
Sub-Class
Classical Inheritance
Classical Inheritance
Prototypal Inheritance
Creating objects that inherit from other objects
Can only be done with two object creation methods
...
Prototypal Inheritance
Prototypal Inheritance
Prototypes are how
one object inherit
from another object
Prototypal Inheritance
The inheritance
“feels” like classical
OO inheritance
when you use it
Prototypal Inheritance
But internally, it is
very different
Prototypal InheritanceEvery object has a
prototype, an object
that it inherits from
Prototypal Inheritance
The prototype of
an object is actually
a property of that
object
Prototypal Inheritance
Unless you explicitly
create one without.
Prototypal Inheritance
Even then, it still has
one, it is null
Prototypal InheritanceEvery object has a
__proto__ property
Every object has a
__proto__ property
Every object has a
__pro...
Prototypal InheritanceEvery object has a
__proto__ property
Every object has a
__proto__ property
Every object has a
__pro...
Prototypal Inheritance
__proto__
__proto__ should NEVER be used in production (it is
deprecated)
__proto__ is a great learning tool though
We can...
Prototypal Inheritance
var Car = {

wheelCount: 4,

motor: null,

go: function() {

console.log( "Vrooooom!!!" )

}

};


...
Prototypal Inheritance
var Car = {

wheelCount: 4,

motor: null,

go: function() {

console.log( "Vrooooom!!!" )

}

};


...
Prototypal Inheritance
var Car = {

wheelCount: 4,

motor: null,

go: function() {

console.log( "Vrooooom!!!" )

}

};


...
Prototypal Inheritance
var Car = {

wheelCount: 4,

motor: null,

go: function() {

console.log( "Vrooooom!!!" )

}

};


...
Prototypal Inheritance
var Car = {

wheelCount: 4,

motor: null,

go: function() {

console.log( "Vrooooom!!!" )

}

};


...
Prototypal Inheritance
var Car = {

wheelCount: 4,

motor: null,

go: function() {

console.log( "Vrooooom!!!" )

}

};


...
Prototypal Inheritance
var Car = {

wheelCount: 4,

motor: null,

go: function() {

console.log( "Vrooooom!!!" )

}

};


...
Prototypal Inheritance
var Car = {

wheelCount: 4,

motor: null,

go: function() {

console.log( "Vrooooom!!!" )

}

};


...
Prototypal Inheritance
Prototypal Inheritance
The result
Prototypal Inheritance
The result
var Car = {

wheelCount: 4,

motor: null,

go: function() {

console.log( "Vrooooom!!!" ...
Prototypal Inheritance
var Car = {

wheelCount: 4,

motor: null,

go: function() {

console.log( "Vrooooom!!!" )

}

};


...
Prototypal Inheritance
var Car = {

wheelCount: 4,

motor: null,

go: function() {

console.log( "Vrooooom!!!" )

}

};


...
Prototypal Inheritance
var Car = {

wheelCount: 4,

motor: null,

go: function() {

console.log( "Vrooooom!!!" )

}

};


...
Prototypal Inheritance
var Car = {

wheelCount: 4,

motor: null,

go: function() {

console.log( "Vrooooom!!!" )

}

};


...
Prototypal Inheritance
var Car = {

wheelCount: 4,

motor: null,

go: function() {

console.log( "Vrooooom!!!" )

}

};


...
Prototypal Inheritance
var Car = {

wheelCount: 4,

motor: null,

go: function() {

console.log( "Vrooooom!!!" )

}

};


...
Prototypal Inheritance
var Car = {

wheelCount: 4,

motor: null,

go: function() {

console.log( "Vrooooom!!!" )

}

};


...
Prototypal Inheritance
var Car = {

wheelCount: 4,

motor: null,

go: function() {

console.log( "Vrooooom!!!" )

}

};


...
Prototypal Inheritance
When you request a property from an object:
JavaScript checks for that property in the object
If it...
Prototypal Inheritance
Prototypal Inheritance
var Car = {

wheelCount: 4,

motor: null,

go: function() {

console.log( "Vrooooom!!!" )

}

};


...
Prototypal Inheritance
var Car = {

wheelCount: 4,

motor: null,

go: function() {

console.log( "Vrooooom!!!" )

}

};


...
Prototypal Inheritance
var Car = {

wheelCount: 4,

motor: null,

go: function() {

console.log( "Vrooooom!!!" )

}

};


...
Prototypal Inheritance
var Car = {

wheelCount: 4,

motor: null,

go: function() {

console.log( "Vrooooom!!!" )

}

};


...
Prototypal Inheritance
var Car = {

wheelCount: 4,

motor: null,

go: function() {

console.log( "Vrooooom!!!" )

}

};


...
Functions as First Class Objects
In JavaScript, Functions are first-class objects
They can have properties and methods of ...
Function Prototypes
This is where things get confusing
As we know, all objects have a prototype
That prototype is store in...
Function Prototypes
This is where things get confusing
As we know, all objects have a prototype
That prototype is store in...
Function Prototypes
This is where things get confusing
As we know, all objects have a prototype
That prototype is store in...
Constructor Functions
Are just regular functions
When combined with the new keyword they behave differently
When used with ...
Constructor Functions
function Car() {



}



Car.prototype.wheelCount = 4;

Car.prototype.motor = null;



Car.prototype...
Constructor Functions
function Car() {



}



Car.prototype.wheelCount = 4;

Car.prototype.motor = null;



Car.prototype...
Constructor Functions
function Car() {



}



Car.prototype.wheelCount = 4;

Car.prototype.motor = null;



Car.prototype...
Constructor Functions
function Car() {



}



Car.prototype.wheelCount = 4;

Car.prototype.motor = null;



Car.prototype...
Constructor Functions
function Car() {



}



Car.prototype.wheelCount = 4;

Car.prototype.motor = null;



Car.prototype...
Constructor Functions
function Car() {



}



Car.prototype.wheelCount = 4;

Car.prototype.motor = null;



Car.prototype...
Constructor Functions
function Car() {



}



Car.prototype.wheelCount = 4;

Car.prototype.motor = null;



Car.prototype...
Constructor Functions
function Car() {



}



Car.prototype.wheelCount = 4;

Car.prototype.motor = null;



Car.prototype...
Constructor Functions
function Car() {



}



Car.prototype.wheelCount = 4;

Car.prototype.motor = null;



Car.prototype...
Constructor Functions
function Car() {



}



Car.prototype.wheelCount = 4;

Car.prototype.motor = null;



Car.prototype...
__proto__ and prototype
Every object has a __proto__
__proto__ is a property
__proto__ references the object that is being...
Constructor Functions
Constructor Functions
Behaves like our
Object.create() object
Constructor Functions
It has a __proto__ like our
Object.create() object
Constructor Functions
But now we have this
constructor property
Constructor Functions
And in there is where we find the
prototype object from which we
are inheriting
Constructor Functions
So why all this prototype stuff?
Constructor Functions
You said that the constructor
automatically returns this, why
not just use that?
Constructor Functions
Let’s try it
Constructor Functions
this
this
function Car() {

this.wheelCount = 4;

this.motor = null;



this.go = function () {

console.log( 'Vrooommmm!!!' );...
this
function Car() {

this.wheelCount = 4;

this.motor = null;



this.go = function () {

console.log( 'Vrooommmm!!!' );...
this
function Car() {

this.wheelCount = 4;

this.motor = null;



this.go = function () {

console.log( 'Vrooommmm!!!' );...
this
function Car() {

this.wheelCount = 4;

this.motor = null;



this.go = function () {

console.log( 'Vrooommmm!!!' );...
this
function Car() {

this.wheelCount = 4;

this.motor = null;



this.go = function () {

console.log( 'Vrooommmm!!!' );...
this
function Car() {

this.wheelCount = 4;

this.motor = null;



this.go = function () {

console.log( 'Vrooommmm!!!' );...
this
function Car() {

this.wheelCount = 4;

this.motor = null;



this.go = function () {

console.log( 'Vrooommmm!!!' );...
Prototypal Inheritance
Prototypal Inheritance
Works similarly to
our other examples
Prototypal Inheritance
But, if we inspect the
object we see…
Prototypal Inheritance
The object has its own
copy of the properties
and methods
Prototypal Inheritance
It still has Car as its
__proto__
Prototypal Inheritance
And it would still
inherit the properties
and methods of Car’s
prototype
Prototypal Inheritance
But, in this case, Car has
no new properties and
methods
Prototypal Inheritance
What we’ve created are
instance variables
Prototypal Inheritance
Why not use this for
everything?
When you use this new objects do not inherit those
properties and methods
They get their ...
Prototypal Inheritance
So let’s think about how Car should work
We’ll create a new object that uses inherited and instance...
function Car(name, wheelCount, color, motorSize) {

this.name = name;

this.wheelCount = wheelCount;

this.color = color;
...
function Car(name, wheelCount, color, motorSize) {

this.name = name;

this.wheelCount = wheelCount;

this.color = color;
...
function Car(name, wheelCount, color, motorSize) {

this.name = name;

this.wheelCount = wheelCount;

this.color = color;
...
function Car(name, wheelCount, color, motorSize) {

this.name = name;

this.wheelCount = wheelCount;

this.color = color;
...
function Car(name, wheelCount, color, motorSize) {

this.name = name;

this.wheelCount = wheelCount;

this.color = color;
...
function Car(name, wheelCount, color, motorSize) {

this.name = name;

this.wheelCount = wheelCount;

this.color = color;
...
function Car(name, wheelCount, color, motorSize) {

this.name = name;

this.wheelCount = wheelCount;

this.color = color;
...
function Car(name, wheelCount, color, motorSize) {

this.name = name;

this.wheelCount = wheelCount;

this.color = color;
...
function Car(name, wheelCount, color, motorSize) {

this.name = name;

this.wheelCount = wheelCount;

this.color = color;
...
Prototypal Inheritance
Prototypal Inheritance
All of our inherited
methods worked
correctly
Prototypal Inheritance
And our instance
variables are unique to
each instance
Prototypal Inheritance
Back to Object.create()
Back to Object.create()
We look at prototypal inheritance with Object.create()
Back to Object.create()
We look at prototypal inheritance with Object.create()
But we didn’t look at instance variables
Back to Object.create()
We look at prototypal inheritance with Object.create()
But we didn’t look at instance variables
Le...
var Car = {

go : function () {

console.log( 'Vrooommmm!!!' );

},

addFuel : function () {

console.log( 'Fuel Added' );...
var Car = {

go : function () {

console.log( 'Vrooommmm!!!' );

},

addFuel : function () {

console.log( 'Fuel Added' );...
var Car = {

go : function () {

console.log( 'Vrooommmm!!!' );

},

addFuel : function () {

console.log( 'Fuel Added' );...
var Car = {

go : function () {

console.log( 'Vrooommmm!!!' );

},

addFuel : function () {

console.log( 'Fuel Added' );...
var Car = {

go : function () {

console.log( 'Vrooommmm!!!' );

},

addFuel : function () {

console.log( 'Fuel Added' );...
var Car = {

go : function () {

console.log( 'Vrooommmm!!!' );

},

addFuel : function () {

console.log( 'Fuel Added' );...
var Car = {

go : function () {

console.log( 'Vrooommmm!!!' );

},

addFuel : function () {

console.log( 'Fuel Added' );...
var Car = {

go : function () {

console.log( 'Vrooommmm!!!' );

},

addFuel : function () {

console.log( 'Fuel Added' );...
var Car = {

go : function () {

console.log( 'Vrooommmm!!!' );

},

addFuel : function () {

console.log( 'Fuel Added' );...
Back to Object.create()
Back to Object.create()
Other than the properties being non-
writable, non-configurable, and non-
enumerable (except for co...
Back to Object.create()
But it sucks
var Car = {

init : function (name, wheelCount, color, cylinders) {

this.name = name;

this.wheelCount = wheelCount;

thi...
var Car = {

init : function (name, wheelCount, color, cylinders) {

this.name = name;

this.wheelCount = wheelCount;

thi...
var Car = {

init : function (name, wheelCount, color, cylinders) {

this.name = name;

this.wheelCount = wheelCount;

thi...
var Car = {

init : function (name, wheelCount, color, cylinders) {

this.name = name;

this.wheelCount = wheelCount;

thi...
var Car = {

init : function (name, wheelCount, color, cylinders) {

this.name = name;

this.wheelCount = wheelCount;

thi...
var Car = {

init : function (name, wheelCount, color, cylinders) {

this.name = name;

this.wheelCount = wheelCount;

thi...
var Car = {

init : function (name, wheelCount, color, cylinders) {

this.name = name;

this.wheelCount = wheelCount;

thi...
Back to Object.create()
Back to Object.create()
Still working
But wait… there’s more
But wait… there’s more
We can use the same functions we were using before for
constructors with Object.create()
But wait… there’s more
We can use the same functions we were using before for
constructors with Object.create()
The new ob...
But wait… there’s more
We can use the same functions we were using before for
constructors with Object.create()
The new ob...
function Car(name, wheelCount, color, motorSize) {

this.name = name;

this.wheelCount = wheelCount;

this.color = color;
...
function Car(name, wheelCount, color, motorSize) {

this.name = name;

this.wheelCount = wheelCount;

this.color = color;
...
function Car(name, wheelCount, color, motorSize) {

this.name = name;

this.wheelCount = wheelCount;

this.color = color;
...
function Car(name, wheelCount, color, motorSize) {

this.name = name;

this.wheelCount = wheelCount;

this.color = color;
...
function Car(name, wheelCount, color, motorSize) {

this.name = name;

this.wheelCount = wheelCount;

this.color = color;
...
function Car(name, wheelCount, color, motorSize) {

this.name = name;

this.wheelCount = wheelCount;

this.color = color;
...
function Car(name, wheelCount, color, motorSize) {

this.name = name;

this.wheelCount = wheelCount;

this.color = color;
...
function Car(name, wheelCount, color, motorSize) {

this.name = name;

this.wheelCount = wheelCount;

this.color = color;
...
Back to Object.create()
Back to Object.create()
Still inheriting the
prototype’s methods
Back to Object.create()
But no properties
Back to Object.create()
function Car() {}



Car.prototype.init = function (name, wheelCount, color, motorSize) {

this.name = name;

this.wheelCo...
function Car() {}



Car.prototype.init = function (name, wheelCount, color, motorSize) {

this.name = name;

this.wheelCo...
function Car() {}



Car.prototype.init = function (name, wheelCount, color, motorSize) {

this.name = name;

this.wheelCo...
function Car() {}



Car.prototype.init = function (name, wheelCount, color, motorSize) {

this.name = name;

this.wheelCo...
function Car() {}



Car.prototype.init = function (name, wheelCount, color, motorSize) {

this.name = name;

this.wheelCo...
So???
So which one should I use?!?!?!
I bet you were hoping for an answer
A lot of experts will tell you to use Object.cre...
var Car = {

init : function (name, wheelCount, color, cylinders) {

this.name = name;

this.wheelCount = wheelCount;

thi...
function Car(name, wheelCount, color, motorSize) {

this.name = name;

this.wheelCount = wheelCount;

this.color = color;
...
Closure Example
function makeAdder(howMuch) {

return function (addTo) {

return addTo + howMuch;

}

}



//Make a 5 adde...
Closure Example
function makeAdder(howMuch) {

return function (addTo) {

return addTo + howMuch;

}

}



//Make a 5 adde...
Closure Example
function makeAdder(howMuch) {

return function (addTo) {

return addTo + howMuch;

}

}



//Make a 5 adde...
Closure Example
function makeAdder(howMuch) {

return function (addTo) {

return addTo + howMuch;

}

}



//Make a 5 adde...
Closure Example
function makeAdder(howMuch) {

return function (addTo) {

return addTo + howMuch;

}

}



//Make a 5 adde...
Closure Example
function makeAdder(howMuch) {

return function (addTo) {

return addTo + howMuch;

}

}



//Make a 5 adde...
Closure Example
function makeAdder(howMuch) {

return function (addTo) {

return addTo + howMuch;

}

}



//Make a 5 adde...
Closure Example
function makeAdder(howMuch) {

return function (addTo) {

return addTo + howMuch;

}

}



//Make a 5 adde...
Closure Example
function makeAdder(howMuch) {

return function (addTo) {

return addTo + howMuch;

}

}



//Make a 5 adde...
Closure Example
function makeAdder(howMuch) {

return function (addTo) {

return addTo + howMuch;

}

}



//Make a 5 adde...
Closure Example
function makeAdder(howMuch) {

return function (addTo) {

return addTo + howMuch;

}

}



//Make a 5 adde...
Closure Example
function makeAdder(howMuch) {

return function (addTo) {

return addTo + howMuch;

}

}



//Make a 5 adde...
Closure Example
function makeAdder(howMuch) {

return function (addTo) {

return addTo + howMuch;

}

}



//Make a 5 adde...
Closure Example
function makeAdder(howMuch) {

return function (addTo) {

return addTo + howMuch;

}

}



//Make a 5 adde...
Closures
In basic terms, a Closure is a function that maintains the
context in which is was created in addition to its own...
Java scriptconfusingbits
Java scriptconfusingbits
Java scriptconfusingbits
Java scriptconfusingbits
Java scriptconfusingbits
Java scriptconfusingbits
Java scriptconfusingbits
Java scriptconfusingbits
Java scriptconfusingbits
Java scriptconfusingbits
Java scriptconfusingbits
Java scriptconfusingbits
Java scriptconfusingbits
Java scriptconfusingbits
Java scriptconfusingbits
Java scriptconfusingbits
Java scriptconfusingbits
Java scriptconfusingbits
Java scriptconfusingbits
Java scriptconfusingbits
Java scriptconfusingbits
Java scriptconfusingbits
Java scriptconfusingbits
Java scriptconfusingbits
Upcoming SlideShare
Loading in...5
×

Java scriptconfusingbits

244

Published on

Published in: Software, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
244
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Java scriptconfusingbits

  1. 1. JAVASCRIPT: THE CONFUSING BITS JSON Dean cf.Objective() 2014
  2. 2. Who am I? This guy Otherwise nobody
  3. 3. ARE YOU CONFUSED? I was JavaScript is the most confusing thing I have ever tried to learn
  4. 4. JavaScript is not your parents’ programming language No Classes Unusual inheritance Changing scopes Weird object creation Functions with functions Unusual variable behavior
  5. 5. What this session isn’t This session is not an intro to JavaScript You have worked with JavaScript for a while This session is not about politics, muscle cars, your DVR, or anything else you may find confusing
  6. 6. Scoping
  7. 7. Scoping JavaScript Scopes !== C-Style Scopes JavaScript does not have block scope CFML developers are used to this If you create a variable it does NOT live in the context of the “block” where it was created (if, loop, etc). The variable lives in the execution context where is was created Execution context was a new term for me
  8. 8. Function Scope JavaScript has “function scope” or “execution context” When a variable is created, it is created in that scope The execution context where it was created The function in which it was created var x = 1;
 
 function doSomething() {
 for (i = 1; i < 10; i++) {
 x += i;
 }
 }
 
 doSomething();
 
 console.log(x);
  9. 9. Function Scope JavaScript has “function scope” or “execution context” When a variable is created, it is created in that scope The execution context where it was created The function in which it was created var x = 1;
 
 function doSomething() {
 for (i = 1; i < 10; i++) {
 x += i;
 }
 }
 
 doSomething();
 
 console.log(x); Variable created in the global scope
  10. 10. Function Scope JavaScript has “function scope” or “execution context” When a variable is created, it is created in that scope The execution context where it was created The function in which it was created var x = 1;
 
 function doSomething() {
 for (i = 1; i < 10; i++) {
 x += i;
 }
 }
 
 doSomething();
 
 console.log(x); Variable from the global scope is used
  11. 11. Function Scope JavaScript has “function scope” or “execution context” When a variable is created, it is created in that scope The execution context where it was created The function in which it was created var x = 1;
 
 function doSomething() {
 for (i = 1; i < 10; i++) {
 x += i;
 }
 }
 
 doSomething();
 
 console.log(x); Variable from the global scope was updated by doSomething()
  12. 12. var x = 1;
 
 function doSomething() {
 var x = 1;
 
 for (i = 1; i < 10; i++) {
 x += i;
 }
 
 console.log( "Function Scope Variable: " + x);
 }
 
 doSomething();
 
 console.log( "Global Scope Scope Variable: " + x); Function Scope JavaScript has “function scope” or “execution context” When a variable is created, it is created in that scope The execution context where it was created The function in which it was created var x = 1;
 
 function doSomething() {
 for (i = 1; i < 10; i++) {
 x += i;
 }
 }
 
 doSomething();
 
 console.log(x);
  13. 13. var x = 1;
 
 function doSomething() {
 var x = 1;
 
 for (i = 1; i < 10; i++) {
 x += i;
 }
 
 console.log( "Function Scope Variable: " + x);
 }
 
 doSomething();
 
 console.log( "Global Scope Scope Variable: " + x); Function Scope JavaScript has “function scope” or “execution context” When a variable is created, it is created in that scope The execution context where it was created The function in which it was created var x = 1;
 
 function doSomething() {
 for (i = 1; i < 10; i++) {
 x += i;
 }
 }
 
 doSomething();
 
 console.log(x); Variable created in the global scope
  14. 14. var x = 1;
 
 function doSomething() {
 var x = 1;
 
 for (i = 1; i < 10; i++) {
 x += i;
 }
 
 console.log( "Function Scope Variable: " + x);
 }
 
 doSomething();
 
 console.log( "Global Scope Scope Variable: " + x); Function Scope JavaScript has “function scope” or “execution context” When a variable is created, it is created in that scope The execution context where it was created The function in which it was created var x = 1;
 
 function doSomething() {
 for (i = 1; i < 10; i++) {
 x += i;
 }
 }
 
 doSomething();
 
 console.log(x); Another variable created in the scope of the doSomething() function scope
  15. 15. var x = 1;
 
 function doSomething() {
 var x = 1;
 
 for (i = 1; i < 10; i++) {
 x += i;
 }
 
 console.log( "Function Scope Variable: " + x);
 }
 
 doSomething();
 
 console.log( "Global Scope Scope Variable: " + x); Function Scope JavaScript has “function scope” or “execution context” When a variable is created, it is created in that scope The execution context where it was created The function in which it was created var x = 1;
 
 function doSomething() {
 for (i = 1; i < 10; i++) {
 x += i;
 }
 }
 
 doSomething();
 
 console.log(x); The function scope variable was changed
  16. 16. var x = 1;
 
 function doSomething() {
 var x = 1;
 
 for (i = 1; i < 10; i++) {
 x += i;
 }
 
 console.log( "Function Scope Variable: " + x);
 }
 
 doSomething();
 
 console.log( "Global Scope Scope Variable: " + x); Function Scope JavaScript has “function scope” or “execution context” When a variable is created, it is created in that scope The execution context where it was created The function in which it was created var x = 1;
 
 function doSomething() {
 for (i = 1; i < 10; i++) {
 x += i;
 }
 }
 
 doSomething();
 
 console.log(x); The global scope variable was unchanged
  17. 17. var x = 1;
 
 function doSomething() {
 var x = 1;
 
 for (i = 1; i < 10; i++) {
 x += i;
 }
 
 console.log( "Function Scope Variable: " + x);
 }
 
 doSomething();
 
 console.log( "Global Scope Scope Variable: " + x); Function Scope JavaScript has “function scope” or “execution context” When a variable is created, it is created in that scope The execution context where it was created The function in which it was created var x = 1;
 
 function doSomething() {
 for (i = 1; i < 10; i++) {
 x += i;
 }
 }
 
 doSomething();
 
 console.log(x);
  18. 18. Variable Hoisting “JavaScript is the world’s most misunderstood programming language” ! - Douglas Crockford
  19. 19. Variable Hoisting var foo = 1;
 
 function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log(foo);
 }
 
 bar(); Consider this simple example
  20. 20. Variable Hoisting var foo = 1;
 
 function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log(foo);
 }
 
 bar(); Consider this simple example Any reasonable person would look at this and say…
  21. 21. Variable Hoisting var foo = 1;
 
 function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log(foo);
 }
 
 bar(); Consider this simple example OK… I’m creating a variable called foo
  22. 22. Variable Hoisting var foo = 1;
 
 function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log(foo);
 }
 
 bar(); Consider this simple example And a function called bar()
  23. 23. Variable Hoisting var foo = 1;
 
 function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log(foo);
 }
 
 bar(); Consider this simple example Then I’m calling bar()
  24. 24. Variable Hoisting var foo = 1;
 
 function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log(foo);
 }
 
 bar(); Consider this simple example bar() checks to see if foo is defined
  25. 25. Variable Hoisting var foo = 1;
 
 function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log(foo);
 }
 
 bar(); Consider this simple example If foo isn’t defined, then it gets defined with a value of 10
  26. 26. Variable Hoisting var foo = 1;
 
 function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log(foo);
 }
 
 bar(); Consider this simple example Then foo gets logged out
  27. 27. Variable Hoisting var foo = 1;
 
 function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log(foo);
 }
 
 bar(); Consider this simple exampleWell, we know foo is defined, with a value of 1.
  28. 28. Variable Hoisting var foo = 1;
 
 function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log(foo);
 }
 
 bar(); Consider this simple example So this should log a 1, right?
  29. 29. Variable Hoisting var foo = 1;
 
 function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log(foo);
 }
 
 bar(); Consider this simple example
  30. 30. Variable Hoisting var foo = 1;
 
 function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log(foo);
 }
 
 bar(); Consider this simple example Wait… what?
  31. 31. Variable Hoisting var foo = 1;
 
 function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log(foo);
 }
 
 bar(); Consider this simple example
  32. 32. So what happened? What we just saw is confusing Why is the value 10 and not 1? The answer is a combination of Function Scope And variable hoisting
  33. 33. So what is variable hoisting? Function and Variable declarations get “hoisted” to the top of the executable context Functions first Then variables So the JavaScript engine is rewriting our code Let’s see how
  34. 34. Variable Hoisting var foo = 1;
 
 function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log(foo);
 }
 
 bar(); JavaScript rewriting our code
  35. 35. Variable Hoisting var foo = 1;
 
 function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log(foo);
 }
 
 bar(); JavaScript rewriting our codebar() is a function, so it gets hoisted first to the top of the execution context
  36. 36. Variable Hoisting var foo = 1;
 
 function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log(foo);
 }
 
 bar(); JavaScript rewriting our code In the case, it is the global context
  37. 37. Variable Hoisting var foo = 1;
 
 function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log(foo);
 }
 
 bar(); JavaScript rewriting our code function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log(foo);
 }
 ! var foo = 1;
 
 
 bar();
  38. 38. Variable Hoisting var foo = 1;
 
 function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log(foo);
 }
 
 bar(); JavaScript rewriting our code function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log(foo);
 }
 ! var foo = 1;
 
 
 bar(); Next our variables get hoisted.
  39. 39. Variable Hoisting var foo = 1;
 
 function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log(foo);
 }
 
 bar(); JavaScript rewriting our code function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log(foo);
 }
 ! var foo = 1;
 
 
 bar(); Next our variables get hoisted. Wait… did he says “variableS”? There’s one variable, it’s foo, right?
  40. 40. Variable Hoisting var foo = 1;
 
 function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log(foo);
 }
 
 bar(); JavaScript rewriting our code function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log(foo);
 }
 ! var foo = 1;
 
 
 bar(); function bar() { var foo; 
 if (foo == undefined) { foo = 10;
 }
 
 console.log(foo);
 }
 ! var foo; foo = 1;
 
 bar();
  41. 41. Variable Hoisting var foo = 1;
 
 function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log(foo);
 }
 
 bar(); JavaScript rewriting our code function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log(foo);
 }
 ! var foo = 1;
 
 
 bar(); function bar() { var foo; 
 if (foo == undefined) { foo = 10;
 }
 
 console.log(foo);
 }
 ! var foo; foo = 1;
 
 bar(); So our foo variable from the global scope got hoisted, though not very far.
  42. 42. Variable Hoisting var foo = 1;
 
 function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log(foo);
 }
 
 bar(); JavaScript rewriting our code function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log(foo);
 }
 ! var foo = 1;
 
 
 bar(); function bar() { var foo; 
 if (foo == undefined) { foo = 10;
 }
 
 console.log(foo);
 }
 ! var foo; foo = 1;
 
 bar(); It is now at the top of the global execution context, below any function from the same context.
  43. 43. Variable Hoisting var foo = 1;
 
 function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log(foo);
 }
 
 bar(); JavaScript rewriting our code function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log(foo);
 }
 ! var foo = 1;
 
 
 bar(); function bar() { var foo; 
 if (foo == undefined) { foo = 10;
 }
 
 console.log(foo);
 }
 ! var foo; foo = 1;
 
 bar(); But what’s this? Our foo variable in the function also got hoisted to the top of its execution context.
  44. 44. Variable Hoisting var foo = 1;
 
 function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log(foo);
 }
 
 bar(); JavaScript rewriting our code function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log(foo);
 }
 ! var foo = 1;
 
 
 bar(); function bar() { var foo; 
 if (foo == undefined) { foo = 10;
 }
 
 console.log(foo);
 }
 ! var foo; foo = 1;
 
 bar(); So we (or at least, I) thought that the if statement was checking to see if the global variable existed.
  45. 45. Variable Hoisting var foo = 1;
 
 function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log(foo);
 }
 
 bar(); JavaScript rewriting our code function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log(foo);
 }
 ! var foo = 1;
 
 
 bar(); function bar() { var foo; 
 if (foo == undefined) { foo = 10;
 }
 
 console.log(foo);
 }
 ! var foo; foo = 1;
 
 bar(); But after JavaScript’s rewrite we see it is actually checking to see if this variable is undefined. ! Is it?
  46. 46. Variable Hoisting var foo = 1;
 
 function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log(foo);
 }
 
 bar(); JavaScript rewriting our code function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log(foo);
 }
 ! var foo = 1;
 
 
 bar(); function bar() { var foo; 
 if (foo == undefined) { foo = 10;
 }
 
 console.log(foo);
 }
 ! var foo; foo = 1;
 
 bar(); A variable that has not been assigned a value is of type undefined. ! -MDN
  47. 47. Variable Hoisting var foo = 1;
 
 function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log(foo);
 }
 
 bar(); JavaScript rewriting our code function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log(foo);
 }
 ! var foo = 1;
 
 
 bar(); function bar() { var foo; 
 if (foo == undefined) { foo = 10;
 }
 
 console.log(foo);
 }
 ! var foo; foo = 1;
 
 bar(); So foo is undefined! It exists, but has not been given a value
  48. 48. Variable Hoisting var foo = 1;
 
 function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log(foo);
 }
 
 bar(); JavaScript rewriting our code function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log(foo);
 }
 ! var foo = 1;
 
 
 bar(); function bar() { var foo; 
 if (foo == undefined) { foo = 10;
 }
 
 console.log(foo);
 }
 ! var foo; foo = 1;
 
 bar(); So foo receives a value of 10 because it is previously undefined
  49. 49. Variable Hoisting var foo = 1;
 
 function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log(foo);
 }
 
 bar(); JavaScript rewriting our code function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log(foo);
 }
 ! var foo = 1;
 
 
 bar(); function bar() { var foo; 
 if (foo == undefined) { foo = 10;
 }
 
 console.log(foo);
 }
 ! var foo; foo = 1;
 
 bar(); This foo remains unchanged in the global scope. If we were to log again here, we’d see a 1
  50. 50. Variable Hoisting var foo = 1;
 
 function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log(foo);
 }
 
 bar(); JavaScript rewriting our code function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log(foo);
 }
 ! var foo = 1;
 
 
 bar(); function bar() { var foo; 
 if (foo == undefined) { foo = 10;
 }
 
 console.log(foo);
 }
 ! var foo; foo = 1;
 
 bar(); var foo = 1;
 
 function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log( "Function Scope Variable: " + foo);
 }
 
 bar();
 console.log( "Global Scope Variable: " + foo);
  51. 51. Variable Hoisting var foo = 1;
 
 function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log(foo);
 }
 
 bar(); JavaScript rewriting our code function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log(foo);
 }
 ! var foo = 1;
 
 
 bar(); function bar() { var foo; 
 if (foo == undefined) { foo = 10;
 }
 
 console.log(foo);
 }
 ! var foo; foo = 1;
 
 bar(); var foo = 1;
 
 function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log( "Function Scope Variable: " + foo);
 }
 
 bar();
 console.log( "Global Scope Variable: " + foo);
  52. 52. So why did this happen? var foo = 1;
 
 function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log( "Function Scope Variable: " + foo);
 }
 
 bar();
 console.log( "Global Scope Variable: " + foo); It gets more confusing
  53. 53. So why did this happen? var foo = 1;
 
 function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log( "Function Scope Variable: " + foo);
 }
 
 bar();
 console.log( "Global Scope Variable: " + foo); It gets more confusing We’ll make a small change to this code
  54. 54. So why did this happen? var foo = 1;
 
 function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log( "Function Scope Variable: " + foo);
 }
 
 bar();
 console.log( "Global Scope Variable: " + foo); It gets more confusing We’ll make a small change to this code var foo = 1;
 
 function bar() {
 if (foo == undefined) {
 foo = 10;
 }
 
 console.log( "Function Scope Variable: " + foo);
 }
 
 bar();
 console.log( "Global Scope Variable: " + foo);
  55. 55. So why did this happen? var foo = 1;
 
 function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log( "Function Scope Variable: " + foo);
 }
 
 bar();
 console.log( "Global Scope Variable: " + foo); It gets more confusing var foo = 1;
 
 function bar() {
 if (foo == undefined) {
 foo = 10;
 }
 
 console.log( "Function Scope Variable: " + foo);
 }
 
 bar();
 console.log( "Global Scope Variable: " + foo); Did you see it?
  56. 56. So why did this happen? var foo = 1;
 
 function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log( "Function Scope Variable: " + foo);
 }
 
 bar();
 console.log( "Global Scope Variable: " + foo); It gets more confusing var foo = 1;
 
 function bar() {
 if (foo == undefined) {
 foo = 10;
 }
 
 console.log( "Function Scope Variable: " + foo);
 }
 
 bar();
 console.log( "Global Scope Variable: " + foo); Right there. I took out the var
  57. 57. So why did this happen? var foo = 1;
 
 function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log( "Function Scope Variable: " + foo);
 }
 
 bar();
 console.log( "Global Scope Variable: " + foo); It gets more confusing var foo = 1;
 
 function bar() {
 if (foo == undefined) {
 foo = 10;
 }
 
 console.log( "Function Scope Variable: " + foo);
 }
 
 bar();
 console.log( "Global Scope Variable: " + foo); So now what happens?
  58. 58. So why did this happen? var foo = 1;
 
 function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log( "Function Scope Variable: " + foo);
 }
 
 bar();
 console.log( "Global Scope Variable: " + foo); It gets more confusing var foo = 1;
 
 function bar() {
 if (foo == undefined) {
 foo = 10;
 }
 
 console.log( "Function Scope Variable: " + foo);
 }
 
 bar();
 console.log( "Global Scope Variable: " + foo);
  59. 59. So why did this happen? var foo = 1;
 
 function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log( "Function Scope Variable: " + foo);
 }
 
 bar();
 console.log( "Global Scope Variable: " + foo); It gets more confusing var foo = 1;
 
 function bar() {
 if (foo == undefined) {
 foo = 10;
 }
 
 console.log( "Function Scope Variable: " + foo);
 }
 
 bar();
 console.log( "Global Scope Variable: " + foo);
  60. 60. So why did this happen? var foo = 1;
 
 function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log( "Function Scope Variable: " + foo);
 }
 
 bar();
 console.log( "Global Scope Variable: " + foo); It gets more confusing var foo = 1;
 
 function bar() {
 if (foo == undefined) {
 foo = 10;
 }
 
 console.log( "Function Scope Variable: " + foo);
 }
 
 bar();
 console.log( "Global Scope Variable: " + foo); Exactly what we expected to happen the first time!
  61. 61. So why did this happen? var foo = 1;
 
 function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log( "Function Scope Variable: " + foo);
 }
 
 bar();
 console.log( "Global Scope Variable: " + foo); It gets more confusing var foo = 1;
 
 function bar() {
 if (foo == undefined) {
 foo = 10;
 }
 
 console.log( "Function Scope Variable: " + foo);
 }
 
 bar();
 console.log( "Global Scope Variable: " + foo); Huh?
  62. 62. So why did this happen? var foo = 1;
 
 function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log( "Function Scope Variable: " + foo);
 }
 
 bar();
 console.log( "Global Scope Variable: " + foo); It gets more confusing var foo = 1;
 
 function bar() {
 if (foo == undefined) {
 foo = 10;
 }
 
 console.log( "Function Scope Variable: " + foo);
 }
 
 bar();
 console.log( "Global Scope Variable: " + foo);
  63. 63. var? So all we did was remove var from the variable assignment Why does that matter? Again, this will be familiar to CFML developers The use of var will cause the creation of the variable in the local scope (the execution context) Failure to use var will result in the JS engine searching through the scope chain for the variable If it doesn’t find the variable by the time it reaches the global scope, it will create it there
  64. 64. var var foo = 1;
 
 function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log( "Function Scope Variable: " + foo);
 }
 
 bar();
 console.log( "Global Scope Variable: " + foo); Let’s look at this again
  65. 65. var var foo = 1;
 
 function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log( "Function Scope Variable: " + foo);
 }
 
 bar();
 console.log( "Global Scope Variable: " + foo); Let’s look at this again Here we might think that the variable will only be created if the if statement evaluates to true
  66. 66. var var foo = 1;
 
 function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log( "Function Scope Variable: " + foo);
 }
 
 bar();
 console.log( "Global Scope Variable: " + foo); Let’s look at this again var foo = 1;
 
 function bar() { var foo;
 if (foo == undefined) {
 foo = 10;
 }
 
 console.log( "Function Scope Variable: " + foo);
 }
 
 bar();
 console.log( "Global Scope Variable: " + foo); But after that variable is hoisted we can see that it will exist (though it will be undefined) regardless of the if statement
  67. 67. var var foo = 1;
 
 function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log( "Function Scope Variable: " + foo);
 }
 
 bar();
 console.log( "Global Scope Variable: " + foo); Let’s look at this again var foo = 1;
 
 function bar() { var foo;
 if (foo == undefined) {
 foo = 10;
 }
 
 console.log( "Function Scope Variable: " + foo);
 }
 
 bar();
 console.log( "Global Scope Variable: " + foo); It doesn’t matter that the variable already exists here, because this is in a different scope
  68. 68. var var foo = 1;
 
 function bar() {
 if (foo == undefined) {
 var foo = 10;
 }
 
 console.log( "Function Scope Variable: " + foo);
 }
 
 bar();
 console.log( "Global Scope Variable: " + foo); Let’s look at this again var foo = 1;
 
 function bar() { var foo;
 if (foo == undefined) {
 foo = 10;
 }
 
 console.log( "Function Scope Variable: " + foo);
 }
 
 bar();
 console.log( "Global Scope Variable: " + foo);
  69. 69. No var var foo = 1;
 
 function bar() {
 
 foo = 10;
 
 }
 
 bar();
 console.log( "Global Scope Variable: " + foo); One more time
  70. 70. No var var foo = 1;
 
 function bar() {
 
 foo = 10;
 
 }
 
 bar();
 console.log( "Global Scope Variable: " + foo); One more time When var is not used in the assignment, the JavaScript engine will search for the variable instead of creating it
  71. 71. No var var foo = 1;
 
 function bar() {
 
 foo = 10;
 
 }
 
 bar();
 console.log( "Global Scope Variable: " + foo); One more time First it will look in the function context
  72. 72. No var var foo = 1;
 
 function bar() {
 
 foo = 10;
 
 }
 
 bar();
 console.log( "Global Scope Variable: " + foo); One more time Then it will look in the next scope in the chain, in this case, it is the global scope and it will find it.
  73. 73. No var var foo = 1;
 
 function bar() {
 
 foo = 10;
 
 }
 
 bar();
 console.log( "Global Scope Variable: " + foo); One more time function bar() {
 
 foo = 10;
 
 }
 
 bar();
 console.log( "Global Scope Variable: " + foo); It it doesn’t find it in the global scope, it will create it there.
  74. 74. PROTOTYPAL INHERITANCE Objects from Objects
  75. 75. JavaScript Prototypes Objects inherit from objects. What could be more object oriented than that? - Douglas Crockford In JavaScript objects can be created from other objects This can be accomplished in several ways Many consider it very elegant
  76. 76. Classical Inheritance
  77. 77. Classical Inheritance Super-Class
  78. 78. Classical Inheritance Sub-Class
  79. 79. Classical Inheritance
  80. 80. Classical Inheritance
  81. 81. Prototypal Inheritance Creating objects that inherit from other objects Can only be done with two object creation methods Constructor Functions Object.create() Either one is acceptable, but Object.create is recommended by many experts Object.create() is not supported by all browsers, but that is easily fixed with Webshim Lib or other polyfills
  82. 82. Prototypal Inheritance
  83. 83. Prototypal Inheritance Prototypes are how one object inherit from another object
  84. 84. Prototypal Inheritance The inheritance “feels” like classical OO inheritance when you use it
  85. 85. Prototypal Inheritance But internally, it is very different
  86. 86. Prototypal InheritanceEvery object has a prototype, an object that it inherits from
  87. 87. Prototypal Inheritance The prototype of an object is actually a property of that object
  88. 88. Prototypal Inheritance Unless you explicitly create one without.
  89. 89. Prototypal Inheritance Even then, it still has one, it is null
  90. 90. Prototypal InheritanceEvery object has a __proto__ property Every object has a __proto__ property Every object has a __proto__ property Every object has a __proto__ property Every object has a __proto__ property
  91. 91. Prototypal InheritanceEvery object has a __proto__ property Every object has a __proto__ property Every object has a __proto__ property Every object has a __proto__ property Every object has a __proto__ property In modern browsers
  92. 92. Prototypal Inheritance
  93. 93. __proto__ __proto__ should NEVER be used in production (it is deprecated) __proto__ is a great learning tool though We can use __proto__ to look at an object’s prototype in the console You can also access an object’s prototype using Object.getPrototypeOf(object) (using Webshim Lib to support older browsers)
  94. 94. Prototypal Inheritance var Car = {
 wheelCount: 4,
 motor: null,
 go: function() {
 console.log( "Vrooooom!!!" )
 }
 };
 
 var chevette = Object.create( Car );
 
 chevette.motor = { cylinder: 4 };
 
 chevette.go();
 console.log( Car.isPrototypeOf( chevette ) );
 console.log( chevette );
  95. 95. Prototypal Inheritance var Car = {
 wheelCount: 4,
 motor: null,
 go: function() {
 console.log( "Vrooooom!!!" )
 }
 };
 
 var chevette = Object.create( Car );
 
 chevette.motor = { cylinder: 4 };
 
 chevette.go();
 console.log( Car.isPrototypeOf( chevette ) );
 console.log( chevette ); Simplified example
  96. 96. Prototypal Inheritance var Car = {
 wheelCount: 4,
 motor: null,
 go: function() {
 console.log( "Vrooooom!!!" )
 }
 };
 
 var chevette = Object.create( Car );
 
 chevette.motor = { cylinder: 4 };
 
 chevette.go();
 console.log( Car.isPrototypeOf( chevette ) );
 console.log( chevette ); Create an object from which we will inherit properties and methods
  97. 97. Prototypal Inheritance var Car = {
 wheelCount: 4,
 motor: null,
 go: function() {
 console.log( "Vrooooom!!!" )
 }
 };
 
 var chevette = Object.create( Car );
 
 chevette.motor = { cylinder: 4 };
 
 chevette.go();
 console.log( Car.isPrototypeOf( chevette ) );
 console.log( chevette ); Create a new object that inherits from Car (more on this in a bit)
  98. 98. Prototypal Inheritance var Car = {
 wheelCount: 4,
 motor: null,
 go: function() {
 console.log( "Vrooooom!!!" )
 }
 };
 
 var chevette = Object.create( Car );
 
 chevette.motor = { cylinder: 4 };
 
 chevette.go();
 console.log( Car.isPrototypeOf( chevette ) );
 console.log( chevette ); Assign a new property to the new object
  99. 99. Prototypal Inheritance var Car = {
 wheelCount: 4,
 motor: null,
 go: function() {
 console.log( "Vrooooom!!!" )
 }
 };
 
 var chevette = Object.create( Car );
 
 chevette.motor = { cylinder: 4 };
 
 chevette.go();
 console.log( Car.isPrototypeOf( chevette ) );
 console.log( chevette ); Call an inherited method, just to see if it works
  100. 100. Prototypal Inheritance var Car = {
 wheelCount: 4,
 motor: null,
 go: function() {
 console.log( "Vrooooom!!!" )
 }
 };
 
 var chevette = Object.create( Car );
 
 chevette.motor = { cylinder: 4 };
 
 chevette.go();
 console.log( Car.isPrototypeOf( chevette ) );
 console.log( chevette ); Examine the new object
  101. 101. Prototypal Inheritance var Car = {
 wheelCount: 4,
 motor: null,
 go: function() {
 console.log( "Vrooooom!!!" )
 }
 };
 
 var chevette = Object.create( Car );
 
 chevette.motor = { cylinder: 4 };
 
 chevette.go();
 console.log( Car.isPrototypeOf( chevette ) );
 console.log( chevette );
  102. 102. Prototypal Inheritance
  103. 103. Prototypal Inheritance The result
  104. 104. Prototypal Inheritance The result var Car = {
 wheelCount: 4,
 motor: null,
 go: function() {
 console.log( "Vrooooom!!!" )
 }
 };
 
 var chevette = Object.create( Car );
 chevette.motor = { cylinder: 4 };
 
 chevette.go(); 
 console.log( Car.isPrototypeOf( chevette ) );
 console.log( chevette );
  105. 105. Prototypal Inheritance var Car = {
 wheelCount: 4,
 motor: null,
 go: function() {
 console.log( "Vrooooom!!!" )
 }
 };
 
 var chevette = Object.create( Car );
 chevette.motor = { cylinder: 4 };
 
 chevette.go(); 
 console.log( Car.isPrototypeOf( chevette ) );
 console.log( chevette ); Our inherited method ran
  106. 106. Prototypal Inheritance var Car = {
 wheelCount: 4,
 motor: null,
 go: function() {
 console.log( "Vrooooom!!!" )
 }
 };
 
 var chevette = Object.create( Car );
 chevette.motor = { cylinder: 4 };
 
 chevette.go(); 
 console.log( Car.isPrototypeOf( chevette ) );
 console.log( chevette ); Car is, indeed, the prototype of chevette
  107. 107. Prototypal Inheritance var Car = {
 wheelCount: 4,
 motor: null,
 go: function() {
 console.log( "Vrooooom!!!" )
 }
 };
 
 var chevette = Object.create( Car );
 chevette.motor = { cylinder: 4 };
 
 chevette.go(); 
 console.log( Car.isPrototypeOf( chevette ) );
 console.log( chevette ); The new object
  108. 108. Prototypal Inheritance var Car = {
 wheelCount: 4,
 motor: null,
 go: function() {
 console.log( "Vrooooom!!!" )
 }
 };
 
 var chevette = Object.create( Car );
 chevette.motor = { cylinder: 4 };
 
 chevette.go(); 
 console.log( Car.isPrototypeOf( chevette ) );
 console.log( chevette ); The new motor property of the object
  109. 109. Prototypal Inheritance var Car = {
 wheelCount: 4,
 motor: null,
 go: function() {
 console.log( "Vrooooom!!!" )
 }
 };
 
 var chevette = Object.create( Car );
 chevette.motor = { cylinder: 4 };
 
 chevette.go(); 
 console.log( Car.isPrototypeOf( chevette ) );
 console.log( chevette ); But wait… why doesn’t our object have a wheelCount property or a go() method?
  110. 110. Prototypal Inheritance var Car = {
 wheelCount: 4,
 motor: null,
 go: function() {
 console.log( "Vrooooom!!!" )
 }
 };
 
 var chevette = Object.create( Car );
 chevette.motor = { cylinder: 4 };
 
 chevette.go(); 
 console.log( Car.isPrototypeOf( chevette ) );
 console.log( chevette ); There they are, in the objects __proto__ property
  111. 111. Prototypal Inheritance var Car = {
 wheelCount: 4,
 motor: null,
 go: function() {
 console.log( "Vrooooom!!!" )
 }
 };
 
 var chevette = Object.create( Car );
 chevette.motor = { cylinder: 4 };
 
 chevette.go(); 
 console.log( Car.isPrototypeOf( chevette ) );
 console.log( chevette ); But wait… the motor there is null. Can we access the wheelCount? How does JavaScript know which motor to use?
  112. 112. Prototypal Inheritance var Car = {
 wheelCount: 4,
 motor: null,
 go: function() {
 console.log( "Vrooooom!!!" )
 }
 };
 
 var chevette = Object.create( Car );
 chevette.motor = { cylinder: 4 };
 
 chevette.go(); 
 console.log( Car.isPrototypeOf( chevette ) );
 console.log( chevette );
  113. 113. Prototypal Inheritance When you request a property from an object: JavaScript checks for that property in the object If it does not exist, it checks the object’s prototype (__proto__) If it does not exist, it checks the object’s prototype’s prototype It continues until it reaches the top level object This is referred to as the Prototype chain If a property exists in more than one object in the prototype chain, the first one JS comes across is the one it will use
  114. 114. Prototypal Inheritance
  115. 115. Prototypal Inheritance var Car = {
 wheelCount: 4,
 motor: null,
 go: function() {
 console.log( "Vrooooom!!!" )
 }
 };
 
 var chevette = Object.create( Car );
 chevette.motor = { cylinder: 4 };
 
 chevette.go(); 
 console.log( Car.isPrototypeOf( chevette ) );
 console.log( chevette ); So if anything requests the motor property from our chevette
  116. 116. Prototypal Inheritance var Car = {
 wheelCount: 4,
 motor: null,
 go: function() {
 console.log( "Vrooooom!!!" )
 }
 };
 
 var chevette = Object.create( Car );
 chevette.motor = { cylinder: 4 };
 
 chevette.go(); 
 console.log( Car.isPrototypeOf( chevette ) );
 console.log( chevette ); It will find this one first in the chain
  117. 117. Prototypal Inheritance var Car = {
 wheelCount: 4,
 motor: null,
 go: function() {
 console.log( "Vrooooom!!!" )
 }
 };
 
 var chevette = Object.create( Car );
 chevette.motor = { cylinder: 4 };
 
 chevette.go(); 
 console.log( Car.isPrototypeOf( chevette ) );
 console.log( chevette ); Not this one
  118. 118. Prototypal Inheritance var Car = {
 wheelCount: 4,
 motor: null,
 go: function() {
 console.log( "Vrooooom!!!" )
 }
 };
 
 var chevette = Object.create( Car );
 chevette.motor = { cylinder: 4 };
 
 chevette.go(); 
 console.log( Car.isPrototypeOf( chevette ) );
 console.log( chevette ); If chevette didn’t have a motor property, it would find the one in the prototype
  119. 119. Prototypal Inheritance var Car = {
 wheelCount: 4,
 motor: null,
 go: function() {
 console.log( "Vrooooom!!!" )
 }
 };
 
 var chevette = Object.create( Car );
 chevette.motor = { cylinder: 4 };
 
 chevette.go(); 
 console.log( Car.isPrototypeOf( chevette ) );
 console.log( chevette );
  120. 120. Functions as First Class Objects In JavaScript, Functions are first-class objects They can have properties and methods of their own They can be passed as arguments They can be returned from functions They can be properties of other objects
  121. 121. Function Prototypes This is where things get confusing As we know, all objects have a prototype That prototype is store internally in __proto__ Function Objects also have a prototype property, which we’ll refer to as the ‘Function Prototype’ The function prototype is NOT the function’s prototype (confused yet?) The function object still has a __proto__ that contains its prototype
  122. 122. Function Prototypes This is where things get confusing As we know, all objects have a prototype That prototype is store internally in __proto__ Function Objects also have a prototype property, which we’ll refer to as the ‘Function Prototype’ The function prototype is NOT the function’s prototype (confused yet?) The function object still has a __proto__ that contains its prototype The function prototype is the object that will become the __proto__ property of any new object created from that function if that function is used as a constructor function
  123. 123. Function Prototypes This is where things get confusing As we know, all objects have a prototype That prototype is store internally in __proto__ Function Objects also have a prototype property, which we’ll refer to as the ‘Function Prototype’ The function prototype is NOT the function’s prototype (confused yet?) The function object still has a __proto__ that contains its prototype
  124. 124. Constructor Functions Are just regular functions When combined with the new keyword they behave differently When used with new the function becomes a factory and creates a brand new object this becomes bound to the new object being created this is then automatically return by the constructor
  125. 125. Constructor Functions function Car() {
 
 }
 
 Car.prototype.wheelCount = 4;
 Car.prototype.motor = null;
 
 Car.prototype.go = function() {
 console.log( 'Vroooom!!!!' );
 }
 
 var chevette = new Car();
 
 chevette.motor = { cylinder: 4 };
 
 chevette.go();
 console.log( chevette instanceof Car );
 console.log( chevette );
 !
  126. 126. Constructor Functions function Car() {
 
 }
 
 Car.prototype.wheelCount = 4;
 Car.prototype.motor = null;
 
 Car.prototype.go = function() {
 console.log( 'Vroooom!!!!' );
 }
 
 var chevette = new Car();
 
 chevette.motor = { cylinder: 4 };
 
 chevette.go();
 console.log( chevette instanceof Car );
 console.log( chevette );
 ! Just a regular function
  127. 127. Constructor Functions function Car() {
 
 }
 
 Car.prototype.wheelCount = 4;
 Car.prototype.motor = null;
 
 Car.prototype.go = function() {
 console.log( 'Vroooom!!!!' );
 }
 
 var chevette = new Car();
 
 chevette.motor = { cylinder: 4 };
 
 chevette.go();
 console.log( chevette instanceof Car );
 console.log( chevette );
 ! We then modify the function’s prototype to add inheritable properties and methods
  128. 128. Constructor Functions function Car() {
 
 }
 
 Car.prototype.wheelCount = 4;
 Car.prototype.motor = null;
 
 Car.prototype.go = function() {
 console.log( 'Vroooom!!!!' );
 }
 
 var chevette = new Car();
 
 chevette.motor = { cylinder: 4 };
 
 chevette.go();
 console.log( chevette instanceof Car );
 console.log( chevette );
 ! When we use the new keyword to create the object…
  129. 129. Constructor Functions function Car() {
 
 }
 
 Car.prototype.wheelCount = 4;
 Car.prototype.motor = null;
 
 Car.prototype.go = function() {
 console.log( 'Vroooom!!!!' );
 }
 
 var chevette = new Car();
 
 chevette.motor = { cylinder: 4 };
 
 chevette.go();
 console.log( chevette instanceof Car );
 console.log( chevette );
 ! Our regular function becomes a factory function. ! Returns this automatically
  130. 130. Constructor Functions function Car() {
 
 }
 
 Car.prototype.wheelCount = 4;
 Car.prototype.motor = null;
 
 Car.prototype.go = function() {
 console.log( 'Vroooom!!!!' );
 }
 
 var chevette = new Car();
 
 chevette.motor = { cylinder: 4 };
 
 chevette.go();
 console.log( chevette instanceof Car );
 console.log( chevette );
 ! Here is where the difference lies
  131. 131. Constructor Functions function Car() {
 
 }
 
 Car.prototype.wheelCount = 4;
 Car.prototype.motor = null;
 
 Car.prototype.go = function() {
 console.log( 'Vroooom!!!!' );
 }
 
 var chevette = new Car();
 
 chevette.motor = { cylinder: 4 };
 
 chevette.go();
 console.log( chevette instanceof Car );
 console.log( chevette );
 ! The new object does not have Car() as its prototype
  132. 132. Constructor Functions function Car() {
 
 }
 
 Car.prototype.wheelCount = 4;
 Car.prototype.motor = null;
 
 Car.prototype.go = function() {
 console.log( 'Vroooom!!!!' );
 }
 
 var chevette = new Car();
 
 chevette.motor = { cylinder: 4 };
 
 chevette.go();
 console.log( chevette instanceof Car );
 console.log( chevette );
 ! It has Car()’s prototype as its prototype
  133. 133. Constructor Functions function Car() {
 
 }
 
 Car.prototype.wheelCount = 4;
 Car.prototype.motor = null;
 
 Car.prototype.go = function() {
 console.log( 'Vroooom!!!!' );
 }
 
 var chevette = new Car();
 
 chevette.motor = { cylinder: 4 };
 
 chevette.go();
 console.log( chevette instanceof Car );
 console.log( chevette );
 ! So chevette.__proto__ == Car.prototype
  134. 134. Constructor Functions function Car() {
 
 }
 
 Car.prototype.wheelCount = 4;
 Car.prototype.motor = null;
 
 Car.prototype.go = function() {
 console.log( 'Vroooom!!!!' );
 }
 
 var chevette = new Car();
 
 chevette.motor = { cylinder: 4 };
 
 chevette.go();
 console.log( chevette instanceof Car );
 console.log( chevette );
 !
  135. 135. __proto__ and prototype Every object has a __proto__ __proto__ is a property __proto__ references the object that is being inherited from Only Function objects have a prototype property (in addition to __proto__) A Function’s prototype references the object that will become the __proto__ property of new objects created from this function if used as a constructor
  136. 136. Constructor Functions
  137. 137. Constructor Functions Behaves like our Object.create() object
  138. 138. Constructor Functions It has a __proto__ like our Object.create() object
  139. 139. Constructor Functions But now we have this constructor property
  140. 140. Constructor Functions And in there is where we find the prototype object from which we are inheriting
  141. 141. Constructor Functions So why all this prototype stuff?
  142. 142. Constructor Functions You said that the constructor automatically returns this, why not just use that?
  143. 143. Constructor Functions Let’s try it
  144. 144. Constructor Functions
  145. 145. this
  146. 146. this function Car() {
 this.wheelCount = 4;
 this.motor = null;
 
 this.go = function () {
 console.log( 'Vrooommmm!!!' );
 }
 
 }
 
 
 var chevette = new Car();
 
 chevette.motor = { cylinder: 4 };
 
 chevette.go();
 console.log( chevette instanceof Car );
 console.log( chevette );
  147. 147. this function Car() {
 this.wheelCount = 4;
 this.motor = null;
 
 this.go = function () {
 console.log( 'Vrooommmm!!!' );
 }
 
 }
 
 
 var chevette = new Car();
 
 chevette.motor = { cylinder: 4 };
 
 chevette.go();
 console.log( chevette instanceof Car );
 console.log( chevette ); Just a regular function
  148. 148. this function Car() {
 this.wheelCount = 4;
 this.motor = null;
 
 this.go = function () {
 console.log( 'Vrooommmm!!!' );
 }
 
 }
 
 
 var chevette = new Car();
 
 chevette.motor = { cylinder: 4 };
 
 chevette.go();
 console.log( chevette instanceof Car );
 console.log( chevette ); We then modify the function’s this object to add properties and methods
  149. 149. this function Car() {
 this.wheelCount = 4;
 this.motor = null;
 
 this.go = function () {
 console.log( 'Vrooommmm!!!' );
 }
 
 }
 
 
 var chevette = new Car();
 
 chevette.motor = { cylinder: 4 };
 
 chevette.go();
 console.log( chevette instanceof Car );
 console.log( chevette ); Remember, when we use new, this is bound to the new object
  150. 150. this function Car() {
 this.wheelCount = 4;
 this.motor = null;
 
 this.go = function () {
 console.log( 'Vrooommmm!!!' );
 }
 
 }
 
 
 var chevette = new Car();
 
 chevette.motor = { cylinder: 4 };
 
 chevette.go();
 console.log( chevette instanceof Car );
 console.log( chevette ); So hey! Look! Our new object will have the properties and methods, right?
  151. 151. this function Car() {
 this.wheelCount = 4;
 this.motor = null;
 
 this.go = function () {
 console.log( 'Vrooommmm!!!' );
 }
 
 }
 
 
 var chevette = new Car();
 
 chevette.motor = { cylinder: 4 };
 
 chevette.go();
 console.log( chevette instanceof Car );
 console.log( chevette ); The answer isYES. But they won’t be inherited
  152. 152. this function Car() {
 this.wheelCount = 4;
 this.motor = null;
 
 this.go = function () {
 console.log( 'Vrooommmm!!!' );
 }
 
 }
 
 
 var chevette = new Car();
 
 chevette.motor = { cylinder: 4 };
 
 chevette.go();
 console.log( chevette instanceof Car );
 console.log( chevette );
  153. 153. Prototypal Inheritance
  154. 154. Prototypal Inheritance Works similarly to our other examples
  155. 155. Prototypal Inheritance But, if we inspect the object we see…
  156. 156. Prototypal Inheritance The object has its own copy of the properties and methods
  157. 157. Prototypal Inheritance It still has Car as its __proto__
  158. 158. Prototypal Inheritance And it would still inherit the properties and methods of Car’s prototype
  159. 159. Prototypal Inheritance But, in this case, Car has no new properties and methods
  160. 160. Prototypal Inheritance What we’ve created are instance variables
  161. 161. Prototypal Inheritance
  162. 162. Why not use this for everything? When you use this new objects do not inherit those properties and methods They get their own copies If you change the this scope properties or methods in the prototype object the existing objects will not inherit the changes The best option is to combine prototypal inheritance with instance variables to get what we want
  163. 163. Prototypal Inheritance So let’s think about how Car should work We’ll create a new object that uses inherited and instance properties and methods to meet our needs Car spec: Each instance of Car should have its own name, wheelCount, color, and motor All instances of Car should have the same methods for go(), addFuel(), brake(), and about()
  164. 164. function Car(name, wheelCount, color, motorSize) {
 this.name = name;
 this.wheelCount = wheelCount;
 this.color = color;
 this.motor = { cylinders : motorSize };
 }
 
 Car.prototype.go = function () {
 console.log( 'Vrooommmm!!!' );
 };
 
 Car.prototype.addFuel = function () {
 console.log( 'Fuel Added' );
 };
 
 Car.prototype.brake = function () {
 console.log( 'Braking' );
 };
 
 Car.prototype.about = function() {
 return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color; }
 
 var cars = [
 new Car('Chevette', 4, 'Black', 4),
 new Car('F-150', 4, 'Red', 8),
 new Car('Ram 3500', 6, 'Green', 10)
 ];
 
 for (var car in cars) {
 
 console.log(cars[car].about());
 cars[car].addFuel();
 cars[car].go();
 cars[car].brake();
 }
  165. 165. function Car(name, wheelCount, color, motorSize) {
 this.name = name;
 this.wheelCount = wheelCount;
 this.color = color;
 this.motor = { cylinders : motorSize };
 }
 
 Car.prototype.go = function () {
 console.log( 'Vrooommmm!!!' );
 };
 
 Car.prototype.addFuel = function () {
 console.log( 'Fuel Added' );
 };
 
 Car.prototype.brake = function () {
 console.log( 'Braking' );
 };
 
 Car.prototype.about = function() {
 return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color; }
 
 var cars = [
 new Car('Chevette', 4, 'Black', 4),
 new Car('F-150', 4, 'Red', 8),
 new Car('Ram 3500', 6, 'Green', 10)
 ];
 
 for (var car in cars) {
 
 console.log(cars[car].about());
 cars[car].addFuel();
 cars[car].go();
 cars[car].brake();
 } Our Car constructor
  166. 166. function Car(name, wheelCount, color, motorSize) {
 this.name = name;
 this.wheelCount = wheelCount;
 this.color = color;
 this.motor = { cylinders : motorSize };
 }
 
 Car.prototype.go = function () {
 console.log( 'Vrooommmm!!!' );
 };
 
 Car.prototype.addFuel = function () {
 console.log( 'Fuel Added' );
 };
 
 Car.prototype.brake = function () {
 console.log( 'Braking' );
 };
 
 Car.prototype.about = function() {
 return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color; }
 
 var cars = [
 new Car('Chevette', 4, 'Black', 4),
 new Car('F-150', 4, 'Red', 8),
 new Car('Ram 3500', 6, 'Green', 10)
 ];
 
 for (var car in cars) {
 
 console.log(cars[car].about());
 cars[car].addFuel();
 cars[car].go();
 cars[car].brake();
 } Of course, our constructor is only a constructor if we remember to use new.
  167. 167. function Car(name, wheelCount, color, motorSize) {
 this.name = name;
 this.wheelCount = wheelCount;
 this.color = color;
 this.motor = { cylinders : motorSize };
 }
 
 Car.prototype.go = function () {
 console.log( 'Vrooommmm!!!' );
 };
 
 Car.prototype.addFuel = function () {
 console.log( 'Fuel Added' );
 };
 
 Car.prototype.brake = function () {
 console.log( 'Braking' );
 };
 
 Car.prototype.about = function() {
 return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color; }
 
 var cars = [
 new Car('Chevette', 4, 'Black', 4),
 new Car('F-150', 4, 'Red', 8),
 new Car('Ram 3500', 6, 'Green', 10)
 ];
 
 for (var car in cars) {
 
 console.log(cars[car].about());
 cars[car].addFuel();
 cars[car].go();
 cars[car].brake();
 } Add our methods to the Car constructor’s prototype
  168. 168. function Car(name, wheelCount, color, motorSize) {
 this.name = name;
 this.wheelCount = wheelCount;
 this.color = color;
 this.motor = { cylinders : motorSize };
 }
 
 Car.prototype.go = function () {
 console.log( 'Vrooommmm!!!' );
 };
 
 Car.prototype.addFuel = function () {
 console.log( 'Fuel Added' );
 };
 
 Car.prototype.brake = function () {
 console.log( 'Braking' );
 };
 
 Car.prototype.about = function() {
 return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color; }
 
 var cars = [
 new Car('Chevette', 4, 'Black', 4),
 new Car('F-150', 4, 'Red', 8),
 new Car('Ram 3500', 6, 'Green', 10)
 ];
 
 for (var car in cars) {
 
 console.log(cars[car].about());
 cars[car].addFuel();
 cars[car].go();
 cars[car].brake();
 } This method will be inherited from the prototype
  169. 169. function Car(name, wheelCount, color, motorSize) {
 this.name = name;
 this.wheelCount = wheelCount;
 this.color = color;
 this.motor = { cylinders : motorSize };
 }
 
 Car.prototype.go = function () {
 console.log( 'Vrooommmm!!!' );
 };
 
 Car.prototype.addFuel = function () {
 console.log( 'Fuel Added' );
 };
 
 Car.prototype.brake = function () {
 console.log( 'Braking' );
 };
 
 Car.prototype.about = function() {
 return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color; }
 
 var cars = [
 new Car('Chevette', 4, 'Black', 4),
 new Car('F-150', 4, 'Red', 8),
 new Car('Ram 3500', 6, 'Green', 10)
 ];
 
 for (var car in cars) {
 
 console.log(cars[car].about());
 cars[car].addFuel();
 cars[car].go();
 cars[car].brake();
 } But when it access the this scope it will be getting instance variables
  170. 170. function Car(name, wheelCount, color, motorSize) {
 this.name = name;
 this.wheelCount = wheelCount;
 this.color = color;
 this.motor = { cylinders : motorSize };
 }
 
 Car.prototype.go = function () {
 console.log( 'Vrooommmm!!!' );
 };
 
 Car.prototype.addFuel = function () {
 console.log( 'Fuel Added' );
 };
 
 Car.prototype.brake = function () {
 console.log( 'Braking' );
 };
 
 Car.prototype.about = function() {
 return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color; }
 
 var cars = [
 new Car('Chevette', 4, 'Black', 4),
 new Car('F-150', 4, 'Red', 8),
 new Car('Ram 3500', 6, 'Green', 10)
 ];
 
 for (var car in cars) {
 
 console.log(cars[car].about());
 cars[car].addFuel();
 cars[car].go();
 cars[car].brake();
 } We’ll create some new Cars
  171. 171. function Car(name, wheelCount, color, motorSize) {
 this.name = name;
 this.wheelCount = wheelCount;
 this.color = color;
 this.motor = { cylinders : motorSize };
 }
 
 Car.prototype.go = function () {
 console.log( 'Vrooommmm!!!' );
 };
 
 Car.prototype.addFuel = function () {
 console.log( 'Fuel Added' );
 };
 
 Car.prototype.brake = function () {
 console.log( 'Braking' );
 };
 
 Car.prototype.about = function() {
 return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color; }
 
 var cars = [
 new Car('Chevette', 4, 'Black', 4),
 new Car('F-150', 4, 'Red', 8),
 new Car('Ram 3500', 6, 'Green', 10)
 ];
 
 for (var car in cars) {
 
 console.log(cars[car].about());
 cars[car].addFuel();
 cars[car].go();
 cars[car].brake();
 } And then do some stuff with them
  172. 172. function Car(name, wheelCount, color, motorSize) {
 this.name = name;
 this.wheelCount = wheelCount;
 this.color = color;
 this.motor = { cylinders : motorSize };
 }
 
 Car.prototype.go = function () {
 console.log( 'Vrooommmm!!!' );
 };
 
 Car.prototype.addFuel = function () {
 console.log( 'Fuel Added' );
 };
 
 Car.prototype.brake = function () {
 console.log( 'Braking' );
 };
 
 Car.prototype.about = function() {
 return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color; }
 
 var cars = [
 new Car('Chevette', 4, 'Black', 4),
 new Car('F-150', 4, 'Red', 8),
 new Car('Ram 3500', 6, 'Green', 10)
 ];
 
 for (var car in cars) {
 
 console.log(cars[car].about());
 cars[car].addFuel();
 cars[car].go();
 cars[car].brake();
 }
  173. 173. Prototypal Inheritance
  174. 174. Prototypal Inheritance All of our inherited methods worked correctly
  175. 175. Prototypal Inheritance And our instance variables are unique to each instance
  176. 176. Prototypal Inheritance
  177. 177. Back to Object.create()
  178. 178. Back to Object.create() We look at prototypal inheritance with Object.create()
  179. 179. Back to Object.create() We look at prototypal inheritance with Object.create() But we didn’t look at instance variables
  180. 180. Back to Object.create() We look at prototypal inheritance with Object.create() But we didn’t look at instance variables Let’s see how our Car example might look with instance variables
  181. 181. var Car = {
 go : function () {
 console.log( 'Vrooommmm!!!' );
 },
 addFuel : function () {
 console.log( 'Fuel Added' );
 },
 brake : function () {
 console.log( 'Braking' );
 },
 about : function() {
 return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color;
 }
 }
 
 var cars = [
 Object.create(Car, {
 name : { value: 'Chevette' },
 wheelCount: { value: 4 },
 color: { value : 'Black', writable: true },
 motor: { value : { cylinders: 4 } }
 }),
 Object.create(Car, {
 name : { value: 'F-150' },
 wheelCount: { value: 4 },
 color: { value : 'Red', writable: true },
 motor: { value : { cylinders: 8 } }
 }),
 Object.create(Car, {
 name : { value: 'Ram 3500' },
 wheelCount: { value: 6 },
 color: { value : 'Green', writable: true },
 motor: { value : { cylinders: 10 } }
 })
 ];
 
 for (var car in cars) {
 console.log(cars[car].about());
 cars[car].addFuel(); cars[car].go(); cars[car].brake();
 }
  182. 182. var Car = {
 go : function () {
 console.log( 'Vrooommmm!!!' );
 },
 addFuel : function () {
 console.log( 'Fuel Added' );
 },
 brake : function () {
 console.log( 'Braking' );
 },
 about : function() {
 return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color;
 }
 }
 
 var cars = [
 Object.create(Car, {
 name : { value: 'Chevette' },
 wheelCount: { value: 4 },
 color: { value : 'Black', writable: true },
 motor: { value : { cylinders: 4 } }
 }),
 Object.create(Car, {
 name : { value: 'F-150' },
 wheelCount: { value: 4 },
 color: { value : 'Red', writable: true },
 motor: { value : { cylinders: 8 } }
 }),
 Object.create(Car, {
 name : { value: 'Ram 3500' },
 wheelCount: { value: 6 },
 color: { value : 'Green', writable: true },
 motor: { value : { cylinders: 10 } }
 })
 ];
 
 for (var car in cars) {
 console.log(cars[car].about());
 cars[car].addFuel(); cars[car].go(); cars[car].brake();
 } Simple object with methods to be inherited
  183. 183. var Car = {
 go : function () {
 console.log( 'Vrooommmm!!!' );
 },
 addFuel : function () {
 console.log( 'Fuel Added' );
 },
 brake : function () {
 console.log( 'Braking' );
 },
 about : function() {
 return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color;
 }
 }
 
 var cars = [
 Object.create(Car, {
 name : { value: 'Chevette' },
 wheelCount: { value: 4 },
 color: { value : 'Black', writable: true },
 motor: { value : { cylinders: 4 } }
 }),
 Object.create(Car, {
 name : { value: 'F-150' },
 wheelCount: { value: 4 },
 color: { value : 'Red', writable: true },
 motor: { value : { cylinders: 8 } }
 }),
 Object.create(Car, {
 name : { value: 'Ram 3500' },
 wheelCount: { value: 6 },
 color: { value : 'Green', writable: true },
 motor: { value : { cylinders: 10 } }
 })
 ];
 
 for (var car in cars) {
 console.log(cars[car].about());
 cars[car].addFuel(); cars[car].go(); cars[car].brake();
 } Use Object.create to create new objects that inherit from Car
  184. 184. var Car = {
 go : function () {
 console.log( 'Vrooommmm!!!' );
 },
 addFuel : function () {
 console.log( 'Fuel Added' );
 },
 brake : function () {
 console.log( 'Braking' );
 },
 about : function() {
 return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color;
 }
 }
 
 var cars = [
 Object.create(Car, {
 name : { value: 'Chevette' },
 wheelCount: { value: 4 },
 color: { value : 'Black', writable: true },
 motor: { value : { cylinders: 4 } }
 }),
 Object.create(Car, {
 name : { value: 'F-150' },
 wheelCount: { value: 4 },
 color: { value : 'Red', writable: true },
 motor: { value : { cylinders: 8 } }
 }),
 Object.create(Car, {
 name : { value: 'Ram 3500' },
 wheelCount: { value: 6 },
 color: { value : 'Green', writable: true },
 motor: { value : { cylinders: 10 } }
 })
 ];
 
 for (var car in cars) {
 console.log(cars[car].about());
 cars[car].addFuel(); cars[car].go(); cars[car].brake();
 } One way of getting instance variables
  185. 185. var Car = {
 go : function () {
 console.log( 'Vrooommmm!!!' );
 },
 addFuel : function () {
 console.log( 'Fuel Added' );
 },
 brake : function () {
 console.log( 'Braking' );
 },
 about : function() {
 return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color;
 }
 }
 
 var cars = [
 Object.create(Car, {
 name : { value: 'Chevette' },
 wheelCount: { value: 4 },
 color: { value : 'Black', writable: true },
 motor: { value : { cylinders: 4 } }
 }),
 Object.create(Car, {
 name : { value: 'F-150' },
 wheelCount: { value: 4 },
 color: { value : 'Red', writable: true },
 motor: { value : { cylinders: 8 } }
 }),
 Object.create(Car, {
 name : { value: 'Ram 3500' },
 wheelCount: { value: 6 },
 color: { value : 'Green', writable: true },
 motor: { value : { cylinders: 10 } }
 })
 ];
 
 for (var car in cars) {
 console.log(cars[car].about());
 cars[car].addFuel(); cars[car].go(); cars[car].brake();
 } Is with this crap
  186. 186. var Car = {
 go : function () {
 console.log( 'Vrooommmm!!!' );
 },
 addFuel : function () {
 console.log( 'Fuel Added' );
 },
 brake : function () {
 console.log( 'Braking' );
 },
 about : function() {
 return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color;
 }
 }
 
 var cars = [
 Object.create(Car, {
 name : { value: 'Chevette' },
 wheelCount: { value: 4 },
 color: { value : 'Black', writable: true },
 motor: { value : { cylinders: 4 } }
 }),
 Object.create(Car, {
 name : { value: 'F-150' },
 wheelCount: { value: 4 },
 color: { value : 'Red', writable: true },
 motor: { value : { cylinders: 8 } }
 }),
 Object.create(Car, {
 name : { value: 'Ram 3500' },
 wheelCount: { value: 6 },
 color: { value : 'Green', writable: true },
 motor: { value : { cylinders: 10 } }
 })
 ];
 
 for (var car in cars) {
 console.log(cars[car].about());
 cars[car].addFuel(); cars[car].go(); cars[car].brake();
 } These are called property descriptors
  187. 187. var Car = {
 go : function () {
 console.log( 'Vrooommmm!!!' );
 },
 addFuel : function () {
 console.log( 'Fuel Added' );
 },
 brake : function () {
 console.log( 'Braking' );
 },
 about : function() {
 return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color;
 }
 }
 
 var cars = [
 Object.create(Car, {
 name : { value: 'Chevette' },
 wheelCount: { value: 4 },
 color: { value : 'Black', writable: true },
 motor: { value : { cylinders: 4 } }
 }),
 Object.create(Car, {
 name : { value: 'F-150' },
 wheelCount: { value: 4 },
 color: { value : 'Red', writable: true },
 motor: { value : { cylinders: 8 } }
 }),
 Object.create(Car, {
 name : { value: 'Ram 3500' },
 wheelCount: { value: 6 },
 color: { value : 'Green', writable: true },
 motor: { value : { cylinders: 10 } }
 })
 ];
 
 for (var car in cars) {
 console.log(cars[car].about());
 cars[car].addFuel(); cars[car].go(); cars[car].brake();
 } If you don’t explicitly specify writable, enumerable, or configurable, they won’t be.
  188. 188. var Car = {
 go : function () {
 console.log( 'Vrooommmm!!!' );
 },
 addFuel : function () {
 console.log( 'Fuel Added' );
 },
 brake : function () {
 console.log( 'Braking' );
 },
 about : function() {
 return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color;
 }
 }
 
 var cars = [
 Object.create(Car, {
 name : { value: 'Chevette' },
 wheelCount: { value: 4 },
 color: { value : 'Black', writable: true },
 motor: { value : { cylinders: 4 } }
 }),
 Object.create(Car, {
 name : { value: 'F-150' },
 wheelCount: { value: 4 },
 color: { value : 'Red', writable: true },
 motor: { value : { cylinders: 8 } }
 }),
 Object.create(Car, {
 name : { value: 'Ram 3500' },
 wheelCount: { value: 6 },
 color: { value : 'Green', writable: true },
 motor: { value : { cylinders: 10 } }
 })
 ];
 
 for (var car in cars) {
 console.log(cars[car].about());
 cars[car].addFuel(); cars[car].go(); cars[car].brake();
 } So in this example, only color can be changed after the object is constructed
  189. 189. var Car = {
 go : function () {
 console.log( 'Vrooommmm!!!' );
 },
 addFuel : function () {
 console.log( 'Fuel Added' );
 },
 brake : function () {
 console.log( 'Braking' );
 },
 about : function() {
 return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color;
 }
 }
 
 var cars = [
 Object.create(Car, {
 name : { value: 'Chevette' },
 wheelCount: { value: 4 },
 color: { value : 'Black', writable: true },
 motor: { value : { cylinders: 4 } }
 }),
 Object.create(Car, {
 name : { value: 'F-150' },
 wheelCount: { value: 4 },
 color: { value : 'Red', writable: true },
 motor: { value : { cylinders: 8 } }
 }),
 Object.create(Car, {
 name : { value: 'Ram 3500' },
 wheelCount: { value: 6 },
 color: { value : 'Green', writable: true },
 motor: { value : { cylinders: 10 } }
 })
 ];
 
 for (var car in cars) {
 console.log(cars[car].about());
 cars[car].addFuel(); cars[car].go(); cars[car].brake();
 }
  190. 190. Back to Object.create()
  191. 191. Back to Object.create() Other than the properties being non- writable, non-configurable, and non- enumerable (except for color) this works the same as the other examples
  192. 192. Back to Object.create() But it sucks
  193. 193. var Car = {
 init : function (name, wheelCount, color, cylinders) {
 this.name = name;
 this.wheelCount = wheelCount;
 this.color = color;
 this.motor = { cylinders : cylinders };
 
 return this;
 },
 go : function () {
 console.log( 'Vrooommmm!!!' );
 },
 addFuel : function () {
 console.log( 'Fuel Added' );
 },
 brake : function () {
 console.log( 'Braking' );
 },
 about : function() {
 return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color;
 }
 }
 
 var cars = [
 Object.create(Car).init('Chevette', 4, 'Black', 4),
 Object.create(Car).init('F-150', 4, 'Red', 8),
 Object.create(Car).init('Ram 3500', 6, 'Green', 10)
 ];
 
 for (var car in cars) {
 console.log(cars[car].about());
 cars[car].addFuel(); cars[car].go(); cars[car].brake();
 }
  194. 194. var Car = {
 init : function (name, wheelCount, color, cylinders) {
 this.name = name;
 this.wheelCount = wheelCount;
 this.color = color;
 this.motor = { cylinders : cylinders };
 
 return this;
 },
 go : function () {
 console.log( 'Vrooommmm!!!' );
 },
 addFuel : function () {
 console.log( 'Fuel Added' );
 },
 brake : function () {
 console.log( 'Braking' );
 },
 about : function() {
 return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color;
 }
 }
 
 var cars = [
 Object.create(Car).init('Chevette', 4, 'Black', 4),
 Object.create(Car).init('F-150', 4, 'Red', 8),
 Object.create(Car).init('Ram 3500', 6, 'Green', 10)
 ];
 
 for (var car in cars) {
 console.log(cars[car].about());
 cars[car].addFuel(); cars[car].go(); cars[car].brake();
 } I think this is a bit easier to look at
  195. 195. var Car = {
 init : function (name, wheelCount, color, cylinders) {
 this.name = name;
 this.wheelCount = wheelCount;
 this.color = color;
 this.motor = { cylinders : cylinders };
 
 return this;
 },
 go : function () {
 console.log( 'Vrooommmm!!!' );
 },
 addFuel : function () {
 console.log( 'Fuel Added' );
 },
 brake : function () {
 console.log( 'Braking' );
 },
 about : function() {
 return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color;
 }
 }
 
 var cars = [
 Object.create(Car).init('Chevette', 4, 'Black', 4),
 Object.create(Car).init('F-150', 4, 'Red', 8),
 Object.create(Car).init('Ram 3500', 6, 'Green', 10)
 ];
 
 for (var car in cars) {
 console.log(cars[car].about());
 cars[car].addFuel(); cars[car].go(); cars[car].brake();
 } We create an init() method for all objects to inherit
  196. 196. var Car = {
 init : function (name, wheelCount, color, cylinders) {
 this.name = name;
 this.wheelCount = wheelCount;
 this.color = color;
 this.motor = { cylinders : cylinders };
 
 return this;
 },
 go : function () {
 console.log( 'Vrooommmm!!!' );
 },
 addFuel : function () {
 console.log( 'Fuel Added' );
 },
 brake : function () {
 console.log( 'Braking' );
 },
 about : function() {
 return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color;
 }
 }
 
 var cars = [
 Object.create(Car).init('Chevette', 4, 'Black', 4),
 Object.create(Car).init('F-150', 4, 'Red', 8),
 Object.create(Car).init('Ram 3500', 6, 'Green', 10)
 ];
 
 for (var car in cars) {
 console.log(cars[car].about());
 cars[car].addFuel(); cars[car].go(); cars[car].brake();
 } This works just like our constructor before
  197. 197. var Car = {
 init : function (name, wheelCount, color, cylinders) {
 this.name = name;
 this.wheelCount = wheelCount;
 this.color = color;
 this.motor = { cylinders : cylinders };
 
 return this;
 },
 go : function () {
 console.log( 'Vrooommmm!!!' );
 },
 addFuel : function () {
 console.log( 'Fuel Added' );
 },
 brake : function () {
 console.log( 'Braking' );
 },
 about : function() {
 return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color;
 }
 }
 
 var cars = [
 Object.create(Car).init('Chevette', 4, 'Black', 4),
 Object.create(Car).init('F-150', 4, 'Red', 8),
 Object.create(Car).init('Ram 3500', 6, 'Green', 10)
 ];
 
 for (var car in cars) {
 console.log(cars[car].about());
 cars[car].addFuel(); cars[car].go(); cars[car].brake();
 } But we must explicitly return this
  198. 198. var Car = {
 init : function (name, wheelCount, color, cylinders) {
 this.name = name;
 this.wheelCount = wheelCount;
 this.color = color;
 this.motor = { cylinders : cylinders };
 
 return this;
 },
 go : function () {
 console.log( 'Vrooommmm!!!' );
 },
 addFuel : function () {
 console.log( 'Fuel Added' );
 },
 brake : function () {
 console.log( 'Braking' );
 },
 about : function() {
 return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color;
 }
 }
 
 var cars = [
 Object.create(Car).init('Chevette', 4, 'Black', 4),
 Object.create(Car).init('F-150', 4, 'Red', 8),
 Object.create(Car).init('Ram 3500', 6, 'Green', 10)
 ];
 
 for (var car in cars) {
 console.log(cars[car].about());
 cars[car].addFuel(); cars[car].go(); cars[car].brake();
 } Soooooo much better than those property descriptors
  199. 199. var Car = {
 init : function (name, wheelCount, color, cylinders) {
 this.name = name;
 this.wheelCount = wheelCount;
 this.color = color;
 this.motor = { cylinders : cylinders };
 
 return this;
 },
 go : function () {
 console.log( 'Vrooommmm!!!' );
 },
 addFuel : function () {
 console.log( 'Fuel Added' );
 },
 brake : function () {
 console.log( 'Braking' );
 },
 about : function() {
 return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color;
 }
 }
 
 var cars = [
 Object.create(Car).init('Chevette', 4, 'Black', 4),
 Object.create(Car).init('F-150', 4, 'Red', 8),
 Object.create(Car).init('Ram 3500', 6, 'Green', 10)
 ];
 
 for (var car in cars) {
 console.log(cars[car].about());
 cars[car].addFuel(); cars[car].go(); cars[car].brake();
 }
  200. 200. Back to Object.create()
  201. 201. Back to Object.create() Still working
  202. 202. But wait… there’s more
  203. 203. But wait… there’s more We can use the same functions we were using before for constructors with Object.create()
  204. 204. But wait… there’s more We can use the same functions we were using before for constructors with Object.create() The new object will still inherit from the function prototype
  205. 205. But wait… there’s more We can use the same functions we were using before for constructors with Object.create() The new object will still inherit from the function prototype But the constructor function never actually fires, so we can’t use it from constructing the object with instance variables
  206. 206. function Car(name, wheelCount, color, motorSize) {
 this.name = name;
 this.wheelCount = wheelCount;
 this.color = color;
 this.motor = { cylinders : motorSize };
 }
 
 Car.prototype.go = function () {
 console.log( 'Vrooommmm!!!' );
 };
 
 Car.prototype.addFuel = function () {
 console.log( 'Fuel Added' );
 };
 
 Car.prototype.brake = function () {
 console.log( 'Braking' );
 };
 
 Car.prototype.about = function() {
 return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color;
 }
 
 var cars = [
 Object.create(Car.prototype),
 Object.create(Car.prototype),
 Object.create(Car.prototype)
 ];
 
 console.log(cars);
  207. 207. function Car(name, wheelCount, color, motorSize) {
 this.name = name;
 this.wheelCount = wheelCount;
 this.color = color;
 this.motor = { cylinders : motorSize };
 }
 
 Car.prototype.go = function () {
 console.log( 'Vrooommmm!!!' );
 };
 
 Car.prototype.addFuel = function () {
 console.log( 'Fuel Added' );
 };
 
 Car.prototype.brake = function () {
 console.log( 'Braking' );
 };
 
 Car.prototype.about = function() {
 return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color;
 }
 
 var cars = [
 Object.create(Car.prototype),
 Object.create(Car.prototype),
 Object.create(Car.prototype)
 ];
 
 console.log(cars); We can use a function
  208. 208. function Car(name, wheelCount, color, motorSize) {
 this.name = name;
 this.wheelCount = wheelCount;
 this.color = color;
 this.motor = { cylinders : motorSize };
 }
 
 Car.prototype.go = function () {
 console.log( 'Vrooommmm!!!' );
 };
 
 Car.prototype.addFuel = function () {
 console.log( 'Fuel Added' );
 };
 
 Car.prototype.brake = function () {
 console.log( 'Braking' );
 };
 
 Car.prototype.about = function() {
 return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color;
 }
 
 var cars = [
 Object.create(Car.prototype),
 Object.create(Car.prototype),
 Object.create(Car.prototype)
 ];
 
 console.log(cars); And modify its prototype
  209. 209. function Car(name, wheelCount, color, motorSize) {
 this.name = name;
 this.wheelCount = wheelCount;
 this.color = color;
 this.motor = { cylinders : motorSize };
 }
 
 Car.prototype.go = function () {
 console.log( 'Vrooommmm!!!' );
 };
 
 Car.prototype.addFuel = function () {
 console.log( 'Fuel Added' );
 };
 
 Car.prototype.brake = function () {
 console.log( 'Braking' );
 };
 
 Car.prototype.about = function() {
 return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color;
 }
 
 var cars = [
 Object.create(Car.prototype),
 Object.create(Car.prototype),
 Object.create(Car.prototype)
 ];
 
 console.log(cars); Then use Object.create()
  210. 210. function Car(name, wheelCount, color, motorSize) {
 this.name = name;
 this.wheelCount = wheelCount;
 this.color = color;
 this.motor = { cylinders : motorSize };
 }
 
 Car.prototype.go = function () {
 console.log( 'Vrooommmm!!!' );
 };
 
 Car.prototype.addFuel = function () {
 console.log( 'Fuel Added' );
 };
 
 Car.prototype.brake = function () {
 console.log( 'Braking' );
 };
 
 Car.prototype.about = function() {
 return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color;
 }
 
 var cars = [
 Object.create(Car.prototype),
 Object.create(Car.prototype),
 Object.create(Car.prototype)
 ];
 
 console.log(cars); Note we are passing in Car’s prototype, not Car
  211. 211. function Car(name, wheelCount, color, motorSize) {
 this.name = name;
 this.wheelCount = wheelCount;
 this.color = color;
 this.motor = { cylinders : motorSize };
 }
 
 Car.prototype.go = function () {
 console.log( 'Vrooommmm!!!' );
 };
 
 Car.prototype.addFuel = function () {
 console.log( 'Fuel Added' );
 };
 
 Car.prototype.brake = function () {
 console.log( 'Braking' );
 };
 
 Car.prototype.about = function() {
 return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color;
 }
 
 var cars = [
 Object.create(Car.prototype),
 Object.create(Car.prototype),
 Object.create(Car.prototype)
 ];
 
 console.log(cars); Car’s prototype is where the methods we want to inherit are
  212. 212. function Car(name, wheelCount, color, motorSize) {
 this.name = name;
 this.wheelCount = wheelCount;
 this.color = color;
 this.motor = { cylinders : motorSize };
 }
 
 Car.prototype.go = function () {
 console.log( 'Vrooommmm!!!' );
 };
 
 Car.prototype.addFuel = function () {
 console.log( 'Fuel Added' );
 };
 
 Car.prototype.brake = function () {
 console.log( 'Braking' );
 };
 
 Car.prototype.about = function() {
 return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color;
 }
 
 var cars = [
 Object.create(Car.prototype),
 Object.create(Car.prototype),
 Object.create(Car.prototype)
 ];
 
 console.log(cars); Unfortunately, the constructor never runs, these variables are not added as instance variables
  213. 213. function Car(name, wheelCount, color, motorSize) {
 this.name = name;
 this.wheelCount = wheelCount;
 this.color = color;
 this.motor = { cylinders : motorSize };
 }
 
 Car.prototype.go = function () {
 console.log( 'Vrooommmm!!!' );
 };
 
 Car.prototype.addFuel = function () {
 console.log( 'Fuel Added' );
 };
 
 Car.prototype.brake = function () {
 console.log( 'Braking' );
 };
 
 Car.prototype.about = function() {
 return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color;
 }
 
 var cars = [
 Object.create(Car.prototype),
 Object.create(Car.prototype),
 Object.create(Car.prototype)
 ];
 
 console.log(cars);
  214. 214. Back to Object.create()
  215. 215. Back to Object.create() Still inheriting the prototype’s methods
  216. 216. Back to Object.create() But no properties
  217. 217. Back to Object.create()
  218. 218. function Car() {}
 
 Car.prototype.init = function (name, wheelCount, color, motorSize) {
 this.name = name;
 this.wheelCount = wheelCount;
 this.color = color;
 this.motor = { cylinders : motorSize };
 
 return this;
 }
 
 Car.prototype.go = function () {
 console.log( 'Vrooommmm!!!' );
 };
 
 Car.prototype.addFuel = function () {
 console.log( 'Fuel Added' );
 };
 
 Car.prototype.brake = function () {
 console.log( 'Braking' );
 };
 
 Car.prototype.about = function() {
 return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color;
 }
 
 var cars = [
 Object.create(Car.prototype).init('Chevette', 4, 'Black', 4),
 Object.create(Car.prototype).init('F-150', 4, 'Red', 8),
 Object.create(Car.prototype).init('Ram 3500', 6, 'Green', 10)
 ];
 
 for (var car in cars) {
 console.log(cars[car].about());
 cars[car].addFuel(); cars[car].go(); cars[car].brake();
 }
  219. 219. function Car() {}
 
 Car.prototype.init = function (name, wheelCount, color, motorSize) {
 this.name = name;
 this.wheelCount = wheelCount;
 this.color = color;
 this.motor = { cylinders : motorSize };
 
 return this;
 }
 
 Car.prototype.go = function () {
 console.log( 'Vrooommmm!!!' );
 };
 
 Car.prototype.addFuel = function () {
 console.log( 'Fuel Added' );
 };
 
 Car.prototype.brake = function () {
 console.log( 'Braking' );
 };
 
 Car.prototype.about = function() {
 return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color;
 }
 
 var cars = [
 Object.create(Car.prototype).init('Chevette', 4, 'Black', 4),
 Object.create(Car.prototype).init('F-150', 4, 'Red', 8),
 Object.create(Car.prototype).init('Ram 3500', 6, 'Green', 10)
 ];
 
 for (var car in cars) {
 console.log(cars[car].about());
 cars[car].addFuel(); cars[car].go(); cars[car].brake();
 } We could use property descriptors again… but who’d want to?
  220. 220. function Car() {}
 
 Car.prototype.init = function (name, wheelCount, color, motorSize) {
 this.name = name;
 this.wheelCount = wheelCount;
 this.color = color;
 this.motor = { cylinders : motorSize };
 
 return this;
 }
 
 Car.prototype.go = function () {
 console.log( 'Vrooommmm!!!' );
 };
 
 Car.prototype.addFuel = function () {
 console.log( 'Fuel Added' );
 };
 
 Car.prototype.brake = function () {
 console.log( 'Braking' );
 };
 
 Car.prototype.about = function() {
 return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color;
 }
 
 var cars = [
 Object.create(Car.prototype).init('Chevette', 4, 'Black', 4),
 Object.create(Car.prototype).init('F-150', 4, 'Red', 8),
 Object.create(Car.prototype).init('Ram 3500', 6, 'Green', 10)
 ];
 
 for (var car in cars) {
 console.log(cars[car].about());
 cars[car].addFuel(); cars[car].go(); cars[car].brake();
 } We can use an init() method again
  221. 221. function Car() {}
 
 Car.prototype.init = function (name, wheelCount, color, motorSize) {
 this.name = name;
 this.wheelCount = wheelCount;
 this.color = color;
 this.motor = { cylinders : motorSize };
 
 return this;
 }
 
 Car.prototype.go = function () {
 console.log( 'Vrooommmm!!!' );
 };
 
 Car.prototype.addFuel = function () {
 console.log( 'Fuel Added' );
 };
 
 Car.prototype.brake = function () {
 console.log( 'Braking' );
 };
 
 Car.prototype.about = function() {
 return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color;
 }
 
 var cars = [
 Object.create(Car.prototype).init('Chevette', 4, 'Black', 4),
 Object.create(Car.prototype).init('F-150', 4, 'Red', 8),
 Object.create(Car.prototype).init('Ram 3500', 6, 'Green', 10)
 ];
 
 for (var car in cars) {
 console.log(cars[car].about());
 cars[car].addFuel(); cars[car].go(); cars[car].brake();
 } Then call it like we did before after passing the function prototype into Object.create()
  222. 222. function Car() {}
 
 Car.prototype.init = function (name, wheelCount, color, motorSize) {
 this.name = name;
 this.wheelCount = wheelCount;
 this.color = color;
 this.motor = { cylinders : motorSize };
 
 return this;
 }
 
 Car.prototype.go = function () {
 console.log( 'Vrooommmm!!!' );
 };
 
 Car.prototype.addFuel = function () {
 console.log( 'Fuel Added' );
 };
 
 Car.prototype.brake = function () {
 console.log( 'Braking' );
 };
 
 Car.prototype.about = function() {
 return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color;
 }
 
 var cars = [
 Object.create(Car.prototype).init('Chevette', 4, 'Black', 4),
 Object.create(Car.prototype).init('F-150', 4, 'Red', 8),
 Object.create(Car.prototype).init('Ram 3500', 6, 'Green', 10)
 ];
 
 for (var car in cars) {
 console.log(cars[car].about());
 cars[car].addFuel(); cars[car].go(); cars[car].brake();
 }
  223. 223. So??? So which one should I use?!?!?! I bet you were hoping for an answer A lot of experts will tell you to use Object.create(). But which way should you use Object.create()? Some will tell you that new is evil, others will tell you the truth. new is not evil Pick one way and stick with it My preference is for Object.create(SimpleObject).init() or new ConstructorFunction()
  224. 224. var Car = {
 init : function (name, wheelCount, color, cylinders) {
 this.name = name;
 this.wheelCount = wheelCount;
 this.color = color;
 this.motor = { cylinders : cylinders };
 
 return this;
 },
 go : function () {
 console.log( 'Vrooommmm!!!' );
 },
 addFuel : function () {
 console.log( 'Fuel Added' );
 },
 brake : function () {
 console.log( 'Braking' );
 },
 about : function() {
 return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color;
 }
 }
 
 var cars = [
 Object.create(Car).init('Chevette', 4, 'Black', 4),
 Object.create(Car).init('F-150', 4, 'Red', 8),
 Object.create(Car).init('Ram 3500', 6, 'Green', 10)
 ];
 
 for (var car in cars) {
 console.log(cars[car].about());
 cars[car].addFuel(); cars[car].go(); cars[car].brake();
 } Object.create(SimpleObject).init()
  225. 225. function Car(name, wheelCount, color, motorSize) {
 this.name = name;
 this.wheelCount = wheelCount;
 this.color = color;
 this.motor = { cylinders : motorSize };
 }
 
 Car.prototype.go = function () {
 console.log( 'Vrooommmm!!!' );
 };
 
 Car.prototype.addFuel = function () {
 console.log( 'Fuel Added' );
 };
 
 Car.prototype.brake = function () {
 console.log( 'Braking' );
 };
 
 Car.prototype.about = function() {
 return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color; }
 
 var cars = [
 new Car('Chevette', 4, 'Black', 4),
 new Car('F-150', 4, 'Red', 8),
 new Car('Ram 3500', 6, 'Green', 10)
 ];
 
 for (var car in cars) {
 
 console.log(cars[car].about());
 cars[car].addFuel();
 cars[car].go();
 cars[car].brake();
 } new ConstructorFunction()
  226. 226. Closure Example function makeAdder(howMuch) {
 return function (addTo) {
 return addTo + howMuch;
 }
 }
 
 //Make a 5 adder
 var add5 = makeAdder(5);
 
 //Make a 10 adder
 var add10 = makeAdder(10);
 
 console.log( add5(10) ); // 15
 console.log( add10(20) ); //30
  227. 227. Closure Example function makeAdder(howMuch) {
 return function (addTo) {
 return addTo + howMuch;
 }
 }
 
 //Make a 5 adder
 var add5 = makeAdder(5);
 
 //Make a 10 adder
 var add10 = makeAdder(10);
 
 console.log( add5(10) ); // 15
 console.log( add10(20) ); //30 The makeAdder() function will create and a return a new function
  228. 228. Closure Example function makeAdder(howMuch) {
 return function (addTo) {
 return addTo + howMuch;
 }
 }
 
 //Make a 5 adder
 var add5 = makeAdder(5);
 
 //Make a 10 adder
 var add10 = makeAdder(10);
 
 console.log( add5(10) ); // 15
 console.log( add10(20) ); //30 Normally we would expect that when this function finishes running…
  229. 229. Closure Example function makeAdder(howMuch) {
 return function (addTo) {
 return addTo + howMuch;
 }
 }
 
 //Make a 5 adder
 var add5 = makeAdder(5);
 
 //Make a 10 adder
 var add10 = makeAdder(10);
 
 console.log( add5(10) ); // 15
 console.log( add10(20) ); //30 … that its scope would no longer exist, including the howMuch argument
  230. 230. Closure Example function makeAdder(howMuch) {
 return function (addTo) {
 return addTo + howMuch;
 }
 }
 
 //Make a 5 adder
 var add5 = makeAdder(5);
 
 //Make a 10 adder
 var add10 = makeAdder(10);
 
 console.log( add5(10) ); // 15
 console.log( add10(20) ); //30 When we call makeAdder()
  231. 231. Closure Example function makeAdder(howMuch) {
 return function (addTo) {
 return addTo + howMuch;
 }
 }
 
 //Make a 5 adder
 var add5 = makeAdder(5);
 
 //Make a 10 adder
 var add10 = makeAdder(10);
 
 console.log( add5(10) ); // 15
 console.log( add10(20) ); //30 howMuch is equal to 5
  232. 232. Closure Example function makeAdder(howMuch) {
 return function (addTo) {
 return addTo + howMuch;
 }
 }
 
 //Make a 5 adder
 var add5 = makeAdder(5);
 
 //Make a 10 adder
 var add10 = makeAdder(10);
 
 console.log( add5(10) ); // 15
 console.log( add10(20) ); //30 The function then returns another function (but does not execute it)
  233. 233. Closure Example function makeAdder(howMuch) {
 return function (addTo) {
 return addTo + howMuch;
 }
 }
 
 //Make a 5 adder
 var add5 = makeAdder(5);
 
 //Make a 10 adder
 var add10 = makeAdder(10);
 
 console.log( add5(10) ); // 15
 console.log( add10(20) ); //30 So how then, does howMuch still exist when …
  234. 234. Closure Example function makeAdder(howMuch) {
 return function (addTo) {
 return addTo + howMuch;
 }
 }
 
 //Make a 5 adder
 var add5 = makeAdder(5);
 
 //Make a 10 adder
 var add10 = makeAdder(10);
 
 console.log( add5(10) ); // 15
 console.log( add10(20) ); //30 We call the new function
  235. 235. Closure Example function makeAdder(howMuch) {
 return function (addTo) {
 return addTo + howMuch;
 }
 }
 
 //Make a 5 adder
 var add5 = makeAdder(5);
 
 //Make a 10 adder
 var add10 = makeAdder(10);
 
 console.log( add5(10) ); // 15
 console.log( add10(20) ); //30 Because the returned function is a closure
  236. 236. Closure Example function makeAdder(howMuch) {
 return function (addTo) {
 return addTo + howMuch;
 }
 }
 
 //Make a 5 adder
 var add5 = makeAdder(5);
 
 //Make a 10 adder
 var add10 = makeAdder(10);
 
 console.log( add5(10) ); // 15
 console.log( add10(20) ); //30 Not only does it have access to its own scope, where addTo exists
  237. 237. Closure Example function makeAdder(howMuch) {
 return function (addTo) {
 return addTo + howMuch;
 }
 }
 
 //Make a 5 adder
 var add5 = makeAdder(5);
 
 //Make a 10 adder
 var add10 = makeAdder(10);
 
 console.log( add5(10) ); // 15
 console.log( add10(20) ); //30 It has access to the scope that it was in when it was created
  238. 238. Closure Example function makeAdder(howMuch) {
 return function (addTo) {
 return addTo + howMuch;
 }
 }
 
 //Make a 5 adder
 var add5 = makeAdder(5);
 
 //Make a 10 adder
 var add10 = makeAdder(10);
 
 console.log( add5(10) ); // 15
 console.log( add10(20) ); //30 Where howMuch exists and is equal to 5
  239. 239. Closure Example function makeAdder(howMuch) {
 return function (addTo) {
 return addTo + howMuch;
 }
 }
 
 //Make a 5 adder
 var add5 = makeAdder(5);
 
 //Make a 10 adder
 var add10 = makeAdder(10);
 
 console.log( add5(10) ); // 15
 console.log( add10(20) ); //30
  240. 240. Closures In basic terms, a Closure is a function that maintains the context in which is was created in addition to its own I am not going to delve deeply into closures, Adam will do that later
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×