You have probably used the regular or arrow functions at least 100 times, but do you know what the difference is between these two functions? Do not worry; I got covered in this article.

First of all, let's talk about what functions.

A function is a block of code designed to perform a specific task. You can use the same code many times with different arguments to produce different results.

Let's talk about the difference between regular functions and arrow functions.

1. Syntax

The arrow function syntax is much shorter as compared to the regular function. In the arrow function, curly brackets aren’t required if only one line of code is present. If there is only one argument, then the parentheses are not required.

Let's take an example :

Regular function syntax

function sum(x,y){
return x + y
}
console.log(sum(2,3));

Arrow function syntax

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

Arrow function syntax with one arguments

let sum = x => x; console.log(sum(2));

2 . Hoisting

Hoisting in JavaScript is a behavior in which a function or a variable can be used before a declaration. The regular function can be accessed before you have initialization. but in the case of the arrow function, we don't access the function before you have initialization. If you access the arrow function before you have initialized it, you will get an error.

Let's take an example:

Regular function

sayHello()
function sayHello(){
console.log("Hello world")
}

Arrow function

sayHello()
const sayHello = () =>{
console.log("hello world")
};

3 . Arguments

Arrow functions do not have arguments binding. We do not pass arguments as keywords in the arrow function. However, they have access to the arguments object of the closest non-arrow parent function. Arrow functions can also be used with rest parameters, which allow you to pass an indefinite number of arguments into a function.

Let's take an example :

Regular function

function app(){
console.log(arguments)
}
app(1,2,3,4,5)

Arrow function

const user = () =>{
console.log(arguments)
}
user("sonu")

Arrow function with rest parameters

const user = (...arg) =>{
console.log(arg)
}
user(1,2,3,4,5,)

4 . Constructor function

Before ES6, conductor functions were widely used to make a blueprint of an object. but today we use the class keyword, which is introduced in the ES6 version. We can create a constructor function in a regular function very easily, but in the case of the arrow function, if you create a constructor function, you will get an error.

Let's take an example

Regular function

function User(name,lastName){
this.name = name;
this.lastName = lastName;
}
const user = new User("sonu","sahu");
console.log(user)

Arrow function

const User = (name,lastName) =>{
this.name = name;
this.lastName = lastName;
}
const user = new User("sonu","sahu");
console.log(user)