Javascript Interview Preparing Cheatsheet

Javascript is a most popular scripting language with frameworks and libraries like react and angular its popularity has grown, Javascript is one of the most common scripting language that is required for a full-stack developer, keeping this popularity in mind we at great learning have come up with this article on javascript interview preparation So before we get started I have something exciting for you If you are finally a student or a fresh grad with less than one year of job experience in javascript great learning bring to you with this article So lets start and look at something called scope inside javascript

Types of Scope

Lexical-Scope
Dynamic-Scope
Block-Scope
Scope-Chain

Anything return inside the curly {.....}bracket called scope, If I declare anything like { let x= 2} and if come out do console.log(x) and trying to access x , what it will give me ERROR because that x is only accessible inside two {..} curly bracket, there is nothing outside to pass in console. so in simple term what does scope means where to look for things, what kind of things all the variable that we are assigning.

Lets understand with small example :

if(){
  let x = 4;
console.log(x);
}

If it is inside the if condition as above example so what is the scope for that is If() because we can't access x outside the if scope.

1. Lexical-Scope

So when you look at the program you are looking at the lexical structure when the program actually runs execution can jump around consider the following example and understand how lexical scoping works For example :

// we will declare two function

function lex1(){
  console.log("function one");
}

// declare second function
function lex2(){
  console.log("function two");
}

// calling random functions
lex2(); // return function two
lex1();  // return function one

Lexical function in javascript means that a variable define outside a function can be accessible inside another function defined after the variable declaration. consider the following example :

// declare variable x
const x = 4;

// declare function
function lexifunc(){
console.log(x);
console.log(y);
}  

// declare y variable
const y = 5;

// call function
lexifunc();

So this program execute top to bottom but when you call the function we already declare the variable so here we did not specify any scope to the variable you can access it inside of the function so here we first declare x and y variable then call the function right

But if you declare a variable after the function invoke you will get an ERROR message on the console the reason behind is when you call the function you are accessing the variable without declaring it.

2. Dynamic-Scope

Dynamic scope of no use In javascript , It does not follow the fundamental of dynamic scope

3. Block-Scope

ES6 introduced let and const variables. With that, it introduced the block scope. Block scope means that the variables defined inside a code clock {} can only be used inside it.

For example, a variable created inside an if statement or for loop can only be accessed within that code block. Same as function scope, it is not accessible outside of the block scope.

While let and const are block scoped, the variables defined with var have their scope limited to the current function scope or the global scope.

4. Scope-Chain

Let's continue understand what is the scope chain in Javascript. Each new function in Javascript creates its own environment called scope. The scope holds the variable that it defines and are accessible within the functions.

var scopech = “Global scope in Javascript”;
function mid( ) {

    var locl1 = “Local scope”; 

    function locl2() { 
        var chain = ‘making chain with all’
        console.log(scopech);
        console.log(locl1);
        console.log(chain);
    }

    locl2();
}
mid();

Finally, the locl2 function is displaying all the variables, this works with the help of the Scope Chain in Javascript. The locl2 can access the variables of mid function that’s why we call this environment as a lexical environment.

Single Thread execution in JavaScript

Javascript is asynchronous single threaded programming language, asynchronous means one by one code will execute means line by line.

Everything in Javascript happens inside an Execution Context

You can assume that the execution context is a large container, which is called when the browser wants to run js code. There are two components in this container:

Scan variable environment component
Code component

1. Scan variable environment component

The memory component is also called variable environment. In the memory component, variables and functions are stored in the form of key-value pair

Code component

In the code component, the code will be executed line by line. The code component also has an alias called execution thread

JavaScript is asynchronous single-threaded language. Because it can only execute one command in a specific order at a time.

var a = 2;
var b = 4;

var sum = a + b;

console.log(sum);

In this code, two variables a and b are initialized, and then the added value of a and b is assigned to the variable sum. Let's take a look at how this code is executed.

Memory creation

In the memory creation phase, js scans all codes and allocates memory for variables and functions. For variables, they will be stored as undefined during the variable creation phase. As for the function, js will retain the entire function code, which will be mentioned in the following example.

function called in the execution context

var n = 2;

function square(num) {
 var ans = num * num;
 return ans;
}

var square2 = square(n);
var square4 = square(4);

In the code execution stage, js assigns a value of 2 to the variable a, and then encounters a function.A new execution context.

After the allocation is completed, the code execution phase starts, and the value 2 of n at this time is allocated to num, and then the value is allocated to ans after the square is calculated, and then the value is returned, and then allocated to square2. After the function returns, it will immediately destroy its execution context.

Call stack

When calling a function in js, js will create an execution context. When the function is nested, the execution context will become very complicated. js manages the creation and deletion of execution contexts through the call stack

function a() {
    function insideA() {
        return true;
    }
    insideA();
}
a();

n the above code, a function a is created, and a function inside a that returns true is called in the a function. Let's analyze the running process of this code below

- js creates a global execution context,
- After the function is called, a new execution context (second) is created
- The code that executes the second execution context is to call the function insideA
- Then create a new execution context (third),
- Begin to destroy the third, second, and global execution contexts in turn.

JavaScript Hoisting

When the JavaScript engine executes the JavaScript code, it creates the global execution context. The global execution context has two phases:

Creation
Execution During the creation phase, the JavaScript engine moves the variable and function declarations to the top of your code. This is known as hoisting in JavaScript.
Every functions and variable are hoisted in Javascript.
The function will be defined before the execution phase starts.
Variables are set up to undefined
Variables will be defined in the execution phase

console.log(counter); //  undefined
var counter = 1;

In this example, we reference the counter variable before the declaration. Technically, the code looks like the following in the execution phase: var counter;

console.log(counter); // undefined counter = 1;

Function hoisting

let x = 20,
  y = 10;

let result = add(x, y); 
console.log(result); //  30

function add(a, b) {
  return a + b;
}

Output: 30

rajnish sharma's blog