Updated on 08 Sep 2022 | 4 Min Read
By
 

Arrow functions are a great feature added in ES6. ES6 was released in the year 2015. According to my own personal experience, I would prefer to use the arrow function every time I have the chance. This is due to the fact that the codes that use Arrow functions are clear and simple to read when compared with regular functions. Additionally, I am comfortable using the arrow function.

When arrow functions are used in a way regular functions can't be completely replaced by Arrow functions. In some instances, which require regular functions. This means that arrows aren't the solution for all illnesses.

What do you think are the main differences in arrow function and regular operations?

Here are the most significant distinctions:

  • Syntax
  • Arguments that are binding
  • This keyword is used to describe the use.
  • Utilizing a keyword that is new
  • No duplicates of identified parameters

1. Syntax

The functions we define with the function keyword are referred to as regular functions. keyword function keywords are known as regular functions. Regular functions can be defined by two methods:

  • Function declarations
  • Function expressions

// Function declaration
function printHello(name) {
    return `Hey ${name}`;
}
// Function expression
const printHello = function(name) {
    return `Hey ${name}`;
}

The regular function above in terms of an arrow, as the following:

const printHello = (name) => `Hey $`;

Guidelines to be followed when defining an arrow's function.

If a function only takes just one parameter, the parentheses do not have to be mandatory prior to the = symbol. However, the function requires more parameters than it does with parameters. Therefore, parentheses must be used. It is not necessary to put curly braces following using the "=>" symbol when the body of the function is one line of expression. If this is not the case, then curly braces must be used. This is a part of every Javascript interview question.

const add = (a, b) => a + b;

const printHello = name => `Hey $`;

2. "this" keyword

This keyword is used in regular functions. It depends on the context of execution. Arrow functions are not like regular functions

Example:-

let content = {
    title: "javaScript Interview Questions",
    arrowFunction:() => {
        console.log(this.title); // no 'this' binding here
    },
    normalFunction(){       
        console.log(this.title); // 'this' binding works here
    }  
 };
content.arrowFunction();  // undefined
content.normalFunction();  // javaScript Interview Questions

This means that normal functions can be used for object construction, but arrow functions are not able to do so since arrow functions solve this lexically.

3. Using a new keyword

Regular functions that are created with function declarations, expressions, or both, can be called and constructed. Regular functions can be constructed; they can also be called with the new keyword. The arrow functions cannot be called and are not constructible.

function addString (a1, a2, a3) {
    console.log(a1 + a2 + a3)
}
new addString('JavaScript ','Interview', ' Questions');

However, arrow functions cannot be used as constructors functions. They cannot be invoked using the new keyword.

let addString = (a1, a2, a3) => console.log(a1 + a2 + a3);
new addString('JavaScript ','Interview', ' Questions'); 
// TypeError: addString is not a constructor

4. No duplicate named parameters

Arrow functions can never have duplicate named parameters, whether in strict or non-strict mode. For regular functions, we can use duplicated named parameters in non-strict modes.

In normal function, we can do this:

function add(a, a) {
    console.log(a +' the value '+a);
}
add(5, 5); // 5 the value 5

Also Read: Top 20 Advanced JavaScript Questions

In arrow function

const add1 = (a, a) => {
    console.log(a +'---'+a);
}
add1(1,1);
// SyntaxError: Duplicate parameter name not allowed in this context

5. Arguments binding

The Regular function can use Arguments keywords to access the arguments that were passed to it.

let data = {
    showArgument:function(){
      console.log(arguments);
    }  
}
data.showArgument(1,2,3); // output {0:1,1:2,2:3}

Arrow functions do not have an argument binding.

let data = {
    showArgument:()=>console.log(arguments)
}
data.showArgument(1,2,3); // Uncaught ReferenceError: arguments is not defined