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

What is lexical scope in Javascript?

A lexical scope in JavaScript means that a variable defined outside a function can be accessible inside another function defined after the variable declaration. But the opposite is not true; the variables defined inside a function will not be accessible outside that function.

var x=15;

test();

function test()

{

var y=20;

console.log(x);

}

console.log(y);

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)

JavaScript Use Strict

The "use strict" Directive

The "use strict" directive was new in ECMAScript version 5.

It is not a statement, but a literal expression, ignored by earlier versions of JavaScript.

The purpose of "use strict" is to indicate that the code should be executed in "strict mode".

With strict mode, you can not, for example, use undeclared variables.

All modern browsers support "use strict" except Internet Explorer 9 and lower:

JavaScript Hoisting

In JavaScript, a variable can be declared after it has been used. In other words; a variable can be used before it has been declared.

x=5;

console.log(x)

var x;