# JavaScript  Interview Quick Overview

Javascript is the soul of web development and trying to understand some concepts might leave you confused. In this article, we tried to clear some of the core concepts that are asked in the interviews. So let's dive straight into it.

# Scope

The scope is the accessibility of variables, functions, and objects in some particular part of your code during runtime. In other words, scope determines the visibility of variables and other resources in areas of your code.
Scopes are layered in a hierarchy, so the child has access to the parent's scope but not the other way around. 

***Think of it as the relationship between child and parent, the child can ask or take an ice cream or chocolate from the parents but not the other way around (I mean you can but...)***

This example should give you a better understanding. Let's dive into the different types of scope in Js

### What is a Global Scope?

Global scope is the default scope for running all the code in js and everything runs in this scope.
```js
let globalVariable = 'test1'

function test() {
//some code
}
```
In the above example the `globalVariable` with the value of `test1` is in global scope. In HTML the global scope refers to the `window` Object


- Module Scope: This is the scope of the modules in the code. You must have imported some modules if you have worked with any frameworks of Js

### What is a Function Scope?
Function Scope is the scope created using a function
```js
function test() {
let number = 45
console.log(number)// this will print the number 45 when the function is called
}
test()
console.log(number) //this will throw an error of the number is not defined
```

In the above example, you can see we cannot access the variables from outside the function if they are declared inside the function. But `functions` inside the `function test()` can access the variables of the parent function. Sometimes it is also referred to as Lexical scope.

### How do let and const act in terms of scope?

There are `let` and `const` which work in `block scope`. 

Block Scope It is a scope created by opening `{` and  closing with `}`

```js
{
    let num = 25
    const tea = 'tasty'
    console.log(num) // 25
    console.log(tea) // tasty
}
console.log(num) // num is not defined
console.log(tea) // tea is not defined
```
There is another keyword called `var` which has a function or global scope but it is not advisable to use this `var` keyword for declarations.

### What is a scope chain?

Js engine uses a scope to find the exact location or accessibility of the variables and that particular process is called Scope chain. It means that one variable has a scope used by another variable or function having another scope.


# Single Thread

Those of you who have been working with Js for a while would have come across the term called Single Thread. 
This term is just used to refer to a way javascript reads code which is one or single line at a time. Javascript is a language that runs one line of code at a time and waits until that line is complete and is ok and moves to the next line. 

If the line needs time to execute it moves to the next line by default but to stop if from moving we can use `async/await` and wait until the current line is executed completely. We might have to do this because the results of the current line might be required for future lines of code.
This happens because Javascript uses something called call stack which we will discuss in the next section

# Call Stack

If you know the Data Structure of stack which follows LIFO, call stack is works just like that. However if you don't know the Data Structure Stack worry not, we got you covered.

### Explain call stack.

Imagine a pile of books, a very tall pile of heavy books. If you try to get something at the bottom it will be very difficult and you might end up crashing the tower of those heavy books. So what do you do? You take the book on top and remove it and keep doing this until you reach your desired book. Same thing is happening in call stack. The term `LIFO` stands for `Last In First Out`, which simply means the book *you kept last* on the top of the pile needs to *go out first*

```js
function A(){
    B()
    console.log(`I am Function A`)
}
function B(){
    C()
    console.log(`I am Function B`)
}
function C(){
    console.log(`I am function C`)
}
A()
```

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

Now in the above example you can see the `function C` ran first then `function B` and then finally `function A`. Image below explains this further.

![2.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1662889875083/isJxfxyew.png align="left")

The blocks in the above image are functions that were pushed into the call stack. 

- First the program was scanned and it saw only `function A` is being called so it went to `Function A`
- In `Function A` it saw the call for `Function B` before the `console.log` could execute so it went to `Function B` and added it in the call stack, and from there to `Function C` and added it to the call stack. 
- Entire functions are loaded and stacked  on top on one another and so we execute the one at the top, In this case its `Function C`.
- After the execution of `Function C`, the next function in the call stack was `Function B` so it went ahead and executed the `console.log` there.
- And finally, it executed the last function remaining in the call stack which emptied the call stack.

# Hoisting

JavaScript Hoisitng refers to the process by which the interpreter moves the declaration of functions, variables to the top of their scope before the code execute.

This allows Functions to be safely used before they are declared but variables and classes are hosted differently.

A general rule which helps me to track hoisting process is :

- `Functions are scanned and stored in memory or made available  for future use`
- `Variables are scanned and made undefined`

### Function Hoisting

```js
A(5)
function A(num) {
    console.log('\n')
    console.log(num*num)
    console.log('\n')
}
```

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

As you can see in the example that the function `A()` is being called before the declaration. When the Javascript interpreter scanned the program it saw a function `A()` and it knew there is a function called `A()`.
Without hoisting we would have to call the function after it is declared.

### Variable Hoisting

According to the rule mentioned above Variables used before declaration will return `undefined` value

```js
console.log(num)
var num  = 9
num = 8*8
console.log(num)
```

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

In the above example you can see the when we use variable before declaration it returns `undefined`. After which we declare it and give it a value of `9` and then change that value to `8*8` and `console.log` the value which returns 64 which is the result of `8*8`.

This is example case but if we use `let` instead of `var`, it would throw an error on the first line saying `num is not defined`