# JavaScript Interview CheatSheet

# JavaScript

> JavaScript is a synchronous single-threaded language.

Single-threaded means javascript can execute only one command at a time. When we say synchronous single-threaded, it means javascript can execute one command at a time and in a specific order. It only goes to the next line when once the current line is executed.

# what does Single-Threaded mean?

Synchronous (or sync) execution usually refers to code executing in sequence. In sync programming, the program is executed line by line, one line at a time. Each time a function is called, the program execution waits until that function returns before continuing to the next line of code.

To put it as an example, you are calling someone and you’re waiting for them to pick up so that you can talk to them. You’re not doing any other thing until they pick up the phone.


# What happens when you run javascript code?

An Execution context is created. This Execution context is created in two phases.

- Creation Phase (or) Memory Phase
- Code Execution Phase

Let us understand these phases by an example code.

```javascript
var n = 5;
function cube()
{
  var result = num*num*num;
  return result;
}

var cube5 = cube(n);
var cube3 = cube(3);
```

## Creation Phase (or) Memory Phase 

In the first phase of execution, javascript will allocate memory space to all the variables and functions. While allocating memory to variables it stores a special value called `undefined`. But in the case of functions, javascript literally stores the whole code of function inside the memory space.


![Screenshot (436).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1662903815473/-HHcWBF31.png align="center")


## Code Execution Phase

Now Javascript runs again the whole code line by line and it executes the code now.

**Note:**
Whenever a new function is invoked, then a new execution context will be created.


![Screenshot (443).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1662904092419/6_iEkSNTW.png align="left")

# Call Stack

The call stack is used by JavaScript to keep track of multiple function calls. Javascript handles everything, to manage the execution context creation, deletion, and control by a stack. This is known as Call Stack.

> Call Stack maintains the order of execution of execution contexts.

Call Stack is also known as 
- Execution context Stack
- Program Stack
- Control Stack
- Runtime Stack
- Machine Stack

![Screenshot (441).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1662897943702/xVjyq0ftn.png align="center")

Every time at the bottom of the call stack we have our global execution context. Whenever a new function is invoked a new execution context will be created. This new execution context will be put inside the stack.


![Screenshot (438).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1662897406154/6siqexYU6.png align="center")

After returning the value of the function, the execution context E1 will be moved out or popped out of the stack and the control goes back to the global execution context.

![Screenshot (441).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1662898027504/dKCuPKZg9.png align="center")

Now the program will be moved to the next line, again when the new function instance is encountered a new execution context will be created in the stack.


![Screenshot (439).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1662898179454/wCr_3SEPA.png align="center")

After the execution of the second function instance, the execution context E2 will be moved out and control will be again given to the global execution context.


![Screenshot (442).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1662898377193/SZe3Ja27S.png align="center")

After the total execution of the program, the global execution context will also get poped out of the stack and we are done with the program.


# Hoisting in JavaScript

Hoisting is a phenomenon in javascript by which you can access these variables and functions even before you have initialized them. 

We can access those variables and functions even before initialization without any error.

Let us understand the hoisting in JS through the below code

```javascript
getName();
console.log(x);
console.log(getName);

var x = 5;
function getName()
{
console.log("Hello World");
}
```

Even before the code starts to execute the memory is allocated to each and every variable and function. 

**output:**
```
Hello World
undefined
f getName( )
{
 console.log("Hello World");
}
```

If we try to access the same variables and functions after the initialization the output will be different.

```javascript

var x = 5;
function getName()
{
console.log("Hello World");
}

getName();
console.log(x);
console.log(getName);
```

**output:**
```
Hello World
5
f getName( )
{
 console.log("Hello World");
}
```

If we write the function as an arrow function in code, then it will start to behave like a variable.


```javascript

getName2();
getName();

var getName = ( ) => {
console.log("Hello World");
}

var getName2 = function( ) {
console.log("Hi");
}
```

**output**

```javascript
getName2 is not a function
getName is not a function
```

# Scope

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.

JavaScript has 3 types of scope:

- Global scope
- Function scope
- Block scope

## Global Scope

This global scope is nothing but any code you write inside javascript which is not inside a function.

```javascript

var a = 5;         ---> global scope

function b( )    ---> global scope
{
   var b = 8;      ---> Not global scope
}
```

If you assign a value to a variable that has not been declared, it will automatically become a global variable.

```javascript
var a = 5;
 y = 10;  ---> automatically becomes global variable
function b(){
        var x = 8;
}
console.log(window.a);
console.log(a);
console.log(this.a);
console.log(y);
console.log(x);
```

Whenever we don't put anything in front of `a` it assumes that it belongs to global space. ( i.e window.a).

**output**

```javascript
5
5
5
10
x is not defined
```

## Function Scope

Each function creates a new scope. Variables defined inside a function are not accessible from outside the function.

```javascript
function a(){
        var x = 8;             // function scope
        let y = 9;              // function scope
        const z = 10;       // function scope
}

console.log(x);
console.log(y);
console.log(z);
```

**output**

```
x is not defined
y is not defined
z is not defined
```

## Block scope

**Block:**

Block is also known as a compound statement. It is used to combine the multiple JS  statements into a group. So that we can use these multiple statements in a place where javascript expects only one statement.

Variables declared inside a `{ }` block cannot be accessed from outside the block.

> `let` and `const` are block scoped.

Block Scope means what all variables and functions that we can access inside the block.

```javascript
{
  var a = 4;
  let b = 5;
  const c = 6;

  console.log(a);
  console.log(b);
  console.log(c);
}

  console.log(a);
  console.log(b);
  console.log(c);
```

**output**

```
4
5
6

10
Reference err - b is not defined
Reference err - c is not defined
```

if we put a debugger on the first line of the above code, we will see that `b`, `c` are created in block scope, and `a` is on the global scope

```
Block Scope:
  b : undefined
  c : undefined

Global Scope:
  a : undefined
```

once the execution of the block is completed, the variables inside the block scope will be gone. So, we cannot access `let` and `const` declarations outside a block.

But we can access the `var` declaration even after the block ends (or) outside the block because the `var` declaration memory is created in global space.

# Closing

I hope that you’ve found this blog on javascript helpful! If you have any questions or feedback, feel free to leave a comment below 😊