Prototypal Behavior

Prototype

Prototype in JS are regular objects which consists of some properties which can be inherited by other objects. So, prototype can be seen as a blueprint which an object inherits.

• Every function has a property named “prototype” which defines a blueprint for objects created via it when used as a constructor. This is where all objects get their prototype from.

• Every object has a property [[prototype]] (or__proto__) which contains the reference for the prototype it inherits. So, every object has __proto__ which points to prototype object, prototype being an object also has a __proto__ pointing to parent prototype and this continues till root prototype object which has __proto__ set to null. This is referred to as prototype chaining.

• When object is created using a constructor function via new keyword, prototype of the function gets assigned to the __proto__ of newly created object.

Summarizing above points, each object has __proto__ property. Function objects, in addition also contains a prototype property, so function objects have both protoype and __proto__. Objects are created using these constructor functions and while doing so, prototype of function is assigned to proto of object. So, prototypes originally generate from functions which are then assigned to objects. Root of all prototypes is Object prototype.

Prototype Chaining

Each object has its own properties and a reference to its prototype(referenced by __proto__). Prototype in return being an object has its own __proto__ and this chain continues till the root object in which __proto__ is set to null. So, JS first looks a value in object’s own set of properties, if not found, it then searches prototype of the object, if it still fails, it then searches in the next prototype in the chain until it finds the value or reaches null.

Let’s look at an example to understand prototypal behavior clearly,

function Person(name) {
    this.name = "name"
}

Person.prototype.greet = function() {
    console.log("Hello")
}

const obj = new Object();
const person = new Person("Demo");

// obj and person get their __proto__ from respective cnstructors
console.log(obj.__proto__ === Object.prototype) // true
console.log(person.__proto__ === Person.prototype) // true

// Each prototype object also has a __proto__ pointing to Object.prototype, unless modified
console.log(Object.prototype.__proto__) // null
console.log(Person.prototype.__proto__ === Object.prototype) // true

// As Object and Person are function objects (constructor), they get __proto__ from Function.prototype
console.log(Object.__proto__ === Function.prototype) // true
console.log(Person.__proto__ === Function.prototype) // true

// Prototype chaining
console.log(person.name) // own property
person.greet() // Available in person.__proto__ - Inherited from Person.prototype
console.log(person.toString()) // Available in person.__proto__.__proto__ - Inherited from Object.prototype

If you create a object literal without using any constructor function, it is same as creating a new Obejct() or Object.create(Object.prototype). Newly created object literal has Object.prototype as its __proto__

Now, let’s look how objects are created in prototypal aspect of Javascript:

• Define a constructor function

• Assign properties using this keyword

• Add functionalities in its prototype

• Create objects using the new keyword.

function Person(name, email) {
    this.name = name;
    this.email = email;
}

Person.prototype.displayName = function() {
    console.log(this.name);
}

Person.prototype.displayEmail = function() {
    console.log(this.email);
}

const p1 = new Person("p1", "p1@test.com");
const p2 = new Person("p2", "p2@test.com");

p1.displayName(); // p1
p1.displayEmail(); // p1@test.com

p2.displayName(); // p2
p2.displayEmail(); // p2@test.com

Class (ES6+)

Classes are syntactic sugar build over prototypes. It provides clean structure for defining classes and instantiating objects from them. Let’s look at the class structure of above example:

class Person {

    constructor(name, email) {
        this.name = name;
        this.email = email
    }

    displayName() {
        console.log(this.name);
    }

    displayEmail() {
        console.log(this.email);
    }
}

const p1 = new Person("p1", "p1@test.com");
const p2 = new Person("p2", "p2@test.com");

p1.displayName(); // p1
p1.displayEmail(); // p1@test.com

p2.displayName(); // p2
p2.displayEmail(); // p2@test.com

It internally creates a Person constructor function, adds defined methods in its prototype.

Object Oriented Programming Concepts

NEW Keyword

new keyword is used with constructor function to create a new object and bind it with the function call. It does the following:

• Creates a new object.

• Assigns __proto__ from constructors prototype.

• Binds the object with function call using this.

• Executes the constructor on newly created object and returns the object.

function Person(name) {
    this.name = name;
}

Person.prototype.greet = function() {
    console.log(`Hello ${this.name}`);
}

const p1 = new Person("p1");
p1.greet(); // Hello p1

Constructor

Constructor is a method used to initialize an object. It assigns all the initial properties to newly created object. Just like regular functions, it also has access to this keyword which holds reference to the current object. After initialization, it returns the newly created object.

// ------------------- PROTOTYPE Based
function Person(name) {
    this.name = name;
}
const p1 = new Person("p1");

// ------------------- CLASS Based
class Person {

    constructor(name) {
        this.name = name;
    }

}
const p1 = new Person("p1");

Getters and Setters

Getters and setters are methods used to get value of a property or set a value.

• Each property has internal getters and setters whcih can be overriden using get or set keywords.

• When a property is accessed using dot(.) operator, getter is called, while when a property is assigned a value using dot(.) operator, setter is called.

• Getters can be used to return formatted values while setters can be used to store values after proper checks and sanitizations.

// ------------------- PROTOTYPE Based
function Person(name) {
    const parts = name.split(" ");
    this.firstName = parts[0];
    this.lastName = parts[1] || "";
}

Object.defineProperty(Person.prototype, "name", {
    get: function() {
        return this.firstName + " " + this.lastName;
    },
    set: function(name) {
        const parts = name.split(" ");
        this.firstName = parts[0];
        this.lastName = parts[1] || "";
    }
});

const p = new Person("Test User");
console.log(p.firstName) // Test
console.log(p.lastName) // User
console.log(p.name) // Test User

p.name = "Demo User";
console.log(p.name); // Demo User

// ------------------- CLASS Based
class Person {

    constructor(name) {
        const parts = name.split(" ");
        this.firstName = parts[0];
        this.lastName = parts[1] || "";
    }

    get name() {
        return this.firstName + " " + this.lastName;
    }

    set name(name) {
        const parts = name.split(" ");
        this.firstName = parts[0];
        this.lastName = parts[1] || "";
    }

}

const p = new Person("Test User");
console.log(p.firstName) // Test
console.log(p.lastName) // User
console.log(p.name) // Test User

p.name = "Demo User";
console.log(p.name); // Demo User

Static Properties

Static properties are directly defined on constructor function and can be accessed on constructor or the class level. These properties doesn’t exist on the instance level.

// ------------------- PROTOTYPE Based
function Person(name) {
    this.name = name;
}

Person.prototype.a = 10; // can be accessed at instance level
Person.b = 20; // can't be accessed via instance

const p = new Person("Test");
console.log(p.a); // 10
console.log(p.b); // undefined
console.log(Person.b); // 20

// ------------------- CLASS Based
class Person {

    static a = 10;

    constructor(name) {
        this.name = name;
    }

    static greet() {
        console.log("Hello");
    }
}

const p = new Person("Test");
console.log(p.a); // undefined
console.log(Person.a); // 10
p.greet() // p.greet is not a function
Person.greet(); // Hello

Private Properties

Sometimes, properties of an instance needs to be hidden to keep internal implementations safe. These properties should not be accessible or modified outside the class. There are various ways adopted to make properties of an object private, let’s look at them one by one:

class Test {

    _secret; 

    constructor(name) {
        this._secret = name + "secret";
    }

    get name() {
        return this._secret.slice(0, this._secret.length-6);
    }

    set name(name) {
        this._secret = name + "secret";
    }

}

const test = new Test("Test");
test.name = "abc";  
console.log(test.name) // abc

console.log(test._secret) // abcsecret -- PROBLEM

In above example, though we haven’t exposed the internal property - _secret, it can still be accessed as it is an instance property, therefore it is not truly private.

class Test {

    constructor(name) {

        let _secret = name + "secret";

        this.getName = () => {
            return _secret.slice(0, _secret.length-6);
        }

        this.setName = (name) => {
            _secret = name + "secret";
        }
    }

}

const test = new Test("Test");
test.setName("abc");  
console.log(test.getName()) // abc

In above example, closure is used to define an internal property which can be accessed by getters and setters but not as an instance property, therefore it is truly private. But each instance will get it’s own copy of getters and setters, so it is not memory efficient.

Given below is the modern and clean way of defining private properties in a class -

class Test {

    #secret;

    constructor(name) {
        this.#secret = name + "secret";
    }

    get name() {
        return this.#secret.slice(0, this.#secret.length - 6);
    }

    set name(name) {
        this.#secret = name + "secret";
    }

}

const test = new Test("Test");
test.name = "abc"; 
console.log(test.name) // abc
console.log(test.#secret) // Private field '#secret' must be declared in an enclosing class

When # is used with a property it is reserved as private slot internally and can’t be accessed outside the class.

Similary, methods or static propeties can also be made private -

class Test {

    #secret;
    static #staticSecret = 'staticSecret';

    constructor(name) {
        this.#secret = name + "secret";
    }

    #extractName() {
        return this.#secret.slice(0, this.#secret.length - 6);
    }

    get name() {
        return this.#extractName();
    }

    set name(name) {
        this.#secret = name + "secret";
    }

}

const test = new Test("Test");
test.name = "abc";
console.log(test.name);
console.log(test.#extractName()) // error
console.log(Test.#staticSecret) // error

Property Descriptors

Property decriptors are the objects used to configure instance properties. They can used to configure following values -

• Value of the property

• Read only or Writable

• Enumerable (in loops)

• Configurable (can be deleted or re-configured)

• Getters and Setters

Every property has a property descriptor set for it. By default, following values are set internally -

• writable: true

• enumerable: true

• configurable: true

const obj = {
    a: 10
};
Object.defineProperty(obj, "name", {
    value: "Test",
    writable: false,
    enumerable: false,
    configurable: false,
});

// NOT WRITABLE
obj.name = "Demo";
console.log(obj.name) // Test

// NOT ENUMERABLE
console.log(obj) //{a: 10, name: 'Test'}
for(let key in obj) {
    console.log(`${key} => ${obj[key]}`)
}
// a => 10

// NOT CONFIGURABLE 
Object.defineProperty(obj, "name", {
    value: "Test",
    writable: true,
    enumerable: false,
    configurable: false,
});
// Cannot redefine property: name

These properties can be used to define constants or stop iteration over a property. Similary, getters and setters can be defined -

const obj = {
    a: 10
};
Object.defineProperty(obj, "name", {
    value: "Test", // Invalid property descriptor. Cannot both specify accessors and a value or writable attribute
    writable: true, // Invalid property descriptor. Cannot both specify accessors and a value or writable attribute
    get: () => this.name + "abc",
    set: (name) => this.name = name.toUpperCase()
});

obj.name = "Test";
console.log(obj.name); // TESTabc

value and writable properties are not accepted if getters and setters are provided.

getOwnPropertyDescriptor() can be used to view property decriptor for an instance property.

You can define property descriptors in classes and constructor functions similarly as we did for object literals -

// ------------------- PROTOTYPE Based
function Person(name) {
  Object.defineProperty(this, "name", {
    value: name,
    writable: false,
    enumerable: true
  });
}

// ------------------- CLASS Based
class Person {
  constructor(name) {
    Object.defineProperty(this, "name", {
      value: name,
      writable: false,
      enumerable: true
    });
  }
}

Inheritance

Inheritance is an OOP concept in which child instance can inherit parent properties. In Javascript, it is implemented using prototype chaining. Let’s look at some examples to understand:

// ------------------- PROTOTYPE Based
function Animal(name) {
    this.name = name;
}
Animal.prototype.displayName = function() {
    console.log(this.name);
}

function Dog(name, breed) {
    Animal.call(this, name);
    this.breed = breed;
}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.speak = function() {
    console.log(`${this.name} barks...`);
}

const dog = new Dog("Bruno", "Beagle");
dog.displayName(); // Bruno
dog.speak(); // Bruno barks...

// ------------------- CLASS Based
class Animal {
    constructor(name) {
        this.name = name;
    }
    displayName() {
        console.log(this.name);
    }
}

class Dog extends Animal {
    constructor(name, breed) {
        super(name);
        this.breed = breed;
    }
    speak() {
        console.log(`${this.name} barks...`);
    }
}

const dog = new Dog("Bruno", "Beagle");
dog.displayName(); // Bruno
dog.speak(); // Bruno barks...

Encapsulation

Encapsulation is an OOP concept in which data(properties) and methods(functions) are wrapped up as single unit with proper access control. It involves hiding internal properties and exposing only the required ones, reffered to as data hiding.

class User {
  #password; // private field

  constructor(username, password) {
    this.username = username;
    this.#password = password; 
  }

  getPassword() { 
    return "****"; // controlled access
  }

  setPassword(newPassword) {
    if (newPassword.length > 5) {
      this.#password = newPassword;
    } else {
      console.log("Password too short!");
    }
  }
}

const u = new User("Test", "secret123");
console.log(u.username); // Test
console.log(u.getPassword()); // ****
u.setPassword("abc"); // Password too short!

Polymorphism

Polymorphism is an OOP concept in which a single method can have different behaviors based on how it is called. Method overriding is used to implement this concept.

class Animal {
  speak() {
    console.log("Animal makes a sound");
  }
}

class Dog extends Animal {
  speak() {
    console.log("Dog barks");
  }
}

const a = new Animal();
const d = new Dog();
a.speak(); // Animal makes a sound
d.speak(); // Dog barks

Abstraction

Abstraction is an OOP concept in which internal implementation details are hidden exposing only the required functionalities. This way user can control state and behavior of an object by creating instances and executing methods on them without actually worrying about the internal details. In built functions like toString(), array methods - map, filter, etc. are good examples of abstraction.

Regular functions often doesn’t require an object to execute on, they can sufficiently run on the passed parameters, but class methods usually require an object to perform the operations on and modify its state.

Let’s understand this with some examples:

function sum(a, b) {
    const sum = a + b;
    return sum;
}

const result = sum(1, 2);
console.log(result);
// Output: 3

Above example defines a simple utility function which calculates the sum of 2 numbers passed to it. It operates on these parameters and produces the result.

class Person {

    constructor(name) {
        this.name = name;
    }

    greet(){
        console.log("Hello, ", this.name);
    }
}

const user1 = new Person("User1");
const user2 = new Person("User2");

user1.greet();
user2.greet();

// Output:
// Hello,  User1
// Hello,  User2

Above code snippet defines a constructor and greet function both of which requires an object to execute on. This object is provided to the function dynamically during runtime which is known as this binding. Whichever object the function is called with, becomes this for that particular function call. Each function owns a stack frame - execution context - which holds the this reference for the function. This is how multiple objects share the same function.

Now that we know what this keyword and this binding is, let’s look at how binding is done. We know object is binded to a function call dynamically when function begins its execution but how does JS engine decide which object to bind, in short how does this gets assigned for various function calls? Well, that depends on how the function is called. Let’s take a look at at them one by one.

• Default binding: When a regular function call is made, it gets binded to the global object for non-strict mode and undefined for strict mode, which basically makes sense as these functions are not intended to operate on any object.

    function f() {
        console.log(this === globalThis);
    }
    f();
    // Output: true
  
    function f() {
        "use strict"
        console.log(this);
    }
    f();
    // Output: undefined
  

  

• Implicit binding: When a function is called with an object using the (.) operator, it gets binded to that particular object.

    function displayName() {
        console.log(this.name);
    }
  
    const obj = {
        name: "Demo"
    }
    obj.displayName = displayName;
    obj.displayName();
  
    // Output: Demo
  

  

• New binding: When constructor functions are called with new keyword, it creates a new object and binds them together.

    function Person(name) {
        this.name = name
    }
  
    Person.prototype.displayName = function() {
        console.log(this.name);
    }
  
    const obj1 = new Person("Demo1");
    obj1.displayName();
  
    const obj2 = new Person("Demo2");
    obj2.displayName();
  
    // Output:
    // Demo1
    // Demo2
  

  

  For simplicity, lexical environments are omitted from the diagram but they hold reference to variables and functions present inside global and local scopes like Person, obj1, ob2, etc.

• Explicit binding: Explicit binding can be used when you want to specify an object for binding yourself rather than relying on the implicit binding. JS provides 3 functions to do so:

Dot (.) operator also provides you the control to bind object to a function call but works only if the function is a property of the obejct(or present in its prototype chain).

1. call(): It is used to call a function on a given object which is passed as a parameter to the function. It takes first parameter as the object reference to which it needs to be binded, rest are the parameters to execute the function. Let’s look at an example to understand:

    function setName(name) {
        this.name = name;
    }
   
    function Person(name, email) {
        setName(name);
        this.email = email;
    }
   
    const p1 = new Person("Demo", "demo@demo.com");
    console.log(p1);
    console.log(globalThis.name);
   
    // Output: 
    // Person { email: 'demo@demo.com' }
    // Demo
   

   

   In above example, this inside Person points to the newly created obejct p1 as we learned in the new binding, so email is set correctly in the p1 object. But setName didn’t set the name in the p1 object as it is a regular call so this in setName points to the global obejct. So, how do we get access to the outer this object inside setName? One possible way is to use the Dot operator(this.setName()), but setName isn’t a peoperty of p1 object. This is where call() is used, when you want to outsource some functionality to another function which is not part of the current object but you want it to run on the same object without creating a new one or executing it on global.

    function setName(name) {
        this.name = name;
    }
   
    function Person(name, email) {
        setName.call(this, name); 
        this.email = email;
    }
   
    const p1 = new Person("Demo", "demo@demo.com");
    console.log(p1);
   
    // Output: Person { name: 'Demo', email: 'demo@demo.com' }
   

   

   Another example to understand it better:

    function setName(name) {
        this.name = name;
    }
   
    const p1 = {};
    setName.call(p1, "Demo"); 
    // We can't do setName("Demo") as it will execute on global object
    // We can't do p1.setName("Demo") as setName is not available on p1
    console.log(p1);
   
    // Output: { name: 'Demo' }
   

2. apply(): It does the same as call() except that it takes second argument as an array of parameters.

    function setName(name, email) {
        this.name = name;
        this.email = email;
    }
   
    const p1 = {};
    setName.apply(p1, ["Demo", "demo@demo.com"]);
    console.log(p1);
   
    // Output: { name: 'Demo', email: 'demo@demo.com' }
   

3. bind(): It returns a function binded with the passed object reference. So, whenever the function is called, it runs on that particular object irrespective of how it’s called.

    function setName(name) {
        this.name = name;
    }
   
    const p1 = {};
    const bindedSetName = setName.bind(p1);
   
    const p2 = {};
    bindedSetName.call(p2, "Demo");
   
    console.log(p1);
    console.log(p2);
   
    // Output:
    // { name: 'Demo' }
    // {}
   

   This is mainly used for callbacks where function call is made by JS and you do not control how it is called and which binding it uses, so it’s better to bind it beforehand.

    class Button {
   
        constructor(label) {
            this.label = label;
        }
   
        handleClick() {
            console.log(this.label);
        }
    }
   
    const btn = new Button('Click me');
    setTimeout(btn.handleClick, 1000); 
   
    // Output: undefined
   

   

    class Button {
   
        constructor(label) {
            this.label = label;
            this.handleClick = this.handleClick.bind(this);
        }
   
        handleClick() {
            console.log(this.label);
        }
    }
   
    const btn = new Button('Click me');
    setTimeout(btn.handleClick, 1000); 
   
    // Output: Click me
   

   

Callbacks passes in event listeners gets binded to target obejct, while setTimeout gets binded to global(non-strict) or undefined(strict) or timeout object(Node env). To override this default behaviour, use bind().

Both call() and apply() are used for runtime binding while bind() is used during creation phase binding. bind() basically captures this reference in closure of the function it returns. So, whenever the function runs, this is taken from the closure and doesn’t depend on how the function is called. This concept is used in arrow functions implicitly which we will learn in later sections.

• Arrow function binding: Arrow functions always gets binded to their outer environment irrespective of how they are called. They capture this reference from the time of definition. Therefore, they can’t be binded explicitly so call(), apply() and bind() doesn’t work on arrow functions. In fact, it tends to solve most of the above problems without the need of explicit binding, especially, in case of callbacks.

    class Button {
  
        constructor(label) {
            this.label = label;
        }
  
        handleClick = () => {
            console.log(this.label);
        }
    }
  
    const btn = new Button('Click me');
    setTimeout(btn.handleClick, 1000);
  
    // Output: Click me
  

But beware of this approach as arrow functions will add an instance property in the object and not on the prototype. Use it only when you can’t control how the function is called and you want to bind it to the outer scope like callbacks.

• Super binding: In case of derived classes, it is necessary to call super constructor inside the derived class constructor before using this, so that super class properties can be set on the current object. Note that, when a method call is made using super, it binds the method with surrounding environment.

    class Parent {
  
        constructor(type = "parent") {
            this.type = type;
        }
  
        display() {
            console.log(this);
        }
    }
  
    class Child extends Parent {
  
        constructor(name) {
            super("child");
            this.name = name;
        }
  
        display() {
            super.display();
            console.log(this)
        }
    }
  
    const child = new Child("Demo");
    child.display();
  
    const parent = new Parent();
    parent.display();
  
    /* Output
    Child { type: 'child', name: 'Demo' }
    Child { type: 'child', name: 'Demo' }
    Parent { type: 'parent' }
    */
  

  

• Static methods binding: In case of static methods, this refers to the class object.

    class Parent {
  
        constructor(type = "parent") {
            this.type = type;
        }
  
        display() {
            console.log(this);
        }
  
        static f() {
            console.log(this)
        }
    }
  
    const parent = new Parent();
    parent.f() // parent.f is not a function
    Parent.f() // [class Parent]
  

this can hold a object reference as well as primitive in case of strict mode, for non-strict mode, it gets wrapped with the Wrapper class object of primitive.

1. Simple function definition

    function hello() {
        console.log("hello")
    }
    hello();
    // Output: hello
   

2. Anonymous function expression

    const hello = function() {
        console.log("hello")
    }
    hello();
    // Output: hello
   

3. Named function expression

    const hello = function hello1() {
        console.log("hello")
    }
    hello()
    // Output: hello
   

4. Arrow function (always anonymous)

    const hello = ()  => {
        console.log("hello")
    }
    hello();
    // Output: hello
   

5. Single line arrow function

    const hello = () => console.log("hello")
    hello();
    // Output: hello
   
    const hello = () => "hello"
    console.log(hello());
    // Output: hello
   
    const obj = () => {a: "1", b: "2"} // Error
    const obj = () => ({a: "1", b: "2"}) // Returns object
   

6. Anonymous callback

    setTimeout(function () {
        console.log("hello");
    })
    // Output: hello
   

7. Named callback

    setTimeout(function hello() {
        console.log("hello");
    })
    // Output: hello
   

8. Arrow function callback

    setTimeout(() => {
        console.log("hello")
    })
    // Output: hello
   

9. IIFE(Immediately Invoked Function Expression)

    (
        function() {
            console.log("hello")
        }
    )();
    // Output: hello
   

10. Named IIFE

    (
        function hello() {
            console.log("hello")
        }
    )();
    // Output: hello
    

11. Arrow function IIFE

    (
        () => {
            console.log("hello")
        }
    )();
    // Output: hello
    

12. Default parameters function

    function hello(name = "User") {
        console.log("hello, ", name)
    }
    hello()
    hello("Demo User")
    // Output
    // hello,  User
    // hello,  Demo User
    

13. Arguments Object (Only in non-arrow functions)

    function hello() {
        for(let i=0;i<arguments.length;i++) {
            console.log(arguments[i])
        }
    }
    hello(1, 2, 3, "Demo");
    /* Output:
    1
    2
    3
    Demo
    */
    

14. Rest parameters (At the end of parameters list, included in arguments object)

function hello(name, ...params) {
    console.log(name);
    params.map(item => console.log(item))
}
hello("Demo", 1, 2, 3)
/* Output:
Demo
1
2
3
*/

15. Higher-Order Functions (HOF)

    • Either takes function as argument

    • or returns function as result

    • Inbulit HOFs: map, reduce, filter, etc.

    function name() {
        return "Demo"
    }

    function greet(callback) {
        console.log("Hello", callback());
    }

    greet(name);

    // Output: Hello Demo

    function outer() {
        return function inner() {
            console.log("hello")
        }
    }
    // const outer = () => () => console.log("hello")

    outer()();

    // Output: hello

Arrow vs Regular functions

Anonymous vs Named functions

In this article, we will look at the core concepts like execution context, lexical environment, scope chaining and closures. These concepts define how Javascript execution works at its core.

Let’s look at them one by one:

• Execution context(EC): Javascript runs on a call stack. Execution context can be seen as a stack frame created on the stack when a function starts its execution. It holds all the resources needed to execute that particular function. Few things to remember about EC:

  - It holds reference to the lexical environment and the this keyword.

  - There is a global execution context and a local execution context per function call.

• Lexical environment(LE): It is an object in heap which contains the record of all the variables present in a function. It also holds the reference to its parent lexical environment.

  - It contains variables and parent LE reference stored in [[OuterEnv]].

  - Each block leads to creation of a new LE.

  - LE actually makes scoping possible in Javascript.

• Scope: Scopes define the visibility area of a variable.

  - Each block has its own scope.

  - Inner scope has access to its outer scope but vice versa is not true. So a block have access to variables present in that particular block and the parent block.

• Scope chaining: Each scope has access to its parent and this goes on till the global scope which doesn’t have a parent. So, each lexical environment has a reference to its parent LE, this forms a chain which is referred to as a scope chain. Global LE has parent reference set to null.

• Closure: Functions, unlike other blocks, can exist even when the execution context which defined that function is destroyed. Functions are actually objects and their reference can be passed across the execution contexts and they need the outer scope from where they were defined to execute. To resolve this issue, an internal property [[Environment]] is added to function when it is defined which holds the reference to the outer LE. So when that function executes, an EC is created along with LE. EC holds reference to LE and LE holds reference to the parent - [[OuterEnv]] which is taken from [[Environment]] property of function. So, the function wrapped with reference to its outer scope(LE) - [[OuterEnv]] is what we refer to as a closure.

Now, let’s look at the complete execution flow:

1. Javascript creates a global execution context to start with. In creation phase it reserves the spot for each variable, these variables are stored in heap inside LE. It creates a LE for each block and references to these LE are stored in the EC. Along with it EC also stores the this reference. It sets parent of each LE accordingly and null is set for the global.

2. When a function definition is encountered, it creates an object for the function and stores the parent LE reference inside it forming a closure.

3. It updates these LE on the heap during the execution phase.

4. When a function execution starts, a separate execution context and lexical environment is created. EC holds reference to the LE. LE gets the parent from closure.

5. If an inner function is defined inside, a closure is formed for it.

6. Function completes its execution and EC is destroyed but LE still remains as it is referenced by the inner function’s closure.

7. Now when inner function executes same steps are followed.

8. Lexical environments are cleaned by garbage collector when no reference points to them.

First, we must know passwords can be compromised in two ways:

1. Over client side - Various attacks like phishing, etc. can steal the passwords even before they reach the server for processing. Passwords are often passed as plaintext over the network, therefore if an attackers get their hands on these plaintext, they can enter the system and modify resources. But, often these attacks are ignored while securing passwords as the impact is low. Few compromised passwords don’t affect the system significantly.

2. Over the server side - When database storing all the passwords gets compromised, it pauses significant impact on system’s security. Therefore, we usually deal with how to store the passwords, so that even if the DB gets attacked, attackers are not able to retrieve the original passwords.

   

Below are some techniques which helps deal with passwords securely:

• No plaintext, No encryption: Never store passwords in plaintext. Do not encrypt the passwords as it is reversible. If attacker gets hold of the key used for encryption and database, he can easily decrypt them.

  

• Always hash the passwords: Use hashing techniques to convert your passwords in hash strings. This process is irreversible, so your system only remembers the hash and not the original password. When password needs to be verified during login, it recalculates the hash using the password entered by user and match it with hash stored in DB. This way, even if attacker hacks the DB, he won’t be able to extract password from it which is actually needed to login a system.

  

Hashing alone is not sufficient. Rainbow tables are the problem. These tables consists of hashes of some popular and common passwords. Hashses are precomputed so all attacker has to do is to search these hashes in compromised DB. This way, if a DB gets attacked, all the weak passwords gets hacked and these are a lot in practice.

• Use a salt: Salt is an extra ingredient to your hashing technique. Salts are added with the passwords to make them less common and then hashed to store in DB. Example, “abc” is common but “abc69b238cb9f1d3844942d9b30e0a131ae” is not. Always use unique salt for each password and DO NOT use common salts like username, etc. You can store these salts with hashes in the DB.

  

Salts avoid rainbow table attacks, as now size of rainbow table increases significantly. Lets say there are n common hashes and 16 bit salt (2^16 possible salts) - imagine generating n * 2^16 hashes, practically infeasbile as their can be millions of leaked passwords(n). There will be 2^16 possible hashes for a single password.

But what if attacker combines rainbow table with brute force, target a user, get the salt from DB and generate the rainbow table using the targeted salt. To avoid this we need to make rainbow table precomputation infeasible.

• Always use slow hashing algorithm: For hashing, slower the algorithm, more secure it will be. Avoid using MD5, SHA, etc. algorithms, use bcrypt, argon2, scrypt, PBKDF2, etc. instead. This makes precomputation of hashes harder.

• Stretching: It is process of hashing a password repetitively for a number of times making the algorithm even more slower.

• Use an existing algorithm rather than trying to reinvent the wheel, these algorithms are widely used and more secure.

Above techniques make it infeasible for an attacker to hack the passwords with precomputed rainbow tables or precompute the table himself.

Rainbow Tables

OWASP Cheatsheet

Before we dive into the working and behavior of these keywords, make sure you understand the concepts like execution context, scopes, lexical environment, hoisting, how Javascript behaves in different environments like Browser or Node.js, etc.

VAR

var is used to create a function scoped variable, that means it gets created when a functional block starts and can be accessed throughout it. Some key points to remember about var -

• It is function scoped, it isn’t aware of blocks other than the function which declared it.

• It can be redeclared.

• It can be used before its declaration as it is hoisted.

LET/CONST

let and const are used to create a block scoped variable or constant, that means their access can be limited to a block not necessarily be a fucntion block. Some key points about let and const -

• They were introduced in ES6, before that everything was declared with var.

• They are block scoped, that means they respect every subsequent block that is defined inside a function or module.

• They can’t be redeclared.

• They can’t be used before declaration, that doesn’t imply that they are not hoisted. let and const do get hoisted but they reside in an area referred to as TDZ(Temporal Dead Zone).

LET vs CONST

let - defines a variable, it can be updated.

const - defines a constant, once assigned it can’t be changed.

Examples

Let’s look at some examples to understand above concepts -

(
    function() {
        var a = 10;
        if(true) { // block scope started
            var a = 20; // same variable
        }
        console.log(a);
    }
)(); // Output - 20

(
    function() {
        let a = 10;
        if(true) { // block scope started
            let a = 20; // new variable created for the block
        }
        console.log(a);
    }
)(); // Output - 10

(
    function() {
        var a = 10;
        var a = 20;
    }
)(); // Executes fine

(
    function() {
        let a = 10;
        let a = 20;
    }
)(); // Throws error - Identifier 'a' has already been declared

(
    function() {
        console.log(a);
        var a = 10;
    }
)(); // Output - undefined

(
    function() {
        console.log(a);
        let a = 10;
    }
)(); // Throws error - Cannot access 'a' before initialization

(
    function() {
        let a = 10;
        a = 20;
        console.log(a);
    }
)(); // Output - 20

(
    function() {
        const a = 10;
        a = 20;
        console.log(a);
    }
)(); // Throws error - Assignment to constant variable.

Browser vs Node environment

Javascript behaves differently in Browser and Node environment, let’s look at them one by one:

Node environment

In Node.js, a JS file is wrapped as a module. So variables defined globally in Node.js get bounded by a module and can be accessed inside that module but not outside it. They are not added to global scope(global variable) and is actually function scoped.

let a = 10;
var b = 20;
console.log(global.a);
console.log(global.b)

/* Output:
undefined
undefined
*/

Browser environment

Variables defined globally inside a script loaded in browser are truly global. They get added to the global scope. But var and let/const behave a bit differently. While they all lie in the same global scope, var gets added to the global object - window but let/const don’t.

let a = 10;
var b = 20;
console.log(window.a);
console.log(window.b)

/* Output:
undefined
20
*/

Scripts execute in the order in which they are embedded in HTML. So variables defined outside all functions in script files go to global scope and can be accessed across all the scripts.

<!DOCTYPE html>
<html lang="en">
<head>
    <script>
        let a = 10;
    </script>
    <script>
        console.log(a);
    </script>
</head>
<body></body>
</html>

/* console - 10 */

Finally, lets look at some problems paused by var(leading to use of let/const):

• var doesn’t allow to declare a constant.

• It can be accessed without initialization returning undefined.

• It can be redeclared which may lead to accidental overwrites.

• Doesn’t behave as expected with closures.

Example

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}
// Prints: 3, 3, 3

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}
// Prints: 0, 1, 2

In first example, var is the same in each iteration and doesn’t get redeclared, therefore, callbacks to setTimeout closes over the same variable which is at the end updated to 3. So, when executed all returns 3.

On the other hand, let forces it to get redeclared for each iteration, therefore, callbacks closes over different variables. So, when executed, prints their respective closure variables.

1. Creation Phase: In this phase, JS allocates space in memory for all the variables, constants, functions, etc. This phase actually creates the execution contexts.

2. Execution phase: In this phase, all the assignments, function calls, etc. are executed using the context created in previous phase.

So, Hoisting is actually Javascripts mechanism of gathering all the variables, constants, etc. that will be required in a function and allocate their space in the memory. It doesn’t initialize in the creation phase, variables remain undefined.

Lets take an example to understand it better,

Lets look at each one:

• let/const - gets hoisted but resides in the Temporal Dead Zone(TDZ) and can’t be accessed.

• var - hoisted and set to undefined, can be accessed.

• function definitions - hoisted, therefore, functions can be called anywhere in the scope.

• function assignments - only the variable holding the function gets hoisted and set to undefined.

• class definition - hoisted, but can’t be initialized constructor is not yet available.

Lets understand it by taking a few more examples:

f();
function f() {
    console.log("Hello");
}

/* Output: Hello
f gets hoisted during creation phase, hence it is available in execution phase before 
definition.
*/

f();
const f = function() {
    console.log("Hello");
}
/* Throws error: Cannot access 'f' before initialization
f variable gets hoisted during creation phase and set to undefined, it is not available until
it gets assigned in execution phase.
*/

console.log(a);
var a = 10;

/* Output: undefined
a gets hoisted during creation and set to undefined 
*/

console.log(a);
let a = 10;
/* Throws error: Cannot access 'a' before initialization
a gets hoisted but resided in TDZ and can't be accesses until initialized in execution phase
*/

const p = new Person()
class Person {
    constructor() {
        this.name = "Demo"
    }
}
/* Throws error: Cannot access 'Person' before initialization
class gets hoisted but not the constructor
*/

Hoisting is JavaScript's behavior of moving declarations to the top of their enclosing scope during the compilation phase, before the code is actually executed.

Note that variables are not physically moved at the top rather it is logically percieved as they are available before the code actually starts execution.

Javascript is a synchronous language at its core, that means it runs on a single thread with a single call stack. So, all the code you write in core JS is executed line by line, one after the other on the same call stack. It doesn’t skip to the next instruction until previous one is completed.

Execution Context

Execution context is an environment that Javascript uses to run the code. It starts off with a global execution context, and creates a new one for each function call. So, you can think of it as a separate environment for each function call that holds the space for variables used inside it.

Javascript creates a stack frame for each execution context in the call stack. To start with, a global execution context stack frame is added with all the global variables, including the global object - window, in case of browser and global, in case of Node environment. Then with each function call, a separate execution context is created and stacked at the top of the call stack. As soon as function completes its execution, its stack frame is popped out of the stack. Global execution context always resides in the stack at the bottom until the program is running.

Let’s take an example to understand the concept -

Asynchronous Javascript (Javascript Engine + Browser/Node API)

When core Javascript is combined with Browser or Node APIs, its synchronous nature tends to shift to asynchronicity. Functions like setTimeout, fetch, etc. doesn’t execute instantly. So, the result for these operations is recieved after a while. Now, Javascript has 2 options whether to wait for the operation to complete(synchronous) or skip to the next one as the previous one keeps executing(asynchronous). Javascript goes with the asynchronous approach, but how does this get implemented? Do these operations run on separate threads or on the same with context switching? Who manages this asynchronous nature of JS?

Let’s look at these questions in detail.

First, lets look at some termonolgy required to understand the concepts:

Promise: This is an object which eventually evaluates to success or failure but not at the moment. The operations like fetch which can’t complete instantly, returns a promise to complete. So, rather than returning a response, they return promise object. Think of it as a placeholder object, which when completed, gets replaced by the success or failure response.

Callback: These are the functions which needs to be executed after these asynchronous operations complete.

Now, lets understand the components which really makes JS async:

• Call Stack: This is the same stack we discussed above which take the function call one by one and executes them. So, Javascript has single thread, single call stack that runs everything.

• Web/Node APIs: These APIs are what makes JS asynchronous. They take some time to execute making JS switch to the next operation. Eg: setTimeout, fetch(Browser), file system(Node), etc.

• Task Queue: This a queue which holds all the callbacks.

• Event Loop: It checks the task queues and call stack constantly and pushes the callbacks to stack once its empty.

• Microtask Queue: This is also a task queue which holds callbacks but has higher priority. Callbacks for promises are pushed in it and gets executed before the task queue.

Now, let’s look at the actual flow:

1. Javascript runs as usual one operation after the other, all operations completing almost instantly.

2. It encounters fetch, which is part of Browser API and will take some time to complete.

3. It delegates this request to the Browser and moves to the next operation.

4. When Browser executes the request and fetch operation completes, the callback function along with the response is pushed into the queue.

5. Event loop checks the stack and queue regularly and pushes the callback in stack as soon as stack gets empty.

6. The call stack executes the callback.

This way, Javascript along with the environment(Browser/Node) including task queues, event loops,etc. handles asynchronous tasks using a single call stack.

Following code demonstrate the complete flow:

async function f() {
    console.log("Starting async function...");
    setTimeout(() => { 
        console.log("Async operation complete..."); // Callback function body
    }, 0);
    console.log("Async function complete...");
}

console.log("Starting execution...");
f();
console.log("Execution complete...");

/* Output:
Starting execution...
Starting async function...
Async function complete...
Execution complete...
Async operation complete...
*/

Microtask queue always gets precedence over task queue:

async function f() {

    console.log("Starting async function...");

    setTimeout(() => {
        console.log("setTimeout complete...");
    }, 0);

    Promise.resolve().then(() => {
        console.log("Promise complete...");
    })

    console.log("Async function complete...");

}

console.log("Starting execution...");
f();
console.log("Execution complete...");

/* Output:
Starting execution...
Starting async function...
Async function complete...
Execution complete...
Promise complete...
setTimeout complete...
*/

Above diagram shows a high level overview of how DNS works, but there’s a lot going on under the hood. In this article we will understand how the flow goes from the domain request to actual repsonse from the server.

Few components of DNS that you need to know before we actually understand the flow:

DNS Resolver

• It is a DNS server responsible to provide IP of requested domain to your OS.

• Your ISP manages these DNS Resolvers and provides you services to resolve your domain names to a specific IP address.

• Your OS have the IP address of DNS Resolver(obtained via DHCP) which is by default the IP of DNS provided by your ISP. But you can configure it manually to use any third party DNS like the one provided by google(8.8.8.8) or cloudfare(1.1.1.1).

Google’s DNS Resolver has a unique IP address - 8.8.8.8, but that doesn’t mean there is physically one server reponsible to handle all the requests. Google hosts multiple DNS, It uses anycast to recieve request on the same IP, but your request actually goes to the DNS hosted nearest to you.

Some popular DNS tools - BIND, UNBOUND, dnsmasq, etc.

Root DNS [.]

• These are the root DNS servers which holds addresses for the TLDs(Top Level Domain Servers).

• There are around 13 Root DNS(virtually, there may be many more physically) A-M maintained by different orgzanizations -

• You DNS resolver holds a list of these Root DNS servers.

New Root DNS servers are rarely added and their IPs remain almost constant.

Top Level DNS (TLD) [.com, .org, .net…]

• These DNS servers holds records for Authoritative DNS servers.

• They are also maintained by different organizations like .com and .net are managed by Verisign, .org by Public Interest Registry (PIR), .in by NIXI (India), etc.

• They fall into 3 major types:

  1. gTLDs (Generic): .com, .net, .org, etc.

  2. ccTLDs (Country Code): .in, .us, .uk, etc.

  3. Sponsored/Brand TLDs: .edu, .gov, etc.

If a new TLD needs to be added for eg. .dev, an application needs to be submitted to ICANN which reviews and accepts it. Then it gets forwarded to IANA, which updates it into root zone file and propagates to all Root DNS operators. Similary, a request is submitted to IANA when a new TLD server is added for an existing domain.

Authoritative DNS [google.com, chat.com,…]

• These are the servers which actually holds the IP addresses of your domains.

• They are usually maintained by your domain registrar like goDaddy, DigitalOcean, Namecheap, etc.

If you register a domain via a registrar, it provides you a Authoritative DNS server which keeps the IPs of your domain. It also registers your domain with TLD servers. You can manually add or update DNS records for your domain or subdomains. These records may take some time to propagate due to TTL set in the DNS Resolvers. DNS Resolvers keeps using the old cached IPs until a specific amount of time(TTL) after which a new request is made.

So, when you type chat.com in your browser, following things go on in your system:

1. Browser looks for the IP corresponding to chat.com in it’s cache, if not found, it asks the OS for the IP.

2. OS looks into its cache, if IP isn’t present in the cache it looks for the IP of DNS Resolver in config provided via DHCP and forwards the request.

3. Now DNS Resolver looks for the IP in it’s cache, failing which it picks IP of a Root DNS server from named.root file configured inside it and redirects the request to Root DNS server.

4. Root DNS looks for the Top Level domain records and returns a list of IP addresses corresponding to TLD servers for that particular domain(.com).

5. DNS Resolver gets the list of TLDs, it then sends the request to the nearest TLD.

6. TLD looks into its records and sends the IPs of authoritative servers holding records of the targeted domain(chat.com).

7. DNS Resolver gets the list of Authoritative server and sends the request to get actual IP.

8. Authoritative server looks into its records to get the IP of domain requested and returns it to DNS Resolver.

9. DNS Resolver then returns it to your OS which in turn gives it to browser and browser sends request to the intended IP.

10. Browser recieves the response and displays it.