DEV Community: Gemahar Rafi

Execution Context & the Secret Life of Functions

Gemahar Rafi — Sun, 30 Jun 2019 11:33:52 +0000

Understanding the Execution Context in one of the most vitally fundamental parts of learning Javascript. This is because understanding the Execution Context paves the way to comprehend more advanced topics like hoisting, scope chains, and closures with clarity. So in this piece, I will be covering the complete life cycle of the Execution Context.

What is Execution Context?

Execution Context is the way in which the javascript engine modularizes the process of interpreting and running our code; thereby reducing the complexity of the process. There are two types of Execution Context :

Global Execution Context
Function Execution Context

Global Execution Context

Whenever we run a javascript file, even in the case of an empty javascript file by default the engine creates the Global Execution Context for us. Initially, this Execution Context will consist of two things - a global object and a variable called 'this', and it will reference the global object which will be 'window' if you're running JavaScript in the browser or 'global' if you're running it in a Node environment.

When we have variables and functions in our Execution Context, the code undergoes a two-stage process by default and the two phases are:

The global creation phase.
The global executing phase.

Creation Phase will do the following:

Create a global object for us.
Create an object called "this" and initializes to window/global base on our, environment.
Creates the Variable environment that is the memory space for variables and functions.
Initializes all 'var' identifier declarations to "undefined" and places all function declarations in memory.

In the Execution phase, the JavaScript engine starts running our code line by line and executing it.

Note:

This process of assigning variable declarations a default value of 'undefined' during the creation phase is called Hoisting.

console.log(firstName); //logs -->undefined 

//it does not throw an error but logs -->undefined;
//this happens because of hoisting happening during the creation phase
var firstName = "Rick";
console.log(firstName); //logs -->Rick

Function Execution Context

Function Execution Context is almost exactly identical to the Global Execution Context with a little difference. Only whenever we invoke any function a function Execution Context is created.

Even the Function Execution Context undergoes a two-stage process by default and the two phases are identical to the Global Execution Context they are:

The creation phase.
The executing phase.

Creation Phase will do the following:

Even in Function Execution Context's creation phase is similar to the Global Creation phase but it changes the first step so instead of creating a global object it creates the arguments object with the received arguments. So the steps happening in the creation phase are:

Create an argument object with the received arguments.
Create an object called 'this' and point to the callee or in the absence of callee the to the window/global object.
Creates the Variable environment that is the memory space for local variables and functions.
Initializes all 'var' identifier declarations to "undefined" and places all function declarations in memory.

In the Execution phase again, the JavaScript engine starts running our code line by line and executing it.

After when a function execution is over, that is by implicit/explicit return statement the function Execution Context gets deleted with all its variable environment(not always there is a special case called closures that we will see later) and becomes garbage for the garbage collector.

Call Stack

The JavaScript engine creates an 'Execution Stack' (also known as the "Call Stack") with Global Execution Context as its first or bottom-most item. Anytime a function is invoked, a new Execution Context is created and added to the Execution Stack. Whenever a function is finished running through both the Creation and Execution phase, it gets popped off the Execution Stack.
So a nested Execution Context will look like this:

The Secret Life of functions does not end here there are more interesting things like scopes and magical-like closures. Do check them out.

Resources:

JavaScript | MDN
Javascript The Hard-parts by William Sentance
Images were taken using JavaScript Visualizer by Tyler Mcginnis

var, let and const in JavaScript - Decoded...

Gemahar Rafi — Sun, 23 Jun 2019 08:25:49 +0000

While I was getting the hang of the fundamentals of JavaScript, I came across three ways of declaring a variable, that is by var, let and const statements. So in this piece, I have tried to summarize all my findings to differentiate each of the declaration statements.

To really get a grip on the differences between var, let and const we must apprehend the following four concepts:

Variable declaration
Variable initialization
Scope
Hoisting

Variable declaration

Variable declaration is the process of introducing a new identifier into our program; to be specific to our scope(I will talk about scopes later). In JavaScript, identifiers are by default given a value of undefined when declared with var keyword(this is automatically done by the interpreter).

var foo; // declaration
console.log(foo); // logs-->undefined

Variable initialization

Variable initialization is the process of assigning values to the identifier initially, so when we declare a binding with var keyword the interpreter automatically initializes it to undefined.

var foo; //declaration
console.log(foo); // logs -->undefined

foo = "something"; // Initialization
console.log(foo); // logs -->something

Scope

The scope of a variable actually defines the context in which the variables and functions are accessible and can be referenced in a program. The scope defines the visibility and lifetime of variables and parameters. If a variable is not "in the current scope," then it is unavailable for use. Scopes can also be layered in a hierarchy, so that child scopes have access to parent scopes, but not vice versa.

Basically, there are two types of scoping

function scope
block scope

function scope:

Variables declared inside a function are scoped to the function and all the subsequent nested function; irrespective of blocks;

function foo() {

  if(true) {
    var v = "var inside the if block";
    console.log(v);  //logs -->var inside the if block
  } 
  v = "var outside the if block";
  console.log(v);  //logs -->var outside the if block
}

foo();

block scope

Variables declared inside a block are scoped only to its block and all the subsequent nested blocks but not outside of the block not even in the same function; blocks here include if...else blocks or looping blocks.

function bar() {

  if(true) {
    let l = "let inside the if block";
    console.log(l);  //logs -->let inside the if block
  }

console.log(l); // Uncaught Reference Error: l is not defined
}

bar();

Hoisting:

MDN defines Hoisting as :

"Hoisting is a term you will not find used in any normative specification prose prior to ES2015 Language Specification. Hoisting was thought up as a general way of thinking about how execution contexts (specifically the creation and execution phases) work in JavaScript. However, the concept can be a little confusing at first.

Conceptually, for example, a strict definition of hoisting suggests that variable and function declarations are physically moved to the top of your code, but this is not in fact what happens. Instead, the variable and function declarations are put into memory during the compile phase, but stay exactly where you typed them in your code."

console.log(foo); //logs -->undefined 

//it does not throw an error but logs -->undefined;
//this happens because of hoisting

var foo = "something"; //Initialization
console.log(foo); //logs -->something

For the above code, how JS interpreter evaluation can be simplified as :

var foo; // Hoisted declaration of 'foo'

console.log(foo); logs -->undefined;
foo = "something";
console.log(foo); //logs -->something

var

The var statement declares a variable, optionally initializing it to a value. Any variable declared with var statement is function scoped and also identifies declared with var keywords are hoisted and initialized with undefined

console.log(foo); //logs -->undefined
var foo;

//the above code does not throw an error because of hoisting;

let

The let statement declares a local variable. Any variable declared with let statement is block scoped. The identifies declared with let keywords are hoisted and are not initialized

let foo;
console.log(foo); // Uncaught Reference Error: l is not defined

//the above code throws an error because identifiers declared with let keywords are not initialized;

let bindings are created at the top of the (block) scope containing the declaration, commonly referred to as "hoisting". Unlike variables declared with var, which will start with the value undefined, let variables are not initialized until their definition is evaluated. Accessing the variable before the initialization results in a Reference Error.

const

The const statement declares a local variable very much like the let statement but it has one added property and that is; they cannot be reassigned; meaning once the const binding is initialized it cannot be reassigned with any other value.

Due to the above reason, a const binding will always have to be initialized when declared otherwise it throws an error.

const foo = "something";
foo = "other thing"; // Uncaught TypeError: Assignment to constant variable.    

const bar; //Uncaught SyntaxError: Missing initializer in const declaration

NOTE:
One thing to observe here is that when we use const binding to an object, the object itself cannot be changed and will continue to point at the same object, the contents of that object might change.

const score = {visitors: 0, home: 0};

score.visitors = 1; // This is okay  
score = {visitors: 1, home: 1}; // Uncaught TypeError: Assignment to constant variable.
// This isn't allowed

One last fun fact:

Bindings that are declared in a function without a declaring keyword will become a global variable. Let me explain this with an example:

function funFact() {
  isGloballyAvailable = true;
}

funFact();
console.log(isGloballyAvailable); // logs true

To understand this we must go back to our hoisting concept, usually what happens is that whenever we initialize a variable in our code the interpreter goes and searches the hoisted variables and then assigns or reassigns the value of the variable, but when the interpreter cannot find the variable in the function it goes and searches in its parent function's hoisted variables and this process repeats until the global scope;

In our case the interpreter will not find our 'isGloballyAvailable' binding even in the global scope so, the interpreter automatically adds the variable to the global scope.

This is an extremely dangerous process and must be avoided at all cost; so keep in mind that we must not declare a binding without the: var, let or const keyword anywhere in our code.

**So when should we use var, let or const ?**

ES2015 (ES6) introduced let and const, why would the JavaScript designers introduce them? maybe to fix some issue with var or maybe for better readability... right?

One major issue with var is that it allows for re-declarations in code, which does not throw errors, which can create unintended side-effects in your code.

The popular and as well as my opinion is that :

We should always prefer const if the value assigned to our variable is not going to change, this tells the future developers that the identifier has a constant value.
On the other hand use let if the identifier needs to change its value later on, but I do not see a use case in which we should use var.