# JavaScript Interview Preparation Cheat sheet

# Scope In JS

```javascript
let a=4;
console.log(a);
```
In the above code snippet we haven't used any `{ }` to write the code but does this mean that we are not using any scope here NO! code is actually executed in the global execution context.

The `scope` is the current context of execution in which values and expressions are "visible" or can be referenced .

JavaScript has the following kinds of scope

- Global scope 
- Function scope
- Block scope
- Module Scope

## Different Scopes in JavaScript

### Global scope
> global scope is the default scope for all code running inside the JavaScript files.

```javascript
let a=4;
console.log(a);
function sayHi() {
    console.log("Hi");
}
sayHi()
// 4
// Hi
```
The above code snippet shows the global scope in which entire code  is present.

### Function scope

A function creates a scope so that variables declared  inside the function can't be accessed outside the function.

```javascript 
function exampleFunction(){
    let sayHi="Hi";
    const str1="This is a constant";
    var str2="This is a var";
    console.log(sayHi);
    console.log(str1);
    console.log(str2);
}
exampleFunction();
//Hi
//This is a constant
//This is a var
```
```javascript
function exampleFunction(){
    let sayHi="Hi";
    const str1="This is a constant";
    var str2="This is a var";
    console.log(sayHi);
    console.log(str1);
    console.log(str2);
}
exampleFunction();
console.log(sayHi);
console.log(str1);
console.log(str2);
//gives reference error
```

### Block scope

blocks only scope `let` and `const` declarations, but not `var` declarations.

```javascript
{
    var x=1;
}
console.log(x);
```
```javascript
{
    let x=1;
}
console.log(x);
// ReferenceError: x is not defined
```
### Lexical Scope

let's take an example of below code
```javascript
function a(num){
    var b=10;
    c()
    function c(){
        console.log(b,num);
    }
}
a(20)
//10,20
``` 
In the above example code inner function `c()` has the access to the outer function variables This is only called as the lexical scope.
basically lexical scope means whenever execution context is created lexical environment is also created so lexical environment is local memory along with its parents lexical environment

lexical as a term means in hierarchy or in sequence for example in our example above function `c()` is lexical sitting inside function `a()` and inturn `a()` is inside global execution context.

# single thread

Everything in JavaScript happens inside an execution context .You can imagine execution context as the big box and it has two components init.

- Memory component: This is the place where all the variables and functions are stored as the `key: value` pairs there is also a heavy word for this memory component it is know as the `variable environment`

- Code component: This is the place where code is executed one line at time similar to memory component there is also heavy word for the code component know as the `Thread of Execution` 

Diagram for above Explanation is here:

![single-tread.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1662882362083/cE9Z9SL9m.png align="left")

Javascript being single-threaded language simply means it has just one call stack used in executing the instructions in the program

Last In First Out(LIFO) : call stack works on the principle of LIFO where in last program went into the program is executed first and moved out of the call stack.

```javascript
function a(){
    var b=10;
    c();
    function c(){
        console.log(b);
    }
}
a()
```
In the above program when the function `a()` is called the global execution context is created and moved into the `call stack`

when we load above program in debugger inside the dev tools we can see how program execution context looks like below screeshot

![Screenshot (514).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1662890842212/Dy_Qa1LLu.png align="left")

`Anonymous` is global execution context

Take example of below

```javascript
function cube(num){
    let result=Math.pow(num,3);
    return result;
}
var n=2;
var cube2=cube(2);
var cube3=cube(3);
console.log(cube2,cube3);
// gives 8 27
```

Execution process for the above program looks like below


![call_stack.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1662897978058/vTvJZAMOg.png align="left")

# Hoisting

Hoisting in JavaScript means lifting the function declaration and variable declaration  to the top of the scope

```javascript
console.log(fname);
var fname="elon";
// undefined
```
variable declarations are initialized with undefined that are declared with `var` keyword 
basically only variable decalrations are hoisted to the top of the scope

```javascript
greet()
function greet(){
 console.log("hi")
}
// hi
```
surprisingly!!! above code gives the `hi` in the console because as we saw in the above explanation entire function definition reference is stored in the memory thats why we can call the function before its definition.

```javascript
greeting();
// TypeError

var greeting = function greeting() {
    console.log("Hello!");
};
```
By looking at the above example code error it says the `type error` but it doesn't say `Reference Error` bassically it is telling it can able to find the variable `greeting` but it is telling us that we are trying to something with greeitng which is not supposed to be done we are doing  something like `undefined()(var is initialized with undefine)` thats why it says `greeting is not a function` when try to execute.