Scoping

Question 1

What is JS Scope

Answer 1

The scope is a policy that manages the accessibility of variables.
Scopes of any type can be nested.

3 types of Scope:
Global - A variable declared inside the global scope is named global variable. Global variables are accessible from any scope. Window and document, for example, are global variables supplied by the browser.
Functional/Local - creates every time when the function being called and stays inside the scope.
Block - every time when you call (if, for, while) structures (or any like that with curly braces) it creates a scope. If you use let or const it stays inside the Block scope. But if you use var you can call it after outside the scope.
Lexical scope - everything that is above your active scope.

Variables isolation - You can reuse common variables names (count, index, current, value, etc) in different scopes without collisions.

Question 2

What is JS Hoisting

Answer 2

The JavaScript engine moves the variable and function declarations to the top of your code. This feature is known as hoisting in JavaScript.

Variable hoisting - Variable hoisting means the JavaScript engine moves the variable declarations to the top of the script.
console.log(counter); // undefined
var counter = 1;
However, the first line of code doesn’t cause an error because the JavaScript engine moves the variable declaration to the top of the script.
Code looks like(for JS) -->
var counter;
console.log(counter); // undefined
counter = 1;
The JavaScript engine places the variable counter in the memory and initializes its value to undefined.

The let keyword -
console.log(counter);
let counter = 1;
The JavaScript issues the following error: “ReferenceError: Cannot access ‘counter’ before initialization
The error message explains that the counter variable is already in the heap memory. However, it hasn’t been initialized.
console.log(alien);
let counter = 1;
Notice that if you access a variable that doesn’t exist, the JavaScript will throw a different error: “ReferenceError: alien is not defined

Function hoisting - Like variables, the JavaScript engine also hoists the function declarations. It moves the function declarations to the top of the script.
let x = 20,
    y = 10;

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

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

let x = 20,
    y = 10;

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

Function expressions and arrow functions aren’t hoisted.

Question 3

JavaScript Closures

Answer 3

A closure gives you access to an outer function’s scope from an inner function. They’re used in functional programming.
function outerFunc() {
  let outerVar = 'I am outside!';

  function innerFunc() {
    console.log(outerVar); // => logs "I am outside!"
  }

return innerFunc;
}

const myInnerFunc = outerFunc();
myInnerFunc();

function multiply(a) {
  return function executeMultiply(b) {
    return a * b;
  }
}

const double = multiply(2);
double(3); // => 6
double(5); // => 10

const triple = multiply(3);
triple(4); // => 12

Question 4

Event Loop, Call Stack, Event & Job Queue in Javascript

Answer 4

Two statements in javascript can not be executed in parallel. Execution happens line by line. Each javascript statement is synchronous and blocking.
But there is a way to run your code asynchronously Web API given by the browser makes sure that your code executes after it meets requirements.

For example, if its SetTimeout function it has to meet the time you put in before it can leave the Web API and go to the Event Queue. The time doesnt guarantee the function will be run right after this time it just means it won’t run before.

So how the process looks like :
First, let’s see what we have in our process.
* We have Call Stack - a place where all the processes go first it follows the rule last in first out.
* If there is an asynchronous function like SetTimeout this function will be registered to Web API and stay there until it meets the requirements.
* After the time requirement was met the function will be sent to Event Queue. It will stay there until Stack is empty from other processes.
* Once Stack is ready to process our SetTimeout CallBack the Event Loop will move it from the Event Queue to the Call Stack. And finally, the function will be processed.

There are some rules as well for the process,
Call Stack has a priority before Event Queue, so first, all the processes in Call Stack have to be done before Event Loop will send to Call Stack asynchronous callbacks from the Event Queue.
Once the process inside the Call Stack is done it’s automatically cleaning out of there.
Event Queue follows another rule: first, in first out.
Promises have their own Event Queue that has more priority over regular EQ.
Examples of Asynchronous functions:
* SetTimeOut
* Dom Events like OnClick OnSubmit…

Question 5

Javascript ‘this’ keyword (Context)

Answer 5

In JS context means “this” keyword. “this” refers to the object that the function is executing in.
if the function doesn’t belong to any obj context will be global obj window

Arrow functions work differently. “this” will refer to the lexical/parent context.

We can dynamically change the context of any method by using either call() ,apply()and bind()method. We need this power to change a context to increase reusability.

Call and Apply - you can manually change the context using Call and Apply, they call the function with new context. The only difference between the Call and Apply is how to pass parameters to the actual function.

Bind — it creates a copy of the original function, with locked context that you provided to bind.

Question 6

Object JS

Answer 6

In JavaScript, objects can be seen as a collection of properties. Property values can be values of any type, including other objects. 
A method is a function which is a property of an object.
Property is a characteristic of an object.
example: const a = {
   b: 1,
   c: func() {
      return  1 + 2
   }
}

Question 7

Array JS

Answer 7

First, an array can hold values of different types. For example, you can have an array that stores the number and string, and boolean values.
Second, the length of an array is dynamically sized and auto-growing. 
let fruits = ['Apple', 'Banana']