Arrow Functions in JavaScript : A Simpler Way to Write Functions

Arrow functions were introduced in ES6 it provides a concise way to write a function. But you can't use it in all situations as it is limited . It's good that it is alternative for traditional function expression.

Traditional function method has a big syntax it requiers a function keyword, function, return type body, But in arrow function it is more concise we can declare it literally in one line.

// normal function
function square(n){
    return n * n;
} 
console.log(square(3));  // 9

// Arrow function
const square = (n) => n * n;
console.log(square(3)); // 9

For such execution arrow function are best way.

Arrow functions with one parameter.

Now let's see example with one parameter.

const greet = name => {
  return "Hello " + name;
};

console.log(greet("Divyansh")); // Hello Divyansh

When arrow function has only one parameter you don't need parentheses. Name is single parameter. Parentheses are optional when there is only one parameter. Returns Hello Divyansh.

Arrow function with multiple parameter.

Here let's just see an example with multiple parameter

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

console.log(add(5, 3)); // 8

When you are passing multiple parameters parentheses is required. Because JavaScript needs to clearly understand multiple inputs.

Implicit return vs explicit return.

When writing arrow function there are two ways to return value
1. Implicit return
2. Explicit return.
Let's dive into each one.

1. Implicit return

In JavaScript arrow functions can automatically return values without needing a return keyword, called as Implicit return. It works when function has single expression and result of that function is automatically returned. Here you can skip {} curly braces and return keyword.

const multiply = (a, b) => a * b;
console.log(multiply(4, 5)) // 20

1. Explicit return

In explicit return once you add {} you have to return value. It is used when you have need to execute multiple operation within a function.

const checkEvenOdd = (num) => {
  if (num % 2 === 0) {
    return "Even";
  } else {
    return "Odd";
  }
};

console.log(checkEvenOdd(4)); // Even

Here, the return keyword is necessary because the function body is enclosed in {}, and we need to explicitly return the updated object.

When to use explicit return. => when function has multiple lines, while using if-else, using loops, want a better readability.

Implicit return: Ideal for concise, single-expression functions. Explicit return: Required for functions with multiple statements or a block body.

Basic difference between arrow function and normal function.

• Normal Function.

function greet(name) {
  return "Hello " + name;
}

• Arrow Function.

const numbers = [1, 2, 3, 4];

const squares = numbers.map(num => num * num);

console.log(squares); 
// [1, 4, 9, 16]

It's different example only here we have used .map() method it is array method first we have store the array in numbers and applied a .map method and in it passed arrow function It multiplies each number by itself. Returns a new array with squared values. If you noticed it is implicit return. no used {}.

Syntax: => Normal function: Longer syntax. => Arrow function: Short and modern.

this keyword: => Normal function have there own this keyword. => Arrow function do not have there own this keyword, they inherit this from their surrounding scope.

Hoisting: => Normal functions are hoisted. => Arrrow functions are not hoisted because they are stored in variable.

Hence, here we have covered arrow functions which is simplar way to write a function. I hope this will helpful for you.