Introduction

In this article, we are going to cover the four important topics which are very important in interview. Topics are Scope, Single Thread, Hoisting and Call stack These are one the common questions which are asked in interviews.

Javascript Scope

What is the scope in JavaScript?

Scope in JavaScript is availability of variable and functions in the some part of the code. Scope is nothing but the visibility of the variables.

Different types of scope in JavaScript

1. Global Scope

2. Local Scope

3. Block Scope

1. Global Scope:

The global Scope in JavaScript the variables declared at the top of the program and outside of the function. These variables are accessible from any part of code.

For example

2. Local Scope:

The variable can only be accessed in a function and block. A variable have a local scope or function scope.

For example

3. Block Scope:

The Block Scope is defined in curly brackets { }. Let/const variables gets the block scope.

For example

Hoisting in JavaScript:

In JavaScript, hoisting is a process of we can access the variable and functions before we can declared it.

So dig deeper, everything in JavaScript happens inside a global execution context.

Execution of code is divided into two phases: Memory Allocation Phase and Execution (Code) phase.

In the memory allocation phase, JavaScript engine allocates memory to variables and functions. In the case of variables, undefined is assigned as a placeholder while in the case of functions entire code of the function is stored.

In the code execution phase, code gets executed line by line. Undefined which was a placeholder is now replaced by the values of the variables.

Every time a function is invoked, a new execution context is created. After the function is executed completely, control returns to the location from where the function is invoked.

console.log(a)
var a = 10

So in above example, console.log(a) have been called before declaring the variable.

since this code is run first in memory allocation phase and then in execution phase, In memory allocation phase(scans all the variables and function definations), undefined is added as placeholder to variable a and in execution phase, since a is undefined while executing the console.log statement, it will print "undefined" for variable a.

JavaScript a Single threaded or multithreaded ?

JavaScript is Single threaded, synchronous, Interpreter and scripting programming language.

JavaScript is a single-threaded language because JavaScript code is execute the line by line.

It means that one line of code is executed at a time and next line of code will not be executed until the previous line of code finishes its work.

But JavaScript behave like Asynchronous programming language in some condition like setTimeout(),promises.

In this case, it will not wait for setTimout() to finish its work. It handovers the task to web API, JS engine will continue to execute next line of code. ( This will be explained in upcoming event loop article)

Call Stack in JavaScript

Call Stack is used in JavaScript to keep track of all multiple function calls. The data can be pushed, popped and follows in the last in first out(LIFO).

To dig deeper, when ever function is invoked, a new execution context is created . This execution context is pushed inside call stack. So new execution context is created and pushed into the call stack whenever function is invoked.

After the function finishes execution, the execution context is taken out of the call stack.

Example

Call stack will look like below

After printing in console, console.log statement is popped out from stack, it will return to original called which is function 2.

function 2 will be popped from stack and it will return to function 1 then function 1 is popped out from it.

Conclusion:

These concepts are very important to master the javascript. In this article, we have learnt about Call Stack, Hoisting , Scopes and Single Threaded Javascript. This article will be updated with more questions. Please watch this space.