What is Arrow and Normal Function in JavaScript?

Arrow Function vs Normal Function in JavaScript

In JavaScript, Arrow Functions and Normal Functions (also called Regular Functions) are two ways to define functions. They differ in syntax and behavior, especially regarding the this keyword.

---

1. Arrow Function (=>)

Introduced in ES6 (2015), Arrow Functions provide a shorter and more readable syntax for writing functions.

Syntax:

javascriptCopyEditconst arrowFunction = (param1, param2) => {
  // Function body
  return param1 + param2;
};

If the function has a single expression, you can omit {} and return:

javascriptCopyEditconst sum = (a, b) => a + b;

Key Features of Arrow Functions:

• No this binding: It inherits this from the surrounding lexical scope (parent scope).
• Cannot be used as constructors: You cannot use new with arrow functions.
• No arguments object: Arrow functions do not have their own arguments object.

Example:

javascriptCopyEditconst user = {
  name: 'John',
  greet: function() {
    const arrow = () => {
      console.log(this.name); // `this` is inherited from `greet` method
    };
    arrow();
  }
};

user.greet(); // John

---

2. Normal Function (Function Declaration / Expression)

Traditional way to define functions in JavaScript.

Syntax:

Function Declaration:

javascriptCopyEditfunction normalFunction(param1, param2) {
  return param1 + param2;
}

Function Expression:

javascriptCopyEditconst normalFunction = function(param1, param2) {
  return param1 + param2;
};

Key Features of Normal Functions:

• Own this binding: this refers to the object that calls the function.
• Can be used as constructors: You can use new with normal functions to create objects.
• Has arguments object: You can access the arguments object inside the function.

Example:

javascriptCopyEditfunction show() {
  console.log(this); // `this` depends on how the function is called
}
show(); // Window (in global scope)

const obj = {
  name: 'Alice',
  greet: function() {
    console.log(this.name);
  }
};
obj.greet(); // Alice

---

Key Differences:

Feature	Arrow Function	Normal Function
this Binding	Inherits from lexical (surrounding) scope	Depends on the caller object (this is dynamic)
arguments Object	Not available	Available
Constructor (new)	Cannot be used as a constructor	Can be used as a constructor
Shorter Syntax	Yes	No

---

When to Use Which?

• Arrow Functions: Best for callbacks, array methods (e.g., map, filter), and inside object methods (when this is inherited).
• Normal Functions: Suitable when you need dynamic this binding or function constructors.

---

Example Summary:

javascriptCopyEdit// Arrow Function
const add = (a, b) => a + b;

// Normal Function
function multiply(a, b) {
  return a * b;
}

Understanding the difference between Arrow Functions and Normal Functions is crucial for handling this in JavaScript effectively.