Arrow Functions in JavaScript

Hey guys , in this article we learn everything about the arrow function in js, how it is different from the normal function expression. so, let start.

What Are Arrow Functions?

Arrow functions are a shorter and cleaner way to write functions in JavaScript. They were introduced in ES6 (ECMAScript 2015) to make function syntax simpler and more readable. Instead of using the function keyword, arrow functions use the arrow (=>) syntax.

Example -

// normal function expression. 
function add(a, b) {
  return a + b;
}

// arrow function expression
const add = (a, b) => {
  return a + b;
};

Both functions perform the same task, but the arrow function version is shorter and modern.

Arrow Function syntax

() => expression

param => expression

(param) => expression

(param1, paramN) => expression

() => {
  statements
}

param => {
  statements
}

(param1, paramN) => {
  statements
}

Converting function Expression to Arrow function

// Traditional anonymous function
(function (a) {
  return a + 100;
});

// 1. Remove the word "function" and place arrow between the argument and opening body brace
(a) => {
  return a + 100;
};

// 2. Remove the body braces and word "return" — the return is implied.
(a) => a + 100;

// 3. Remove the parameter parentheses
a => a + 100;

// Traditional anonymous function
(function (a, b) {
  return a + b + 100;
});

// Arrow function
(a, b) => a + b + 100;

const a = 4;
const b = 2;

// Traditional anonymous function (no parameters)
(function () {
  return a + b + 100;
});

// Arrow function (no parameters)
() => a + b + 100;

Implicit Return vs Explicit Return

When we use {}, we must use the return keyword.

// explicit return
const add = (a, b) => {
  return a + b;
};

// this same arrow function can be converted to something less.
// implicit return
const add = (a,b) => a + b;

Conclusion