Arrow Functions in JavaScript Explained for Beginners

JavaScript has many ways to write functions, but arrow functions are one of the most modern and clean ways introduced in ES6.

They help reduce extra syntax and make your code shorter and easier to read.

In this beginner-friendly guide, we’ll understand arrow functions with simple examples.

---

What exactly are Arrow Functions?

Arrow functions are a shorter syntax for writing functions in JavaScript.

Instead of using the function keyword, arrow functions use the => arrow operator.

Example:

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

This does the same job as a normal function but requires less code.

---

Normal Function vs Arrow Function

First let's see how a normal function looks.

Normal Function

function add(a, b) {
  return a + b;
}

Arrow Function

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

Arrow functions remove the function keyword and use =>.

The diagram below shows how a normal function transforms into an arrow function.

• Remove the function keyword

• Add => arrow representing arrow function

• Place parameters before the arrow

• Write the function body after the arrow

---

Basic Arrow Function Syntax

The basic structure of an arrow function looks like this:

const functionName = (parameters) => {
  //code here
};

Example:

const greet = (name) => {

  return "Hello " + name;

};

Arrow Function Syntax Breakdown

Your diagram explains the parts of an arrow function.

Example:

const squared = (n) => n * n;

The diagram highlights each part clearly so beginners can understand what each section does.

---

Arrow Function with One Parameter

If a function has only one parameter, parentheses are optional.

Example:

const square = n => n * n;

Instead of writing:

const square = (n) => n * n;

Both work in the same way.

---

Arrow Function with Multiple Parameters

If there are multiple parameters, parentheses are required.

Example:

const multiply = (a, b) => a * b;

Example usage:

multiply(4, 5); // 20

---

Implicit Return vs Explicit Return

Arrow functions have a feature called implicit return.

Explicit Return

Normal style with return.

const add = (a, b) => {

  return a + b;

};

Implicit Return

If the function has one expression, JavaScript automatically returns it.

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

This is shorter and commonly used.

---

Basic Difference Between Arrow Function and Normal Function

Normal function uses function keyword and is more verbose whereas arrow function uses => arrow symbol and has shorter syntax.

For beginners, the main advantage is cleaner and more readable code. So using arrow function is more feasible.

Using Arrow Function with map()

Arrow functions are commonly used with array methods.

Example:

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

let squares = numbers.map(n => n * n);

Result:

[1,4,9,16]

The arrow function makes the code much shorter.

---

Practice Assignment

As told in previous blog, JS has to be practiced via writing code ourselves. Try these in your browser console.

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

// Arrow function
const squareArrow = num => num * num;

// Even or Odd arrow function
const checkEvenOdd = num => num % 2 === 0 ? "Even" : "Odd";

// Using arrow function in map()
const numbers = [1, 2, 3, 4, 5];
const squares = numbers.map(num => num * num);

console.log(square(5));       
console.log(squareArrow(5));  
console.log(checkEvenOdd(8)); 
console.log(squares);         

Expected Output:

25
25
Even
[1,4,9,16,25]

Conclusion

Arrow functions make JavaScript code - shorter, cleaner, and easier to read

They are widely used in modern JavaScript, React, Node.js, and functional programming.

As a beginner, practicing arrow functions will help you write more modern and professional JavaScript code.