Variable scopes in JavaScript

In JavaScript, there are two types of scopes

1. Global Scope – Scope outside the outermost function attached to window.
2. Local Scope – Inside the function being executed.

Let’s look at the code below. We have a global variable defined in first line in global scope. Then we have a local variable defined inside the function fun().

Code snippet:

let globalLet = "This is a global variable"; 

function fun() { 

  let localLet = "This is a local variable"; 

  console.log(globalLet); // This is a global variable 

  console.log(localLet); // This is a local variable 

} 

fun();

console.log(globalLet); // This is a global variable 

console.log(localLet);

Output

The Difference Between Regular Functions and Arrow Functions

Arrow function — also called fat arrow function— is a new feature introduced in ES6 that is a more concise syntax for writing function expressions. While both regular JavaScript functions and arrow functions work in a similar manner, there are certain differences between them.

1. Syntax

The arrow function example above allows a developer to accomplish the same result with fewer lines of code and approximately half the typing.

Curly brackets aren’t required if only one expression is present. The above example can also be written like this:

let add = (x, y) => x + y;

If there’s only one argument, then the parentheses are not required either:

let squareNum = x => x * x;

What if there are no arguments?

let sayHi = _ => console.log(“Hi”);

2. Arguments binding

Arrow functions do not have an arguments binding. However, they have access to the arguments object of the closest non-arrow parent function. Named and rest parameters are heavily relied upon to capture the arguments passed to arrow functions.

In case of a regular function:

let myFunc = {  
 showArgs(){ 
  console.log(arguments); 
 } 
}; 
myFunc.showArgs(1, 2, 3, 4);

In case of an arrow function:

let myFunc = {  
  showArgs : () => { 
  console.log(...arguments); 
 } 
}; 
myFunc.showArgs(1, 2, 3, 4);

3. Use of this keyword

Unlike regular functions, arrow functions do not have their own this. The value of this inside an arrow function remains the same throughout the lifecycle of the function and is always bound to the value of this in the closest non-arrow parent function.

4. Using new keyword

Regular functions created using function declarations or expressions are constructible and callable. Since regular functions are constructible, they can be called using the new keyword.

However, the arrow functions are only callable and not constructible, i.e arrow functions can never be used as constructor functions. Hence, they can never be invoked with the new keyword.

let add = (x, y) => console.log(x + y);new add(2,3);

5. No duplicate named parameters

Arrow functions can never have duplicate named parameters, whether in strict or non-strict mode.

It means that the following is valid JavaScript:

function add(x, x){}

It is not, however, when using strict mode:

'use strict';
function add(x, x){}
// SyntaxError: duplicate formal argument x

With arrow functions, duplicate named arguments are always, regardless of strict or non-strict mode, invalid.

(x, x) => {}
// SyntaxError: duplicate argument names not allowed in this context

Javascript Var and Let for loop Interview question

var:

Here var keyword has local scope and printing 11 after for loop.

for( var i=0; i<=10; i++)

{

console.log(i)

}

console.log(i)

Let

let keyword has blocked scope. Hence it gave error in below code

for( let j=0; j<=10; j++)

{

console.log(j)

}

console.log(j)