15 Arrow Fn vs Normal Fn

Arrow functions and normal functions in JavaScript have some differences in syntax and behavior.

• It's important to note that both arrow functions and normal functions have their own use cases,
• and the choice between them depends on the specific requirements of your code and the behavior you desire.

1. Syntax

• Arrow functions have a concise syntax with a fat arrow (=>) between the parameter list and the function body.
• Normal functions have the function keyword followed by a name, parameter list in parentheses, and the function body enclosed in curly braces.

// Arrow function
const arrowFunction = (param1, param2) => {
  // function body
};

// Normal function
function normalFunction(param1, param2) {
  // function body
}

2. Binding of 'this'

• Arrow functions do not have their own 'this' context. Instead, they inherit the 'this' value from the surrounding scope, also known as lexical scoping.
• Normal functions have their own 'this' context, which is determined by how the function is called. The value of 'this' is dynamically assigned when the function is invoked.

// Arrow function
const obj = {
  name: 'John',
  sayHello: () => {
    console.log(`Hello, ${this.name}!`);
  }
};
obj.sayHello(); // Output: Hello, undefined!

// Normal function
const obj = {
  name: 'John',
  sayHello: function() {
    console.log(`Hello, ${this.name}!`);
  }
};
obj.sayHello(); // Output: Hello, John!

3. Arguments object

• Arrow functions do not have an 'arguments' object. If you need access to the arguments passed to an arrow function, you can use the rest parameter syntax ('...args') instead.
• Normal functions have an 'arguments' object, which is an array-like object that holds the arguments passed to the function.

// Arrow function
const arrowFunction = (...args) => {
  console.log(args);
};
arrowFunction(1, 2, 3); // Output: [1, 2, 3]

// Normal function
function normalFunction() {
  console.log(arguments);
}
normalFunction(1, 2, 3); // Output: [1, 2, 3]

4. Constructor

• Arrow functions cannot be used as constructors. They lack the prototype property and do not have their own 'this' binding, preventing them from being used with the 'new' keyword.
• Normal functions can be used as constructors to create new objects. When invoked with 'new', a new instance is created, and the 'this' value refers to the newly created object.

// Arrow function
const ArrowConstructor = () => {
  this.prop = 'value';
};
const obj1 = new ArrowConstructor(); // Throws an error: ArrowConstructor is not a constructor

// Normal function
function NormalConstructor() {
  this.prop = 'value';
}
const obj2 = new NormalConstructor(); // Creates a new object successfully

5. Use of 'return'

• Arrow functions have an implicit return. If the function body consists of a single expression, that expression is automatically returned without the need for an explicit 'return' statement.
• Normal functions require an explicit 'return' statement to return a value. If no 'return' statement is specified, the function returns 'undefined'.

// Arrow function
const arrowFunction = (x, y) => x + y;
console.log(arrowFunction(3, 4)); // Output: 7

// Normal function
function normalFunction(x, y) {
  return x + y;
}
console.log(normalFunction(3, 4)); // Output: 7