Arrow Functions in JavaScript: A Simpler Way to Write Functions

From the previous blog we learnt about functions in JavaScript. Arrow functions are a shorter syntax for writing function expressions in JavaScript.

We already know how normal functions for addition of two numbers looks like.

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

But in case of arrow function, the same function looks much shorter.

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

---

Arrow Functions are Not Declarations, and They are Not Hoisted

Arrow functions are always Expressions and must be assigned to a variable.

As arrow functions are function expression, they are not hoisted and cannot be used before they are defined.

//console.log(hello());  //❌ error ❌  can not be used before definition
const hello= ()=>{
    return "Hello Arrow Function";
}
console.log(hello()); //Hello Arrow Function

---

Arrow functions with No Parameter

const hello= ()=>{
    return "Hello Arrow Function";
}

Arrow functions with One Parameter

If a arrow function has only one parameter, you can omit the parenthesis.

With Parenthesis:

const square= (a)=>{
    return a*a;
}

Without Parenthesis:

const square= a=> a*a;

Arrow functions with Multiple Parameter

In this case, parenthesis are required.

const add= (a,b)=>{
    return a+b;
}
console.log(add(4,6));  //10

---

Explicit Return VS Implicit Return

Arrow function support implicit return to make the code shorter

Explicit Return:

const add = (a, b) => {
  return a + b; //explicitly "return" is used
};

Implicit Return

If the function contains only one expression, we can remove the braces and return keyword.

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

This automatically returns the result.

---

Don't commit these mistakes ever!

// ❌ returns undefined because return is missing
const myFunction = (x, y) => { x * y };

// ❌ SyntaxError: return cannot be used without {}
const myFunction = (x, y) => return x * y;

// ✅ correct (explicit return)
const myFunction = (x, y) => { return x * y; };

// ✅ correct (implicit return)
const myFunction = (x, y) => x * y;

---

Basic Difference: Arrow Function vs Normal Function

Feature	Normal Function	Arrow Function
Syntax	function name(){}	( ) => {}
Code Length	Longer	Shorter
Return	Must use return	Can use implicit return
Modern JS	Older style	Modern ES6 style

Arrow functions are commonly used because they make the code cleaner and more readable.

---

Arrow Functions and the this Keyword

Arrow functions do not have their own this value. They inherit this from the surrounding code.

const person = {
  name: "John",
  greet: function() {
    return this.name;   
  }
};
console.log(person.greet());   //John

Here, for this normal function this refers to the person object.

Using an arrow function as a method often gives unexpected results.

const person = {
  name: "John",
  greet: () =>{
    return this.name;
  }
};
console.log(person.greet());  // undefined

In this case, this does not refer to the person object.

Let's have a quick revision solving some assignment questions.

// 1. Write a normal function to calculate square of a number

function square(num) {
  return num * num;
}

console.log(square(5)); // 25



// 2. Rewrite it using arrow function

const squareArrow = (num) => num * num;

console.log(squareArrow(5)); // 25



// 3. Create an arrow function that returns whether a number is even or odd

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

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



// 4. Use arrow function inside map() on an array

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

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

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