Tag Archives: udemy

arguments object (js)

June 27, 2018javascriptudemyadmin

The Arguments Object

In the Create Phase of the Execution context, we know that variables environment, this, and reference to the outer scope is set up. Additionally, it also sets up the arguments object.

Contains the list of all values that we pass into the function we’re calling.

Arguments just another name for parameters we pass into our functions. Parameters and arguments are interchangeable.

In JS, we are given keyword arguments.
During the creation phase, memory space is set for the function definition. Then it has memory space set for the parameters, and assigned them undefined, just like any other variable names.

JavaScript functions have a built-in object called the arguments object.

The argument object contains an array of the arguments used when the function was called (invoked).

This way you can simply use a function to find (for instance) the highest value in a list of numbers:

// we can insert arguments

x = findMax(1, 123, 500, 115, 44, 88);

// notice no parameter id declared

function findMax() {

var i;

var max = -Infinity;

for (i = 0; i < arguments.length; i++) {

if (arguments[i] > max) {

max = arguments[i];

}

return max;

}

..or create a sum function

// input arguments

x = sumAll(1, 123, 500, 115, 44, 88);

// notice no parameter names

function sumAll() {

var i;

var sum = 0;

for (i = 0; i < arguments.length; i++) {

sum += arguments[i];

}

return sum;

}

Arguments are Passed by Value

The parameters, in a function call, are the function’s arguments.

JavaScript arguments are passed by value: The function only gets to know the values, not the argument’s locations.

If a function changes an argument’s value, it does not change the parameter’s original value.

For primitive values changes to arguments are not visible (reflected) outside the function. We copy them in and manipulate them inside the function. However, the outside values stay the same.

function changeIt(first, second) {

arguments[0] = 20;

second = 88;

}

let a = 10;

let b = 66;

changeIt(a, b);

console.log(`a: ${a}, b : ${b}`);

output:
a: 10, b: 66

However, for objects, it’s different. Objects are being pointed to by references. And when you pass in an object, the parameter name will reference that object. Hence you’ll have the outside var reference obj1 reference your literal object, as well as the parameter ‘objRef’ reference that object.

In // 1, we take the reference that’s pointing to the literal object and access its property ‘name’ and then change it. This will work because we’re directly manipulating a reference that’s pointing to the object.

let obj1 = {

name: "testing 1 2 3"

}

function changeIt2(objRef) {

//objRef.name = "success"; // 1 obj1's object will change

// 2 nothing happens to obj1's object

objRef = {

address: "123 Main Street"

}

changeIt2(obj1);

console.log(obj1);

However, in // 2, you see that we take this parameter reference and point it to ANOTHER literal object with the property address.

When we log the results, you’ll see that obj1 did not change. This is because we didn’t do anything to the original object that obj1 is pointing to. Rather, we just took the parameter reference ‘objRef’ and pointed it somewhere else.

Prototype and Inheritance in JS (non-class)

February 6, 2018javascriptprototype inheritance, udemyadmin

https://www.digitalocean.com/community/tutorials/understanding-prototypes-and-inheritance-in-javascript

note:

It is important to note that x.__proto__ is a legacy feature and should not be used in production code, and it is not present in every modern browser. However, we can use it throughout this article for demonstrative purposes.

Use Object.getPrototypeOf(x) instead.

Creating objects through Constructor Functions

Because each character will share many characteristics, such as having a name, and a level, we use a constructor functions to create templates for those common traits of each hero.

Every hero has a name, and a certain level of experience

// Initialize a constructor function for a new Hero

function Hero(name, level) {

this.name = name;

this.level = level;

}

We have created a constructor function called Hero with two parameters: name and level. Since every character will have a name and a level, it makes sense for each new character to have these properties.

The this keyword will refer to the new instance that is created, so setting this.name to the name parameter ensures the new object will have a name property set.

The hierarchy looks like this:

The Prototype Object

Whenever we create a constructor function, JS will automatically create a literal object that acts as the prototype object.

That literal object’s sole purpose is to contain functions and properties for all instantiations of your constructor functions.

Note that this object (like all objects of JS) derives from Object, and will have its __proto__ pointing to Object’s Prototype Object.

This literal object acts as the prototype object for Hero. It will also have a constructor property pointing back to your constructor function. Thus, making this prototype object the same type as your constructor function.

In our case, we create a constructor function “Hero” with its properties. JS gives us an empty literal object (Let’s call it Prototype Object) in order to act as a single object that keeps properties and functions that are shared among all instances of Hero.

Note that our Hero Prototype Object derives from Object and thus, has its __proto__ referencing Object‘s Prototype Object.

It then creates and assigns a “constructor” property from the Hero Prototype Object to your Hero constructor function. This makes the prototype object type Hero. Finally, it assigns the “prototype” property from your Hero constructor property onto the “Hero Prototype Object”.

Creating an Instance

1	let hero1 = new Hero('Grom', 1);

What this means is that any instantiations of Hero will have its OWN properties and functions from the Constructor function.
hero1 is an instance we just created. It has its own properties of name and level, as indicated from the constructor function Hero.

hence if we were to make three hero objects, hero1, hero2, and hero3, they all have their own unique properties of name, and level.
i.e

hero1 is “Grom”, level 1
hero2 is “Haomarush”, level 2
hero3 is “Thrall”, level 8

In addition, they ALL share the “Hero Prototype object”.

So if the “Hero Prototype object” has a property “nickname” initiated to “Orc”, then they would all have nickname = “Orc”.

Same goes for any functions and other properties that “Hero Prototype Object” may have.

Let’s check on how this works. First we display the prototype of our object hero1. You can do it in 2 ways:

1 2	console.log(Object.getPrototypeOf(hero1)); console.log(hero1.__proto__);

output:

Hero {}
Hero {}

Now repeat with hero2, hero3. You’ll see that their __proto__ all are Hero{}. They all point to the same Prototype Object Hero{}

Adding to the Prototype

Let’s add a property nickname to the prototoype, and see what it looks like:

1 2	Hero.prototype.nickname = "orc"; console.log(hero1.__proto__);

Now our “Hero Prototype Object” will look like this:

Hero { nickname: ‘orc’ }

This means that when we try to read a property from a Hero object, say from hero1,
– it will try to look for “nickname” in the hero1 instance first.
– When it does not find it, it will go up the hierarchy (i.e hero1.__proto__) into the prototype object, which it will then find.
– If it still does not find it, it will keep going up the prototype chain, hero1.__proto__, hero1.__proto__.__proto__….etc

console.log(hero1.nickname); // orc

console.log(hero2.nickname); // orc

console.log(hero3.nickname); // orc

If you were to change nickname:

1	Hero.prototype.nickname = "Superman";

console.log(hero1.nickname); // Superman

console.log(hero2.nickname); // Superman

console.log(hero3.nickname); // Superman

You cannot change it from the instantiation

Our hierarchy is like this.

We have our Hero instance, with its own properties of name and level. It has its __proto__ pointing to an object, with property “type”, which is
initialized to orc. It has its constructor back to Hero, and __proto__ references pointing to Object’s Prototype Object.

Simply put, don’t confuse yourself when you try to change a property or function of a prototype object.

You cannot change it through an instantiation like this:

1 2	let hero = new Hero("Jubei", 8); hero.type = "orc";

Erroneously, many people may think that it will see if nickname exist in the instantiation, it does not. Then it goes up to the prototype and finds it there. Then it just assigns the new string.

When it comes to setting values, JS will only let you access at the prototype level. It only let’s you read at the object level if the property does not exist at the object level.

If you do decide to assign at the object level, essentially Javascript will interpret it as you wanting to add a property called “type” to your instance, and then initialize it.

1 2	let hero = new Hero("blah", 4); hero.type = "human";

Thus, in the hierarchy, you’ll get two property called “type”. One is at the instance level. One is at the prototype level.

If you want to set the prototype object to a new value, you must do so through Object.prototype.YourPropertyName.

1	Hero.prototype.type = "human";

Different character classes of heroes

However, each hero has different abilities. Some wield different weapons. All have vastly different skills and abilities.

It wouldn’t make sense to put all the abilities for every class into the Hero constructor, because different classes will have different abilities.

We want to create new constructor functions, but we also want them to be connected to the original Hero.

Let’s take a look at how we can accomplish this with prototype inheritance and constructors.

The Warrior

We use call in order to chain constructors. Essentially, call replaces a function’s this reference to a passed in object.
Hence, we replace Hero’s constructor function’s this reference to point to Warrior’s this. Then, any kind of initialization done in Hero will take place in Warrior. In other words:

We first create a constructor function called Warrior. This identifies Warrior.
We then pass the “this” reference to Hero via function call. Using Warrior’s “this” reference, we start to construct it like a Hero. Essentially, we are doing chain constructors for Warrior. We want to first initialize Warrior to be a Hero with Hero’s properties and functions.
Then, we come back to Warrior, and initialize Warrior’s properties.

note: The JavaScript call() Method

The call() method is a predefined JavaScript function method.

It can be used to invoke (call) a function with an owner object as the first argument (parameter).
In our example, instance person calls fullName. However, fullName’s this is myObject.

1	x = person.fullName.call(myObject);

With call(), you can use a method belonging to another object.

This example calls the fullName function of person, but is using it on myObject:

var person = {

firstName:"John",

lastName: "Doe",

fullName: function() {

return this.firstName + " " + this.lastName;

}

var myObject = {

firstName:"Mary",

lastName: "Doe",

}

x = person.fullName.call(myObject);

document.getElementById("demo").innerHTML = x;

…back to our example…

In the extended object Warrior, we initialize Warrior with Hero’s properties via javascript’s call function.

// Initialize Warrior constructor

function Warrior(name, level, weapon) {

// Chain constructor with call

Hero.call(this, name, level);

// Add a new property

this.weapon = weapon;

}

So in the same way, we call Hero’s constructor, but with Warrior’s this.
We pass Warrior’s this into Hero’ constructor

// the 'this' used here is Warrior's

// Thus, warrior adds property name, and level, initialized from the parameters.

function Hero(name, level) {

this.name = name;

this.level = level;

}

Warrior total properties = Warrior own properties + Hero properties;

We’ll add the attack() method to Warrior because its what they do. We want all instances of Warrior to be able to attack, as they should.

Warrior.prototype.attack = function () {

return `${this.name} attacks with the ${this.weapon}.`;

}

1 2	let warriorHaomaru = new Warrior("Haomarush", 2,"Blade"); warriorHaomaru.attack(); // Haomarush attacks with the Blade.

Linking up the Prototype

So the warrior class has properties of the Hero class. But what about the Hero’s functionalities? Let’s say the Hero’s prototype has functionality to be able to run, jump, and swim.

The warrior, being a hero, should automatically have those functionalities as well.

From javascript standpoint, when you create Warriors, it will be setup in a similar fashion like Hero. You’ll get a Warrior Prototype Object. Your Warrior’s prototype reference will point to Warrior Prototype Object. Warrior Prototype Object will add and point “constructor” back to your Warrior.

Since Hero’s prototype properties and methods are not automatically linked when you use call() to chain constructors, our Warrior will use Object.create() to link the prototypes.

Now, given Hero’s hierarchy is like so:

In order to inherit Hero prototype
1) Warrior will first disregard its own prototype object
2) Use Object.create to clone its own Hero Prototype Object.
3) re-point Warrior’s prototype to this clone.

Note:
The Object.create() method creates a new object, using an existing object to provide the newly created object’s __proto__

Object.create

// 1) We want to create a custom Warrior Prototype Object.

// We create an empty object, with its __proto__

// pointing to Hero.prototype

// this means that literal object w uses Hero.prototype's

// functionalities. it does not have any properties

var w = Object.create(Hero.prototype);

w is simply a standalone object that has its __proto__ pointing to the Hero prototype object. It will be used as Warrior prototype object. But for now, let’s analyze this object:

const objA = {

eye: ['brown', 'almond'],

nationality: 'Chinese',

display: function() {

console.log(' -- function display --');

}

let tmp = Object.create(objA); // object instance

console.log(tmp);

console.log(tmp.prototype); // undefined

console.log(tmp.prototype.constructor); // error

Thus, as you can see, it does not have prototype property. It simply accesses all the functionalities of objA.

repoint Warrior’s prototype to our Hero Prototype Object clone

1	Warrior.prototype = w;

We simply want the type of all instances of Warrior to say Warrior {}.
It’s for clarity purposes.

1	w.constructor = Warrior;

We add an “attack function” to our custom Warrior Prototype Object.

w.attack = function () {

console.log(`${this.name} attacks with the ${this.weapon}.`);

}

1 2	let warriorHaomaru = new Warrior("Haomarush", 2,"Blade"); warriorHaomaru.attack(); // Haomarush attacks with the Blade.

We have class names’s prototype point to a literal object to denote that all
all instances of this class’s __proto__ should point to this literal object
for prototype functionalities. Since Warrior’s prototype now points to Hero Prototype object, this means all instances
of warriors have Hero Prototype Object’s prototype functionalities.

… given Hero Prototype functionality has jump, run, and swim, then our warrior will also be able to use these functionalities.

warriorHaomaru.jump();

warriorHaomaru.run();

warriorHaomaru.swim();

Now, all instances of Warrior can not only attack, but also jump, run, swim as well!

Double Prototype Level

Let’s create someone who has two types together.

First, we construct a Healer.

// Initialize Warrior constructor

function Healer(name, level, weapon, someSpell) {

// Chain constructor with call

Hero.call(this, name, level);

// Add a new property

this.spell = someSpell;

}

var h = Object.create(Hero.prototype);

Healer.prototype = h;

h.constructor = Healer;

okay, so have Healer created. It derives from Hero in properties and prototype functionality.

double class power: Mage

Now let’s create a special class called Mage, where we can heal like a Healer, but also have our own Mage special ability.

console.log("========= MAGE ============ ");

function Mage(name, level, weapon, spell, special) {

Healer.call(this, name, level, weapon, spell); // construct Healer first, with Mage's this

this.special = special;

}

const x = Object.create(Healer.prototype);

Mage.prototype = x;

x.constructor = Mage;

let mage1 = new Mage("Thrall", 99, "Ragnorak", "Life 3", "summons Bahamut");

mage1.greet();

mage1.heal();

console.log(mage1.special);

Structure

You’ll see that an instance of the Mage will inherit properties and functions of its deriving object Warrior, and its deriving object Hero, and Object.

Furthermore, it will be able to use the whole hierarchy of its own prototype, which includes Warrior, Hero, and Object.

console.log("\n\n --- Structure --- \n");

console.log(mage1);

console.log(mage1.__proto__);

console.log(mage1.__proto__.__proto__);

console.log(mage1.__proto__.__proto__.__proto__);

console.log(mage1.__proto__.__proto__.__proto__.__proto__);

— Structure —

Mage {
name: ‘Thrall’,
level: 99,
weapon: ‘Ragnorak’,
special: ‘summons Bahamut’ }

Mage { constructor: [Function: Mage] }

Healer { constructor: [Function: Healer], heal: [Function] }

Hero { greet: [Function] }

{}

source code example

function createPrototypeObjAndConnect(FuncConstructor, prototype, callbackForPrototypeFuncCreation) {

var prototypeObj = Object.create(prototype);

FuncConstructor.prototype = prototypeObj;

prototypeObj.constructor = FuncConstructor;

callbackForPrototypeFuncCreation(FuncConstructor);

}

function User(newName, newPassword) {

this.name = newName;

this.password = newPassword;

}

User.prototype.print = function() {

console.log('print');

}

function Admin(newName, newPassword) {

User.call(this, newName, newPassword);

this.roomsCanAdmin = ["Public", "Private"];

}

createPrototypeObjAndConnect(Admin, User.prototype, function(Func) {

Func.prototype.addRoom = function(roomName) {

console.log('Admin ' + this.name + ' added room ' + roomName);

}

Func.prototype.removeRoom = function(roomName) {

console.log('Admin ' + this.name + ' removed room ' + roomName);

}

Func.prototype.kickOutUser = function(userName) {

console.log('Admin ' + this.name + ' has kicked out ' + userName);

}

});

var w = new Admin("ricky-admin", "abcd1234");

w.print();

function SuperAdmin(newName, newPassword) {

Admin.call(this, newName, newPassword);

}

createPrototypeObjAndConnect(SuperAdmin, Admin.prototype, function(Func) {

Func.prototype.addUser = function(userName) {

console.log('SuperAdmin ' + this.name + ' has kicked out ' + userName);

}

Func.prototype.removeUser = function(userName) {

console.log('SuperAdmin ' + this.name + ' has kicked out ' + userName);

}

});

var s = new SuperAdmin("rtsao", "sudosudo");

s.addUser('jennifer');

s.addRoom("lounge");

s.print();

Accessing via Prototype Chain

Immediately-Invoked Function Expression (iife)

October 12, 2017javascriptiife, udemyadmin

https://www.kirupa.com/html5/immediately_invoked_function_expressions_iife.htm

function variation 1 – declare named function, then execute it

function areYouLucky() {

var foo = Math.round(Math.random() * 100);

if (foo > 50) {

alert("You are lucky!");

} else {

alert("You are not lucky!");

}

// calling this function!

areYouLucky();

function variation 2 – anonymous function expression, execute it via reference

// anonymous function #1

var isLucky = function() {

var foo = Math.round(Math.random() * 100);

if (foo > 50) {

return "You are lucky!";

} else {

return "You are not lucky!";

}

};

var me = isLucky();

function variation 3 – Immediately Invoked Function Expression

say you have a function you want to execute like so:

function() {

var shout = "I AM ALIVE!!!";

alert(shout);

}

…usually, you’ll have a variable name reference the function, then execute it. Or you give the function a name, and use that name for the execution as shown above.

You can also invoke a function like so:

var greeting = function() {

return "hello";

}();

console.log(greeting); // hello

What we just did is create a reference and point it to the return value of a function expression. Remember, a function without a name is a function expression. A function with a name is a function statement.

If you want to write function() as an expression itself, without a variable reference pointing to it, the compiler will give you an error.

// syntax error

function() {

}

It’s expecting it to be a function statement. It’s looking for a function name. In order to remedy this, you can use parentheses. Also, when you use parenthesis, JS assumes that the inside is an expression. We can create a function expression and immediately invoke it like so:

(function() {

var shout = "I AM ALIVE!!!";

console.log(shout);

})();

The general structure for creating an IIFE that takes arguments is as follows:

// arg1 and arg2 somewhere in outer scope

(function(a, b) {

// a = ...

// b = ...

})(arg1, arg2);

You can invoke it outside or inside the parentheses, doesn’t matter.

example:

(function(first, last) {

console.log("My name is " + last + ", " + first + " " + last + ".");

}("James", "Bond"));

// same

(function(first, last) {

console.log("My name is " + last + ", " + first + " " + last + ".");

})("James", "Bond");

What happens in memory

When the IIFE is immediately invoked, we have an execution context pushed onto the execution stack.
In its Creation Phase, it will put variables into memory.

(function(name) {

var greeting = 'Hello';

}('John'));

In our example, greeting variable is put into memory and assigned undefined. By definition, any variable created within a certain execution context belongs there. In other words, the variable is local to the function which is was defined. Furthermore, a let variable is local to the block which it was defined.

Sa you want to manipulate the global variable. Simple, just pass it in.

(function(global, name) {

global.greeting = 'Hello';

}(window, 'John'));

This pattern makes it intentional for you to affect the global object. And not by accidental.

Review Scope real quick…

…you learned that JavaScript doesn’t have the concept of block scoping. It only has lexical scope.

This means that variables declared inside a block such as an if statement or loop will actually be accessible to the entire enclosing function:

function scopeDemo() {

if (true) {

var foo = "I know what you did last summer!";

}

alert(foo); // totally exists!

}

scopeDemo();

As you can see in this example, the foo variable, despite being stuck inside the if statement, is accessible outside of it because your if is not a scopable block. This ability to have your “supposedly inner” variables promoted and accessible to the entire enclosing function is known as variable hoisting!

When do use an IIFE?

what is so different about an IIFE compared to a function you declare and call immediately like you have always done?

The main difference is that an IIFE leaves behind no evidence of its existence after it has run.

This is largely because IIFEs are anonymous functions that are nameless. This means you can’t track them by examining variables. Because the code you put inside an IIFE is actually inside a function, any variables you declare are local to that function.

IIFE provides you with a very simple way of running code fully inside its own bubble and then disappearing without a trace.

By taking advantage of the local scope IIFE’s create, you can selectively choose what to expose or what not to expose.

Here, we declare an object. However, property secretCode is exposed for public usage.

var weakSauce = {

secretCode: "Zorb!",

checkCode: function (code) {

if (this.secretCode == code) {

alert("You are awesome!");

} else {

alert("Try again!");

}

};

var bar = Object.create(weakSauce);

console.log(bar.secretCode) // exposed!

By taking advantage of the local scope IIFE’s create, you can selectively choose what to expose or what not to expose

var awesomeSauce = (function () {

var secretCode = "Zorb!";

function privateCheckCode(code) {

if (secretCode == code) {

alert("You are awesome!");

} else {

alert("Try again!");

}

// the public method we want to return

return {

checkCode: privateCheckCode

};

})();

var foo = Object.create(awesomeSauce);

alert(foo.secretCode); // undefined

This time around, you won’t be able to access secretCode. The reason is that the contents of secretCode are buried inside the IIFE and not accessible publicly.

Usage: To Avoid Polluting the Global Scope

Let’s say you’re implementing your own objects. You have different function interfaces like so…

rtScript.js

var gCounter = 0;

function toString() { ...}

function add() { ... }

The problem is, when you import your file into projects, what if other implementations have the same names as well? It would lead to name collisions.

So in order to solve this problem, we want to hide these function interfaces and just expose a global variable name like so:

var rtScript = (function() {

var gCounter = 0;

return {

toString: function {...}

add: function{...}

}

})();

What this does is that it hides all the function interfaces and global variables used in your implementation.
All that’s exposed is the rtScript variable.

Hence others can use your implementation like so:

otherCode.js

(function(rt) {

rt.toString();

rt.add();

}(rtScript));

Usage: capture surrounding state via Closure, and parameter passing

Given we have a function quotatious

It takes an array, and pushes a inner function onto it. Thus, it manipulates the references in quotes and points them to their own respective inner function. Even though the scope have not been created just yet, each inner function references its surround environment. Thus, they all reference the i from the loop and the array names.

function quotatious(names) {

var quotes = [];

for (var i = 0; i < names.length; i++) {

var theFunction = function() {

return "My name is " + names[i] + "!";

}

quotes.push(theFunction);

}

return quotes;

}

In the outer scope, when we declare people to be an array with let’s say 4 elements, and pass it into quotatious, we will see that quotes array inside quotatious will have its references pointing to inner functions.

Each inner function will reference i as well as name.

Then quotes array will be returned by quotations function.
We then execute its element, which is a reference to the inner function.

// our list of names

var people = ["Tony Stark", "John Rambo", "James Bond", "Rick James"];

// getting an array of functions

var peopleFunctions = quotatious(people);

// get the first function

peopleFunctions[0]();

When we execute the 0th element of peopleFunction, it will execute the inner function. The inner function will create scope, and reference i. But at this point, i is 5 because it shared among all the inner functions in quotatious.

Thus, names[5] returns undefined.

Solution

The trick is to create a shell that holds the correct i for each inner function.
Hence we create an IIFE first. the IIFE will take in the i as a parameter, and copy the value into the parameter index.

names is captured by closure, where as i is captured by parameter passing.

for (var i = 0; i < names.length; i++) {

(function(index) { // IIFE

})(i);

}

This is the key here. As different i gets passed into the IIFE, the i is kept as that value via the parameter index. Hence any inner function in the IIFE will always be able to reference index as that value.

for (var i = 0; i < names.length; i++) {

(function(index) { // IIFE

var temp = function() { // inner function

return names[index]; // green dotted line

}

quotes.push(temp); // black line

})(i);

}

return quotes;

So when we use quotes to execute the inner function, the inner function will be able to get its own referenced i.

1	quotes[0](); // purple arrow

Closures (js)

January 5, 2016javascriptudemyadmin

http://javascriptissexy.com/understand-javascript-closures-with-ease/
https://medium.freecodecamp.org/whats-a-javascript-closure-in-plain-english-please-6a1fc1d2ff1c
http://ryanmorr.com/understanding-scope-and-context-in-javascript/

Udemy Example

When I invoke function greet, I’m gunna get a reference to another function, in which I can invoke again.

function greet(whattosay) {

return function(name) {

console.log(whattosay + ' ' + name);

}

greet('Hi') // returns a function

greet('Hi')('Tony') // invoke the returned function

var sayHi = greet('Hi'); // 1)

sayHi('Tony'); // 2)

at 1), greet was invoked, so it was pushed then popped from the execution stack.

at 2) when you invoked the returned function object, it still can access variable ‘whattosay’. How is this possible?

First we have the Global Execution Context.
When greet function was invoked, greet() Execution Context was pushed.

The variable that was passed to greet() is sitting in that Execution Context.

We all know that every execution context have memory space reserved for variables and what not. When the execution context gets popped, the memory space presumably also leaves. The JS engine would eventually garbage collect it. However, in our case, in the creation phase of greet()’s context, the variables ‘whattosay’ and the return anon function were stored in memory. The return anon function is a function definiton, and as with any function defintiions, it gets stored in memory.

We invoked sayHi, which is the anon function in memory.
sayHi() Execution Context is pushed onto the context stack.
It runs through the function and are able to use variable ‘whattosay’ because it’s referencing the object that’s existing in memory.

This phenomenon is called ‘the Execution Context has closed in on its outer variables’. It has captured them.

Closure in Memory

Let’s explain the same code, but we’re going to use async capabilities, instead of a returned function.
We start with the same code.

function greetings() {

var name = 'bob';

setTimeout( function() {

console.log(`Hi there ${name}`);

}, 2000);

}

In the very beginning, we set up the basic. We invoke the global context.

Global (Creation Phase) – which sets up its this, outer references, greetings definition, all in memory

Global (Execution Phase) – During the execution phase, go line by line and execute each line. We first see the function definition greetings. Its already in memory so we skip it. We step and then invoke greetings function. When invoking the function it creates a context, which we push onto the context stack.

Greetings Context (Creation Phase) – we put variable name into memory and assign it to undefined. We set the ‘this’ reference to the global object, and reference to the outer environment

Greetings Context (Execution Phase) – Now comes the line by line execution. Variable name points to immutable literal string ‘ricky’.
Then it invokes setTimeout function. setTimeout function is an async function so it gets put in memory.

Since the setTimeout function was invoked, it needs to go through creation phase and execution phase.
In the creation phase, it sets up the ‘this’ and outer reference for setTimeout. Then it sees the function definition in the first parameter. It puts that anonymous function in memory.

1) For setTimeout’s execution phase, it starts on the “2 second wait”. Once it starts, we continue on to the next step, which is the end of greetings function.
2) The end of greetings function signals that we pop greetings context from the execution stack.

1) Finally, the two seconds are up.
2) setTimeout executes its callback. It invokes the anon function. Thus, it gets pushed onto the context stack.
3) setTmeout completes and thus, gets removed from memory.

then,

1) The invocation of the anon function goes through its Creation Phase. There’s literally nothing there except a log. However, we see that in the log, we are referencing name variable from the memory.
2) We print the log statement
3) the anon function now finishes is popped off the context stack.

In the end, only the global context is left. In memroy, since nothing else is using name, nor anon function in this context, they will be garbage collected.

What is a closure?

Closure is the act of capturing an object and separating it from its original scope, making it available to the capturing function forever.

First off, you create a closure whenever you define a function, NOT when you execute it.

In other words, a closure is formed when a nested function is defined inside of another function, allowing access to the outer functions variables.

For example,

returning the inner function allows you to maintain references to the local variables, arguments, and inner function declarations of its outer function

This encapsulation allows us to:
1) hide and preserve the execution context from outside scopes
2) while exposing a public interface and thus is subject to further manipulation.

var helloStr = 'world';

var sayHello = function(name) {

console.log('-- anonoymous function --');

console.log('name parameter is: ' + name);

return function() {

console.log('-- returned function --');

console.log('Hello ' + name + '!');

}

// 1) executes sayHello function.

// 2) 'world' is passed in.

// 3) returns inner function. Not executed yet. No scope created.

var sayGreeting = sayHello(helloStr);

sayGreeting(); // 'Hello world'

// 1) inner function executes. scope created

// 2) accesses local parameter name 'world'.

setTimeout example

First Try…

We’re accessing the i from the outside scope’s for loop via parent scope.

// step 1

for (var i = 0; i < 10; i++) {

// 1) runs through the i

console.log(i); // 0, 1, 2, 3, 4, 5, 6, 7, 8, 9

// at this point, i is 10

// 2) after 1 second, then it would execute the callback function

setTimeout(function() {

// 3) displays the checkmark and 10s

console.log(i); // 10

}, 1000);

}

The result is:
0 1 2 3 4 5 6 7 8 9

1 second later…
10 10 10 10 10 10

not really what we want…

2nd try

We wrap an IIFE around it so that we save the index variable. Now, for each setTimeout invocation at each index i,
we have successfully saved i into parameter index. Each Execution Context is pushed on with the index variable.

Then the setTimeout inside will be able to access the index variable.

(function(index) {

setTimeout(function() {

console.log('callback: ' + index);

}, 3000); // i's value is received via scoping when the callback fun executes.

})(i)

for loop: 0
for loop: 1
for loop: 2
for loop: 3
…
…

AFTER 3 SECONDs…

callback: 0
callback: 1
callback: 2

One of the most popular types of closures is what is widely known as the module pattern; it allows you to emulate public, private, and privileged members:

Module Pattern

The module acts as if it were a singleton, executed as soon as the compiler interprets it, hence the opening and closing parenthesis at the end of the function. The only available members outside of the execution context of the closure are your public methods and properties located in the return object (Module.publicMethod for example). However, all private properties and methods will live throughout the life of the application as the execution context is preserved, meaning variables are subject to further interaction via the public methods.

// Module is a singleton

// due to self invoked anonymous function returned as singleton,

// it is executed as soon as the compiler interprets it.

var Module = (function() {

var privateProperty = 'foo';

function privateMethod(args) {

// do something

console.log("privateMethod");

console.log("private property is: " + privateProperty)

}

function anotherPrivateFunc() {

console.log('helooooooo');

}

return {

publicProperty: '',

refToAPrivateFunc: anotherPrivateFunc,

publicMethod: function(args) {

// do something

console.log("publicMethod");

privilegedMethod: function(args) {

console.log("privilegedMethod");

return privateMethod(args);

}

};

})();

Module.publicMethod(null)

Module.privilegedMethod(null)

Module.refToAPrivateFunc(); // heloooooo

or executed in the context of the window object:

(function(window) {

var foo, bar;

function private() {

// do something

console.log("private function! :D")

}

window.Module2 = {

public: function() {

// do something

console.log("public function!")

}

};

})(this);

this.Module2.public();

The closure has three scope chains

– it has access to its own scope (local variables)
– it has access to the outer function’s variables (including parameters)
– and it has access to the global variables.

When you put a function in a variable like this, you are assigning the variable func, a reference to the function sayHello, NOT A COPY.
Via definition of a reference, anything you do on the func reference will be done on the original function.

function sayHello() {

console.log("hello");

};

var func = sayHello;

For example, when we add a property to reference func:

1	func.answer = 42;

our function sayHello will also have it because func is a reference to sayHello.

1	console.log(sayHello.answer); // 42

Lexical Scoping

Describes how a parser resolves variable names when functions are nested. The word “lexical” refers to the fact that lexical scoping uses the location where a variable is declared within the source code to determine where that variable is available.

Nested functions have access to variables declared in their outer scope.

function init() {

var name = 'Mozilla'; // name is a local variable created by init

function displayName() { // displayName() is the inner function, a closure

alert(name); // use variable declared in the parent function

}

displayName();

}

init();

init() creates a local variable called name and a function called displayName().
The displayName() function is an inner function that is defined inside init() and is only available within the body of the init() function.

The displayName() function has no local variables of its own.

However, because inner functions have access to the variables of outer functions, displayName() can access the variable name declared in the parent function, init().

However, the same local variables in displayName() will be used if they exist.

Run the code and notice that the alert() statement within the displayName() function successfully displays the value of the name variable, which is declared in its parent function.

Scope is created when you execute a function

When you call a function like init() you create a scope during the execution of that function. Then that scope goes away.

When you call the function a second time, you create a new different scope during the second execution. Then this second goes away as well.

function printA() {

console.log(answer);

var answer = 1;

};

printA(); // this creates a scope which gets discarded right after

printA(); // this creates a new different scope which also gets discarded right after;

These two scopes that were created in the example above are different. The variable answer here is not shared between them at all.

Every function scope has a lifetime. They get created and they get discarded right away. The only exception to this fact is the global scope, which does not go away as long as the application is running.

// functions form closures.

// a closure is the combination of a function and

// the lexical environment within which that

// function was declared.

function makeFunc() {

var name = 'Mozilla';

function displayName() {

console.log(name);

}

return displayName; // return the function so outer context can use it

}

// in this case, myFunc is a reference to the instance

// of the function displayName.

// instance of displayName maintains a reference to its

// lexical environment, within which the variable name exists.

var myFunc = makeFunc(); // Instance of displayName is returned

// for this reason, when myFunc is invoked, the variable 'name' remains available for

// use and mozilla is passed to log.

myFunc();

Closures are created when you DEFINE a function

When you define a function, a closure gets created.

Unlike scopes, closures are created when you DEFINE a function, NOT when you execute it. Closures don’t go away after you execute that function.

local scope, parent scope, and global scope are all referenced by the closure. NOT COPIED:

var G = 'G';

// Define a function and create a closure

function functionA() {

var A = 'A'

// Define a function

// create a closure that can access scope of

// functionB, scope of functionA(), plus global scope.

// closures gives us a reference to var B, A, and G.

function functionB() {

var B = 'B'

console.log(A, B, G);

}

// execute functionB, create scope

functionB(); // prints A, B, G

// functionB closure does not get discarded

A = 42;

// execute functionB, create scope

functionB(); // prints 42, B, G

}

// execute functionA, create scope

functionA();

Don’t confuse closures with scopes

// scope: global

var a = 1;

void function one() {

// scope: one

// closure: [one, global]

var b = 2;

void function two() {

// scope: two

// closure: [two, one, global]

var c = 3;

void function three() {

// scope: three

// closure: [three, two, one, global]

var d = 4;

console.log(a + b + c + d); // prints 10

}();

In the simple example above, we have three functions and they all get defined and immediately invoked, so they all create scopes and closures.

The scope of function one() is its body. Its closure gives us access to both its scope and the global scope.

The scope of function two() is its body. Its closure gives us access to its scope plus the scope of function one()plus the global scope

And similarly, the closure of function three() gives us access to all scopes in the example. This is why we were able to access all variables in function three().

Another Example

// global scope

var v = 1;

// 1) f1 defined. closure here, plus global scope. the v accesses global v = 1.

var f1 = function () {

// 6) scope is within this body.

// 7) from closure, v will access 1.

console.log(v); // 8) prints 1

}

// 2) f2 defined. closure here, plus global scope. However, var v is local v = 2.

var f2 = function() {

// 4) scope is within its body

var v = 2;

f1(); // 5) create scope

};

f2(); // 3) create scope

If not global variable v…

var f1 = function () {

console.log(v);

}

var f2 = function() {

var v = 2;

f1(); // ReferenceError: v is not defined

};

f2();

Since closures have REFERENCE to variables in scope, they have read/write access

This is why we can change global variables everywhere. All closures give us both read/write access to all global variables.

Closures can share scopes

function parent() {

// parent - closure: [parent, global]

// scope - parent

let a = 10;

function double() {

// double - closure: [double, parent, global]

// scope - double

// uses parent's a

a = a+a;

console.log(a);

};

function square() {

// square - closure: [square, parent, global]

// scope - square

// uses parent's a

a = a*a;

console.log(a);

}

// returns literal object with var reference double and square to functions double and square

return { double, square }

}

// executes parent()

let { double, square } = parent();

double(); // prints 20

square(); // prints 400

double(); // prints 800

double and square both share scope parent. This means their closure references variables from parent. Specifically, variable a.
Hence, when we call double the first time, double references var a from parent. It does 10 + 10 = 20. Parent’s var a is now 20.

Then, square references var a from parent. a is now 20 from the call to double due to reference usage. square does 20 * 20 = 400.
Parent’s a is now 400.

We execute double again. double’s closure references a from parent which is 400. It does 400 + 400 = 800. Parent’s var a is now 800.

Another example

// 1) global var a initialized to 1

let a = 1;

// func1 closure - [func1, global]

const func1 = function() {

console.log(a); // 4) a was set to log 3 since execution is top to bottom

a = 2 // 5) references global a. set to 2.

}

a = 3; // 2) global var a set to 3

// func2 closure - [func2, global]

const func2 = function() {

// 7) references global a, which was set to 2.

console.log(a); // 8) logs 2

}

// 3) execute func1, scope is func1 body

func1();

// 6) execute func2, scope is func2 body

func2();

output:
3
2

Things can get weird though – People Example

Here we pass an array of objects into a function. We are expecting this function to update property id of our objects.

var gang = [

{name: 'tsao', id: undefined},

{name: 'scar', id: undefined},

{name: 'qian qian', id: undefined}

];

var updatedGang = creator(gang);

We use a loop to assign index to the array element’s id property.
The anonymous function created here is stored in heap memory, as well as the var i.

function creator(people) {

var i;

for (i=0; i < people.length; i++) {

people[i]["id"] = function() {

return (i+100);

}

return people;

} // creator

After we run this, the result id are all the same, 103.

console.log(updatedGang[0].id()) // 103

console.log(updatedGang[1].id()) // 103

console.log(updatedGang[2].id()) // 103

Since var i, and all three anon functions are stored in heap memory, when we try to access the ids later in the future, the var i is already 103.
Thus, when you invoke those functions in the future, they will be access i that is 103.

Solution

We need to make sure we store the correct i somehow, and not an i that has already ran through its course to the end.

We do this through two ways:

Invoking the function and storing the value right away
IIFE
“let”

Invoke the function, and storing the value

var gang = [

{name: 'tsao', id: undefined},

{name: 'scar', id: undefined},

{name: 'qian qian', id: undefined}

];

function creator(people) {

var i;

for (i=0; i < people.length; i++) {

// declare function with parameter j

people[i]["id"] = function(j) {

console.log('Calculating for index: ' + j);

return (j+100);

}(i); // then call it right away and pass in i.

// the result is then stored in people[i]["id"] right away

}

return people;

} // creator

var updatedGang = creator(gang);

// Calculating for index: 0

// Calculating for index: 1

// Calculating for index: 2

This is about invoking the function right away, and then assigning the value to people[i][“id”].
As you can see when you call creator(gang), the logs ‘Calculating for index:…’ gets called right away.
Because at each index, the anonymous function gets invoked and then the value is stored.

Thus, whenever you access updatedGang[0].id, you’re simply retrieving the stored value

console.log(updatedGang[0].id) // 100

console.log(updatedGang[1].id) // 101

console.log(updatedGang[2].id) // 102

In this solution, we’re invoking the function RIGHT AWAY, thus creating the scope, and the i is accessed. It will return 0. 0 + 100 = 100. It will then assign the integer 100 to updatedGang[0].id
When i becomes 1, the function executes RIGHT AWAY, creating the scope, and the i is accessed as 1. 1 + 100 = 101. 101 gets assigned to updatedGang[1].id.

… and so on.

using IIFE

function creator(people) {

var i;

for (i = 0; i < people.length; i++) {

(function(index) {

people[i]["id"] = function() {

console.log('-- result --');

console.log(index + 100);

}

})(i);

}

var updatedGang = creator(gang);

updatedGang[0].id() // -- result -- 100

updatedGang[1].id() // -- result -- 101

updatedGang[2].id() // -- result -- 102

As you can see, we now have reference to a function that you can execute in the future. In addition, we also have our own variable ‘index’ to store the i.

The IIFE for index 0 puts the i in its own memory, and stores it.
The IIFE for index 1 puts the i in its own memory, and stores it
…etc

Thus, we can invoke on the fly and still get the correct answer. It is vastly different than our previous example, which is invoke right away, and storing the result.

In other words:

Using IIFE, we first create a function expression and invoke it immediately with a parameter. This creates a context that gets pushed onto our stack context.

Creation Phase:
– We point this reference to global object.
– We create outer reference to scope
– puts parameter ‘index’ in memory
– put anon function j in memory.

Execution Phase:
– We use scope to access people and i. We assign them to anon function which is in memory. This anon function will access parameter ‘index’, which is also stored in memory.

Then this IIFE gets popped from the context stack.
When this loop is done, creator context is popped from the stack.

In the future, when you try to access updatedGang[1].id(), you execute this anon function that is stored in memory. It has index as 1, which is also stored in memory.
Hence that is the reason why we’re able to get the correct value at a later time. We store everything in memory via function definitions and variables.

Using let (block scoped)

We need to use let to make sure we get correct scoping.

A variable declared by let or const has a so-called temporal dead zone (TDZ): When entering its scope, it can’t be accessed (got or set) until execution reaches the declaration.

i in the inner function is not referencing some global var i. It it referencing a block scope variable i, which has been pushed onto the local stack.

function creator(people) {

for (let i=0; i < people.length; i++) {

people[i]["id"] = function() {

return (i+100);

}

return people;

} // creator

it works because, for (let i = 0; i < arr.length ;i ++) defines i as var i for the local block.

in addition:

ref – http://chineseruleof8.com/code/index.php/2017/10/01/let-vs-var-js/

i is only visible in here (and in the for() parentheses)
and there is a SEPARATE i var for each iteration of the loop

like this:

1	for (let i = 0; i < people.length; i++)

does this:

{

var i = 0;

people[i]["id"] = function() {

return (i+100);

}

{

var i = 1;

people[i]["id"] = function() {

return (i+100);

}

{

var i = 2;

people[i]["id"] = function() {

return (i+100);

}

Hence when we call people[0].id(), we evaluate i, which accesses its local var i as 0. 0 + 100 = 100.
people[1].id(), we evaluate the i, which accesses its local var i as 1. 1 + 100 = 101.
… so on.

Another example

function setupSomeGlobals() { // Function definition declarations are hoisted.

var num = 666;

gLogNumber = function() { // function expressions are not hoisted

console.log(num);

}

gIncreaseNumber = function() {

num++;

}

gSetNumber = function(x) {

num = x;

}

// undeclared variable in function context is global

// new stack A

setupSomeGlobals();

// that's why after executing setupSomeGlobals, we have scope, in which the

// undeclared names are considered global variables. That's why we can use

// them below

gIncreaseNumber();

gLogNumber(); // 667

gSetNumber(5);

gLogNumber(); // 5

var oldLog = gLogNumber;

// new stack B

setupSomeGlobals();

gLogNumber(); // 666

oldLog() // 5. oldLog references the stack A's gLogNumber. Thus, the num in that stack is 5.