Nishok

Javascript interview preparation cheatsheet

Nishok Maharaaj R's photo
Nishok Maharaaj R
·

4 min read

Scope in Javascript

The scope is the current context of execution in which values and expressions are "visible" or can be referenced. If a variable or expression is not in the current scope, it will not be available for use. Scopes can also be layered in a hierarchy, so that child scopes have access to parent scopes, but not vice versa.

There are three types of scope:

  • Global scope: The default scope for all code running in script mode.
  • Block scope: The scope for code running in module mode.
  • Function scope: The scope created with a function.

Global scope:

A variable declared at the top of a program or outside of a function is considered a global scope variable.

let pi = 3.14;

function getPi(){
  console.log("Pi = " + pi);
}

getPi();
// Output : Pi = 3.14

Block scope:

ES6 provides the let and const keywords that allow you to declare variables in block scope. Whenever there is curly brackets {}, it is a block. It can be the area within the if, else, switch conditions or for, do while, and while loops.

function hello() {
        let msg = 'Hello World';
        console.log(msg);
    }
    console.log(msg); // ReferenceError
}

hello();

Function scope:

The variables that you declare inside a function are local to the function. They are called local variables.

function hello() {
    var message = 'Hello';
    console.log(message);
}

hello();

Lexical Scope

Lexical scope also known as static scoping is a convention used with many modern programming languages. It is the ability for a function scope to access variables from its parent scope. In simple words, javascript looks for variables in a way , if it can't find a variable in a local Execution context ,it will look for it in a calling context .And if it didn't find it in its calling context.

let pi=3.14;

function displayPi(){
  console.log(pi);
}
function displayName(){
  let userName = "javascript";
  displayPi();
}
printName();

Single Threading in Jacascipt

Javascript is a single threaded language. This means it has one call stack and one memory heap. As expected, it executes code in order and must finish executing a piece code before moving onto the next.

console.log("one")
setTimeout(() => {
    console.log("two")
}, 3000)
console.log("three")

// Output:
// one
// three
// two

In Javascript, all instructions are put on a call stack. When the stack arrives at setTimeout, the engine sees it as a Web API instruction and pops it out and sends it to Web API. Once the Web API is done with the execution, it will arrive at the call back queue.

The engine checks if the call stack is empty. If it is empty, then we check callback queue which has the instruction setTimeout in it. The callback queue sends it to call back stack and the instruction is executed.

Call Stack

The call stack is used by JavaScript to keep track of multiple function calls. It is like a real stack in data structures where data can be pushed and popped and follows the Last In First Out (LIFO) principle. We use call stack for memorizing which function is running right now. The below example demonstrates the call stack.

const parent = () => {
  console.log("Parent");
  child();
}

const child = () => {
  console.log("Child");
}

parent();

call_stack.png

At start the global execution context in pushed into the stack. Then the parent function is called and pushed into the call stack. Then when the child function is called, the child is pushed into the call stack.

Hoisting

Hoisting is the mechanism which javascript does to move the variables and function declarations to top of the stack before executing them. JavaScript Hoisting refers to the process whereby the interpreter appears to move the declaration of functions, variables or classes to the top of their scope, prior to execution of the code. Hoisting allows functions to be safely used in code before they are declared.

Function Hoisting

Function Hoisting allows to use a function before it is declared in the code.

// Without Hoisting

const display = () => {
  console.log("Javascript Hoisting");
}

display();

Here, since we assume there is no hoisting here, the method can be called only after it has been declared.

// With Hoisting

display();

const display = () => {
  console.log("Javascript Hoisting");
}

With the help of hoisting the method can be called anywhere in the code irrespective of where the function definition is wriiten.

Variable Hoisting

Variables are declared in hoisting which will be undefined. Using the variables before initialization will return undefined.

console.log(pi);
const pi = 3.14;

// Output: undefined
iwritecode