SCOPE

The scope of a variable determines where the variable can be used. The scope is broadly divided into two - global scope and local scope.

The global scope is the outermost scope in JavaScript. Any variable declared in global scope can be accessed anywhere.

\\ script.js

let message = "hello"

The variable message is defined in global scope. We can access it anywhere in the document. Apart from the global scope, there are multiple local scopes.

A variabel declared in local scope can only be accessed inside that local scope. That includes any other (local) scope(s) defined inside it.

For the understanding, we can categorize local scopes into 2 types:

Block scope
Function scope

Block scope

In JavaScript, a code block is defined using curly braces {}. Any variable declared inside is in block scope. This applies to if, for, and while statements

if (condition) {
  let a = 20
  console.log(a) // 20
}
console.log(a) // ReferenceError

for (let i = 1; i < 2; i++) {
  const b = 30
  console.log(b) // 30
}
console.log(b) // ReferenceError

It should be noted that the block scope only applies to let and const. Anything declared using var will be in global scope.

while (condition) {
  var c = 50
  console.log(c) // 50
}

console.log(c) // 50

We can create a block scoped variable by simply declaring it inside a code block too.

{
  let message = "hello"
  console.log(message) // hello
}

console.log(message) // ReferenceError

This way we can work with isolated pieces of codes and variables.

Function scope

Any variable declared inside a function is in function scope. It works for var, let, and const.

function test() {
  var a = 20
  let b = 30
  const c = 50

  console.log(a) // 20
  console.log(b) // 30
  console.log(c) // 50
}

console.log(a) // ReferenceError
console.log(b) // ReferenceError
console.log(c) // ReferenceError

Any variable declared inside the function cannot be used in outside of it, to used outside of it, the functions must be declared in global scope (or enclosing block scope).

SINGLE THREADED

If you have been using Javascript for a while then you may come across the phrase that it’s a single threaded language. Javascript engine runs on a V8 engine that has a memory heap and a call stack. JS is a single threaded which means only one statement is executed at a time.

Synchronous (or sync) execution usually refers to code executing in sequence. In sync programming, the program is executed line by line, one line at a time. Each time a function is called, the program execution waits until that function returns before continuing to the next line of code.

To put it in example, you are calling someone and you’re waiting for them to pick up so that you can talk to them. You’re not doing any other thing until they pick up the phone.

CALL STACK

The Call Stack is a structure that records the current position of an executable script. Since JavaScript is a single-threaded programming language, it can only execute a single process or function at a time.

When you create a function call, that call prepended to the top of the stack. Once you return from the function, you pop off the top of the stack, meaning the process is removed from the top of the stack. Stack items are popped from the top. This process works its way downwards through the stack frame until each stack frame is empty.

function log(s) {
    return s;
}

function output() {
    var s = log("hi");
    console.log(s);
}

output();

Explanation

The output() method is executed at the beginning of the script and added as the first item to the call stack.
Within the output() method, a string variable, s, is assigned the value "hi" through the log() method. Since the log() method is the next action performed, it is added to the top of the call stack.
The value passed into the log() method is immediately returned, removing the method, from the call stack, and adding the next action, console.log(s) to the top of the call stack.
console.log(s) is then removed from the call stack since it has executed.
At this point, the script has fully executed and there is nothing remaining in the call stack.

HOISTING

We know that when the function is invoked the new execution context is created for that function, execution phase is divided in to two phases

Creation Phase
Execution Phase

During Creation Phase, all the variables declared with var are set to undefined and function declartion to its original value. When the Execution phase started, if we console the variable before its execution we will get undefined and surprsingly there will be no error, because the variable is hoisted during the creation phase and its has allocated memory before the execution. Similarly, if we console function declaration before its execution we will get whole function as result as it has allocated memory during creation phase. In this way the variable and function declaration are hoisted.

Variable Hoisting

 console.log(name) // we will get result as undefined

var name = "piyush"

console.log(name) // we will get result as piyush

Here, var name is hoisted during the creation phase so when execution phase is started and thread move to the first line var name has already allocated memory as undefined so we get result as undefined, but at line second we set or change the var name to piyush so in next line when we console it we get result as piyush.

Function Declaration Hoisting

 console.log(greetFunc) // we will get result as whole function

function greetFunc() {
       console.log("Hiii Everyone")
}

Here, greetFunc is hoisted during the creation phase so when execution phase is started and thread move to the first line and greetFunc has already allocated memory as its original value so we get result as whole function.

Conclusion:

In this Blog we learned Four major concepts of javascript which are backbone of the language, these concepts are most asked javascript interview questions, in first go it is difficult to understand these concepts but with practise and debugging the code in the browser the concepts gets clearer with time.

piyush'blog