What is the difference between normal function and arrow function in Javascript?

Normal functions and arrow functions are two types of functions available in JavaScript. They have some differences in terms of their syntax, 'this' binding, and the arguments object.

Difference:

The main difference in the way normal functions and arrow functions are defined is the use of the 'function' keyword for normal functions and the '=>' operator for arrow functions.

Here is an example of a normal function definition:

function add(a, b) {
  return a + b;
}

And here is an example of an arrow function definition:

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

'this' binding:

In normal functions, the value of 'this' is determined by how the function is called. This is known as dynamic binding.

In arrow functions, 'this' is lexically scoped, meaning it takes on the value of the surrounding context's 'this' value. This means that the value of 'this' is determined by the surrounding code, rather than by how the function is called.

Here is an example of dynamic binding in a normal function:

const obj = {
  name: 'John',
  greet: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

obj.greet(); // Output: "Hello, my name is John"

In the example above, the value of 'this' inside the 'greet' function is determined by the object that the function is called on (in this case, 'obj').

Here is an example of lexical scoping in an arrow function:

const obj = {
  name: 'John',
  greet: () => {
    console.log(`Hello, my name is ${this.name}`);
  }
};

obj.greet(); // Output: "Hello, my name is undefined"

In the example above, the value of 'this' inside the 'greet' function is determined by the surrounding context, which in this case is the global scope. Since there is no 'name' property in the global scope, the output is 'undefined'.

'arguments' object:

The 'arguments' object is an array-like object that is available inside normal functions to access the arguments passed to the function. It is not an actual array, but it has some of the same properties (such as 'length') and can be accessed like an array (using square brackets).

Arrow functions do not have their own 'arguments' object and cannot access it. If you need to access the arguments passed to an arrow function, you can use the rest operator (...) to do so.

Here is an example of using the 'arguments' object in a normal function:

function sum() {
  let total = 0;
  for (let i = 0; i < arguments.length; i++) {
    total += arguments[i];
  }
  return total;
}

console.log(sum(1, 2, 3)); // Output: 6

And here is an example of using the rest operator in an arrow function:

const sum = (...args) => {
  let total = 0;
  for (let i = 0; i < args.length; i++) {
    total += args[i];
  }

Naming:

Normal functions can be named, while arrow functions cannot be. This is because arrow functions are anonymous.

Here is an example of a named normal function:

function add(a, b) {
  return a + b;
}

And here is an example of an anonymous arrow function:

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

Immediately Invoked Function Expression (IIFE):

Normal functions can be immediately invoked, while arrow functions cannot be. This is because arrow functions do not have their own 'this' binding, and therefore cannot be immediately invoked.

Here is an example of an immediately invoked normal function:

(function() {
  console.log('Hello, world!');
})();

And here is an example of an arrow function that cannot be immediately invoked:

(() => {
  console.log('Hello, world!');
})(); // This will throw an error

Summary:

To summarize, here is a table that compares normal functions and arrow functions:

	Normal Function	Arrow Function
Definition	function foo() {}	() => {}
'this' binding	dynamic	lexical
'arguments' object	accessible	not accessible
Can be named	yes	no
Can be immediately  invoked	yes	no

Please don't forget to like, share and comment if you like this post. 

Cheers :) 

Happy Coding...