4 Most Common JS Questions Asked In An Interview.

1 - What is the scope in javascript.

A Scope in JS is basically a code block that defines the scope for variables declared using let and const. There are three ways in which we can declare a variable in JS- let, const & var. const and let variables are scoped by code blocks, functions, or modules, var variables are scoped only by functions or modules. these variable definitions are block-scoped and cannot be accessed outside of that scope or block. therefore scope is a policy that manages the availability of variables. A variable defined inside the scope is accessible only within that scope, but inaccessible outside.

2- What is event loop.

event-loop.png

Javascript is synchronous in nature but now comes the question of how we can do asynchronous tasks in javascript. the answer is the event loop. but on the back, it uses a stack & queues which gives us the illusion of multi-threading. so there are three parts to the event loop -

Call Stack

This stack is responsible for keeping track of all the functions or operations in line to be executed (because as we know JS is synchronous). so whenever a function is finished that function is popped out of that stack.

Event Queue -

Callback Queue

This is responsible for sending new functions to the track for processing. it is a queue data structure therefore it maintains the correct sequence for the execution of operations.

Microtask Queue -

This is another special queue that gets the operations or functions coming through Promises and Mutations Observer. Whenever an async function is called, it is sent to browser API(these apis are built-in APIs of the browser). consider an example in which setTimeout is executed which is a browser API and processes by browser, therefore, the browser acts as a different thread, and once that is executed it is sent to the event queue(callback queue). then there comes the event loop which constantly checks whether the call stack is empty, if it is empty, new operations are pushed in the call stack from event queue.

3 - Closures In Javascript

These are functions that can access values outside of their own scope. In JavaScript, closures are created every time a function is created, at function creation time. let's take an example to understand this better

function makeAdder(x) {
  return function(y) {
    return x + y;
  };
}

var add5 = makeAdder(5);
var add10 = makeAdder(10);

console.log(add5(2));  // 7
console.log(add10(2)); // 12

so in this function, we have defined a function makeAdder(x), which takes x and returns a new function which takes y and then returns the sum x + y.

in hindsight, makeAdder is a function that takes in one argument and returns the next function.

add5 and add10 are both closures. they share the same function definition but store different lexical environments. In add5's lexical environment, x is 5, while in the lexical environment for add10x is 10.

4 - Hoisting

Hoisting in javascript is a behavior in which all the variables and functions that are declared are moved on to the top of the scope. The scope can be both local and global.

hoistedVariable = 3;
console.log(hoistedVariable);// outputs 3 even when the variable is declared after it is initialized
var hoistedVariable;