Concepts you must know in javascript

Javascript is often considered when asynchronous functionality is required. everyone assumes it's asynchronous. but it's not let's understand how it works. so let's dig in.

How Javascript Execution takes place

JavaScript is synchronous by default and is single-threaded. also, Programming languages like C, Java, Python are all synchronous by default, some of them handle async by using threads and spawning a new process

Synchronous: One command at a time. Single-threaded: In a specific synchronous order.

Everything in JS runs inside the Execution Context. it is like a sealed environment that runs JS. in this container it has two components

1. Memory Component - it has all the variables and functions in key-value pairs. it is also called Variable environment.

2. Code Component - the whole code to be executed by the context is stored here. the thread which runs all this code is called Thread of Execution

Flow of Execution

Every run of a JS program is accompanied by the creation of global execution context

The Execution Context can be created in two phases.

1. Memory creation phase - JS will allocate memory to variables and functions
2. Code Execution phase - in this phase as required by the program a local execution context is created which has its own variable environment and code.

let's take a code snippet as an example to understand the flow of execution

var n = 2;
function square(num) {
 var ans = num * num;
 return ans;
}
var square2 = square(n);
var square4 = square(4);

in the first phase of execution JS allocates memory for each variable. n,square2,suare3 are assigned undefined a special value. and in square whole code is saved.

in the above picture, the execution stopped at line 1 but on the left, there is memory allocated for variables and it sets the value to undefined.

now as the execution flow continues, a new local execution context is created for every function execution. and will have a code component with the function value.

this local execution context is destroyed after the control is branched to the parent.

Call Stack

Javascript manages code execution, context creation and deletion with the help of Call Stack. Call Stack is a mechanism to keep track of its place in a script that calls multiple functions. Call Stack maintains the order of execution contexts. It is also known as Program Stack, Control Stack, Runtime stack, Machine Stack, Execution context stack.

Hoisting in JavaScript

getName();
console.log(x);
var x = 8;
function getName() {
 console.log("Saikiran Gonugunta");
}

output:

Saikiran Gonugunta

this may be an error in other programming languages as methods and variables are referenced before defined. this is due to the memory creation phase of JS which assigns a value to variables and functions. however, it may lead to an error ReferenceError if we remove var x = 8;

Hoisting is a concept that enables us to access values of variables and functions even before initialising/assigning value without getting an error and this is happening due to the memory creation phase of the Execution Context.

did you know? what is the shortest javascript program?

it's an empty file. though its empty javascript creates GEC with window object for you

difference between undefined and not defined.

in case of undefined memory is allocated for a variable. not defined means no memory is allocated.

let & const in JS, Temporal Dead Zone

console.log(a); // ReferenceError: Cannot access 'a' before initialization
console.log(b); // prints undefined as expected
let a = 20;
console.log(a); // 20
var b = 35;
console.log(window.a); // undefined
console.log(window.b); // 35

in the above program, it looks like a is not hoisted but it is. but when declaring with let it is stored in a separate memory object called script. which can be only accessed after assigning a value to it.

Temporal Dead Zone in the case of let, duration, since the let variable is hoisted and is initialized, is called Temporal Dead Zone. this cannot be accessible globally during this period

Reference Error is thrown when variables are in a temporal dead zone.

const lets you initialize a variable only once. it has to be initialized during the declaration itself. and is stricter than var and let. assigning a value to a const gives TypeError as it cant be defined a another value

use const wherever possible, or let since let is stricter than var

Block Scope and Shadowing

{
    var a = 10;
    let b = 20;
    const c = 30;
}
console.log(a); // 10
console.log(b); // Uncaught ReferenceError: b is not defined

Here let and const are hoisted in a Block scope, While, var is hoisted in Global scope. hence variable access is permitted within the block. this may lead to confusion with var hence let is preferred over var

Shadowing

var a = 100;
{
    var a = 10; // same name as global var
    let b = 20;
    const c = 30;
    console.log(a); // 10
    console.log(b); // 20
    console.log(c); // 30 
}
console.log(a); //displays 10. instead of expected 100

• this happens only in the case of var. and its as expected for let and const

Save this blog as I will be adding more concepts that will help for interview preparation. will be adding callbacks,setTimeout(),closures,Asynchronous JavaScript & EVENT LOOP