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

At first, it may look a little strange.

Where is the function keyword?

Why is there an arrow =>?

And why does this style look so short?

That is exactly what arrow functions are for.

Arrow functions are a shorter and cleaner way to write functions in JavaScript. They help reduce boilerplate and are very commonly used in modern JavaScript, especially in React and other modern codebases.

In this blog, we will learn:

• what arrow functions are

• basic arrow function syntax

• arrow functions with one parameter

• arrow functions with multiple parameters

• implicit return vs explicit return

• the basic difference between arrow functions and normal functions

We will keep the examples very simple and beginner-friendly.

Let’s begin.

What are arrow functions?

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

They let us write the same logic with less code.

For example, look at this normal function:

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

Now look at the same function written as an arrow function:

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

Both do the same job.

The arrow function version is more compact and is widely used in modern JavaScript.

Why arrow functions are useful

One of the main reasons arrow functions are popular is that they reduce boilerplate.

Let us compare.

Normal function

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

Arrow function

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

Both functions work the same way, but arrow functions often look shorter and cleaner.

This becomes even more useful when writing small functions.

Basic arrow function syntax

Here is the basic syntax of an arrow function:

const functionName = (parameters) => {
  return value;
};

Let us break it down:

• const stores the function in a variable

• functionName is the name of the function

• (parameters) are the input values

• => is the arrow

• {} contains the function body

• return sends back the result

Example

const multiply = (a, b) => {
  return a * b;
};

console.log(multiply(2, 3));

Output

6

Arrow function syntax breakdown

const multiply = (a, b) => {
  return a * b;
};

Visual breakdown

const multiply = (a, b) => {
      |           |      |
      |           |      └── arrow
      |           └──────── parameters
      └──────────────────── function name

Another simple view

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

greet   → function name
name    → parameter
=>      → arrow function symbol
return  → sends value back

Arrow functions with one parameter

If an arrow function has only one parameter, you can write it with or without parentheses.

With parentheses

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

console.log(square(4));

Without parentheses

const square = num => {
  return num * num;
};

console.log(square(4));

Output

16

Both are valid.

For beginners, using parentheses is often easier to read at first.

Example with greeting

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

console.log(greet("Yogayata"));

Output

Hello, Yogayata

Arrow functions with multiple parameters

If there are multiple parameters, parentheses are required.

Example

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

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

Output

8

Another example

const introduce = (firstName, lastName) => {
  return "Hello, " + firstName + " " + lastName;
};

console.log(introduce("Yogayata", "Verma"));

Output

Hello, Yogayata Verma

Converting normal functions into arrow functions

This is one of the easiest ways to understand arrow functions.

Let us convert some normal functions into arrow functions step by step.

Example 1: Addition

Normal function

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

Arrow function

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

Example 2: Greeting

Normal function

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

Arrow function

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

Example 3: Square of a number

Normal function

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

Arrow function

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

Normal function to arrow function transformation

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

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

What changed?

1. Removed the "function" keyword
2. Added "=" after the function name
3. Added "=>" before the function body
4. Kept the same logic

Another quick transformation

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

↓ becomes ↓

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

Explicit return in arrow functions

An explicit return means you write the return keyword yourself.

Example

const subtract = (a, b) => {
  return a - b;
};

console.log(subtract(10, 4));

Output

6

In this example:

• curly braces are used

• return is written clearly

• this is called explicit return

This style is useful when the function body has more than one line or when you want the logic to be very clear.

Implicit return in arrow functions

If an arrow function has only one expression, you can skip:

• the curly braces

• the return keyword

JavaScript will automatically return the result.

This is called implicit return.

Example

const subtract = (a, b) => a - b;

console.log(subtract(10, 4));

Output

6

This is the shorter version of the previous example.

Compare both

Explicit return

const multiply = (a, b) => {
  return a * b;
};

Implicit return

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

Both work the same way.

Explicit return vs implicit return

Let us understand this clearly.

Explicit return

Use curly braces and write return.

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

Implicit return

No curly braces and no return.

const greet = (name) => "Hello, " + name;

Important rule

If you use curly braces {}, you usually need to write return.

If you remove the curly braces, JavaScript can return the value automatically.

Simple comparison

Explicit return:
(param) => {
  return value;
}

Implicit return:
(param) => value

Example with math

const double1 = (num) => {
  return num * 2;
};

const double2 = (num) => num * 2;

console.log(double1(5));
console.log(double2(5));

Output

10
10

When to use implicit return

Implicit return is great for very small functions.

Good example

const square = num => num * num;

This is short and readable.

Another good example

const sayHi = name => "Hi " + name;

But if the function becomes longer, explicit return is often clearer.

Better with explicit return

const checkNumber = (num) => {
  if (num > 0) {
    return "Positive";
  }
  return "Not positive";
};

So for beginners:

• use implicit return for small one-line functions

• use explicit return for longer logic

Basic difference between arrow function and normal function

For beginners, the most important difference is syntax.

Normal function

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

Arrow function

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

Arrow functions are shorter and look more modern.

They are very common in modern JavaScript code.

Simple comparison table

Keep this simple for now

There are deeper differences too, especially related to this, but you do not need to go deep into that right now.

At the beginner level, focus on:

• syntax

• readability

• writing small functions cleanly

Using arrow functions with map()

Arrow functions are often used inside array methods like map().

Example

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

const doubled = numbers.map((num) => num * 2);

console.log(doubled);

Output

[2, 4, 6, 8]

This is a very common modern JavaScript pattern.

Compare with normal function

Using normal function

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

const doubled = numbers.map(function(num) {
  return num * 2;
});

console.log(doubled);

Using arrow function

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

const doubled = numbers.map((num) => num * 2);

console.log(doubled);

The arrow function version is shorter and easier to read once you get used to it.

More simple examples

Example 1: Double a number

const double = num => num * 2;

console.log(double(6));

Output

12

Example 2: Add two numbers

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

console.log(add(3, 7));

Output

10

Example 3: Greet someone

const greet = name => "Hello, " + name;

console.log(greet("Aman"));

Output

Hello, Aman

Example 4: Check even or odd

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

console.log(checkEvenOdd(8));
console.log(checkEvenOdd(5));

Output

Even
Odd

Practice in browser console

The best way to understand arrow functions is to try them yourself.

Open your browser console and test these:

const square = num => num * num;
console.log(square(5));

const greet = name => "Hello " + name;
console.log(greet("Riya"));

const add = (a, b) => a + b;
console.log(add(2, 8));

Try changing the values and see what happens.

That is the fastest way to get comfortable.

Mini assignment

Now it is your turn.

Step 1: Write a normal function to calculate square of a number

Example idea:

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

Step 2: Rewrite it using an arrow function

Example idea:

const square = num => num * num;

Step 3: Create an arrow function that returns whether a number is even or odd

Example idea:

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

Step 4: Use an arrow function inside map() on an array

Example idea:

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

const doubled = numbers.map(num => num * 2);

console.log(doubled);

Full practice solution

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

const squareArrow = num => num * num;

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

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);

console.log(squareNormal(4));
console.log(squareArrow(4));
console.log(checkEvenOdd(7));
console.log(doubled);

Quick recap

Let us quickly revise.

Arrow functions are:

• a shorter way to write functions

• cleaner for small functions

• common in modern JavaScript

One parameter

const greet = name => "Hello " + name;

Multiple parameters

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

Explicit return

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

Implicit return

const square = num => num * num;

Final thoughts

Arrow functions are one of the most useful features in modern JavaScript.

At first, the syntax may look unusual, but after practicing a few examples, it starts feeling natural.

A good approach is:

1. start with normal functions

2. convert them into arrow functions

3. practice one-parameter and two-parameter examples

4. learn implicit return with very small functions

5. use arrow functions inside map()

Do not worry about advanced topics yet.

First become comfortable with the syntax and readability.

Once that becomes easy, arrow functions will become a natural part of your JavaScript style.

Quick challenge

Try converting these normal functions into arrow functions on your own:

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

function multiply(a, b) {
  return a * b;
}

Then try writing:

• an arrow function for division

• an arrow function for checking if a number is positive

• an arrow function inside map() to add 5 to every number in an array

Practice them in your console before checking any solution.

Conclusion

Arrow functions help make JavaScript cleaner, shorter, and more modern.

They are especially useful for small functions, simple logic, and array methods like map().

Keep practicing with very small examples like:

• square of a number

• greeting a name

• adding two values

• checking even or odd

That is the best way to build confidence.

They help us store multiple values in a single variable, and once you start working with arrays, you quickly realize that you need easy ways to add items, remove items, loop through them, transform them, and calculate results from them.

That is where JavaScript array methods become very useful.

In this blog, we will understand these beginner-friendly array methods:

• push() and pop()

• shift() and unshift()

• map()

• filter()

• reduce()

• forEach()

We will keep the examples simple, practical, and beginner-friendly.

We will also see:

• before and after array state

• traditional for loop vs map()

• traditional for loop vs filter()

• a very basic explanation of reduce()

• small text-based diagrams using plain Markdown

• a practice assignment at the end

Let’s begin.

Why learn array methods?

Imagine you have an array of:

• marks

• product prices

• student names

• tasks

• cart items

You may want to:

• add a new value

• remove a value

• print each value

• create a modified version of the array

• select only certain values

• calculate the total sum

Array methods help us do all of this in a cleaner and easier way.

push() — Add an element to the end

The push() method adds one or more elements to the end of an array.

Example

let fruits = ["apple", "banana"];

console.log("Before:", fruits);

fruits.push("mango");

console.log("After:", fruits);

Output

Before: ["apple", "banana"]
After: ["apple", "banana", "mango"]

Before and after

Before: ["apple", "banana"]
After:  ["apple", "banana", "mango"]

Practical example

Suppose you are building a to-do list app. When a user adds a new task, you can use push().

let tasks = ["Study JavaScript", "Practice coding"];
tasks.push("Revise arrays");

console.log(tasks);

Output

["Study JavaScript", "Practice coding", "Revise arrays"]

pop() — Remove an element from the end

The pop() method removes the last element from an array.

Example

let fruits = ["apple", "banana", "mango"];

console.log("Before:", fruits);

fruits.pop();

console.log("After:", fruits);

Output

Before: ["apple", "banana", "mango"]
After: ["apple", "banana"]

Before and after

Before: ["apple", "banana", "mango"]
After:  ["apple", "banana"]

Practical example

You can think of pop() like removing the most recent item from a list.

unshift() — Add an element to the beginning

The unshift() method adds one or more elements to the beginning of an array.

Example

let colors = ["blue", "green"];

console.log("Before:", colors);

colors.unshift("red");

console.log("After:", colors);

Output

Before: ["blue", "green"]
After: ["red", "blue", "green"]

Before and after

Before: ["blue", "green"]
After:  ["red", "blue", "green"]

Practical example

This is useful when you want to add the newest item at the top, like a latest notification.

shift() — Remove an element from the beginning

The shift() method removes the first element from an array.

Example

let colors = ["red", "blue", "green"];

console.log("Before:", colors);

colors.shift();

console.log("After:", colors);

Output

Before: ["red", "blue", "green"]
After: ["blue", "green"]

Before and after

Before: ["red", "blue", "green"]
After:  ["blue", "green"]

Practical example

This is useful in queue-like situations where the first item should be removed first.

forEach() — Do something for every element

The forEach() method runs a function once for every element in the array.

It is useful when you want to perform an action like printing values.

Example

let numbers = [10, 20, 30];

numbers.forEach(function(num) {
  console.log(num);
});

Output

10
20
30

Practical example

Suppose you want to greet every student in an array.

let students = ["Aman", "Riya", "Kunal"];

students.forEach(function(student) {
  console.log("Welcome " + student);
});

Output

Welcome Aman
Welcome Riya
Welcome Kunal

Important point

forEach() is used when you want to do something with each item.

It does not create a new array like map().

map() — Create a new array by changing each element

The map() method creates a new array by applying a function to every element of the original array.

This is very useful when you want to transform data.

Example

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

console.log("Original:", numbers);

let doubled = numbers.map(function(num) {
  return num * 2;
});

console.log("New array:", doubled);
console.log("Original after map:", numbers);

Output

Original: [1, 2, 3, 4]
New array: [2, 4, 6, 8]
Original after map: [1, 2, 3, 4]

What to notice?

• map() does not change the original array

• it returns a new array

• every item gets transformed

Before and after

Original array: [1, 2, 3, 4]
New array:      [2, 4, 6, 8]

Practical example

Suppose you want to increase every product price by 10.

let prices = [100, 200, 300];

let updatedPrices = prices.map(function(price) {
  return price + 10;
});

console.log(updatedPrices);

Output

[110, 210, 310]

Visualizing map()

map() takes every value, transforms it, and puts the result into a new array.

Original array: [1, 2, 3]

1  ──> 2
2  ──> 4
3  ──> 6

New array: [2, 4, 6]

Another simple view

[1, 2, 3]
    ↓
Pick 1 → transform it → add to new array
Pick 2 → transform it → add to new array
Pick 3 → transform it → add to new array
    ↓
[2, 4, 6]

Traditional for loop vs map()

Let us compare both approaches.

Using a traditional for loop

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

for (let i = 0; i < numbers.length; i++) {
  doubled.push(numbers[i] * 2);
}

console.log(doubled);

Using map()

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

let doubled = numbers.map(function(num) {
  return num * 2;
});

console.log(doubled);

Why map() feels cleaner

With map():

• the code is shorter

• the purpose is easier to read

• it clearly shows that we are transforming data

If your goal is to create a changed version of every element, map() is usually a great choice.

filter() — Create a new array with selected elements

The filter() method creates a new array containing only the elements that match a condition.

Example

let numbers = [5, 12, 8, 20, 3];

console.log("Original:", numbers);

let greaterThanTen = numbers.filter(function(num) {
  return num > 10;
});

console.log("Filtered:", greaterThanTen);
console.log("Original after filter:", numbers);

Output

Original: [5, 12, 8, 20, 3]
Filtered: [12, 20]
Original after filter: [5, 12, 8, 20, 3]

What to notice?

• filter() does not change the original array

• it creates a new array

• only matching values stay in the new array

Before and after

Original array: [5, 12, 8, 20, 3]
New array:      [12, 20]

Practical example

Suppose you want only the students who passed.

let marks = [35, 80, 25, 90, 40];

let passed = marks.filter(function(mark) {
  return mark >= 40;
});

console.log(passed);

Output

[80, 90, 40]

Visualizing filter()

filter() checks every value and only keeps the ones that match the condition.

Original array: [5, 12, 8, 20]
Condition: value > 10

5   ──> skip
12  ──> keep
8   ──> skip
20  ──> keep

New array: [12, 20]

Another simple view

[5, 12, 8, 20]
      ↓
Check 5   → does not match
Check 12  → matches
Check 8   → does not match
Check 20  → matches
      ↓
[12, 20]

Traditional for loop vs filter()

Using a traditional for loop

let numbers = [5, 12, 8, 20, 3];
let result = [];

for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] > 10) {
    result.push(numbers[i]);
  }
}

console.log(result);

Using filter()

let numbers = [5, 12, 8, 20, 3];

let result = numbers.filter(function(num) {
  return num > 10;
});

console.log(result);

Why filter() is better here

With filter(), the purpose becomes very clear:

we are selecting only the values that match a condition.

reduce() — Turn the whole array into one final value

The reduce() method takes all elements of an array and combines them into a single result.

That final result can be:

• a total sum

• a total price

• a count

• one final value

For beginners, the easiest use case is finding the total sum.

Example

let numbers = [10, 20, 30];

let total = numbers.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);

console.log(total);

Output

60

Beginner-friendly explanation

Inside reduce():

• accumulator stores the running result

• currentValue is the current array element

• 0 is the starting value

So the calculation happens like this:

Start with accumulator = 0

0 + 10 = 10
10 + 20 = 30
30 + 30 = 60

Final result: 60

Practical example

Suppose you want to calculate the total bill of products in a cart.

let cartPrices = [199, 299, 499];

let totalBill = cartPrices.reduce(function(total, price) {
  return total + price;
}, 0);

console.log(totalBill);

Output

997

Visualizing reduce()

reduce() combines all values into one final result.

Array: [10, 20, 30]

acc = 0
acc + 10 = 10
acc + 20 = 30
acc + 30 = 60

Final result = 60

Another simple view

[10, 20, 30]
    ↓
acc = 0
acc = acc + 10  → 10
acc = acc + 20  → 30
acc = acc + 30  → 60
    ↓
Final result = 60

Keep this in mind

At first, reduce() may feel a little confusing.

That is normal.

Start by practicing only sum-related examples. Once that becomes easy, you can explore more advanced cases later.

Quick summary of before and after array states

push()

Before: ["a", "b"]
After:  ["a", "b", "c"]

pop()

Before: ["a", "b", "c"]
After:  ["a", "b"]

unshift()

Before: ["b", "c"]
After:  ["a", "b", "c"]

shift()

Before: ["a", "b", "c"]
After:  ["b", "c"]

map()

Original: [1, 2, 3]
New:      [2, 4, 6]

filter()

Original: [5, 12, 8, 20]
New:      [12, 20]

reduce()

Original: [10, 20, 30]
Result:   60

forEach()

Original: [1, 2, 3]
Action: prints each value one by one

When should you use which method?

Use:

• push() when you want to add an item at the end

• pop() when you want to remove an item from the end

• unshift() when you want to add an item at the beginning

• shift() when you want to remove an item from the beginning

• forEach() when you want to perform an action on every item

• map() when you want to transform every item into a new array

• filter() when you want only the items that match a condition

• reduce() when you want one final value from the whole array

Try these examples in the browser console

One of the best ways to learn JavaScript is by running examples yourself.

Open your browser console and try this:

let nums = [2, 4, 6, 8];

nums.push(10);
console.log(nums);

let doubled = nums.map(function(n) {
  return n * 2;
});
console.log(doubled);

let bigNums = nums.filter(function(n) {
  return n > 5;
});
console.log(bigNums);

When you try code on your own, the concepts become much easier to remember.

Mini assignment

Now it is your turn.

Step 1: Create an array of numbers

let numbers = [4, 7, 12, 15, 3];

Step 2: Use map() to double each number

Expected result:

[8, 14, 24, 30, 6]

Step 3: Use filter() to get numbers greater than 10

Expected result:

[12, 15]

Step 4: Use reduce() to calculate the total sum

Expected result:

41

Full practice solution

let numbers = [4, 7, 12, 15, 3];

let doubled = numbers.map(function(num) {
  return num * 2;
});

let greaterThanTen = numbers.filter(function(num) {
  return num > 10;
});

let total = numbers.reduce(function(sum, num) {
  return sum + num;
}, 0);

console.log("Original:", numbers);
console.log("Doubled:", doubled);
console.log("Greater than 10:", greaterThanTen);
console.log("Total sum:", total);

Final thoughts

JavaScript array methods make your code cleaner, shorter, and easier to understand.

If you are just starting out, focus on understanding these three things for each method:

• what it does

• whether it changes the original array or creates a new one

• when to use it in a real problem

A good order for beginners is:

1. push() and pop()

2. shift() and unshift()

3. forEach()

4. map()

5. filter()

6. reduce()

Also, avoid method chaining in the beginning.

First become comfortable using one method at a time.

Once the basics are clear, you will find arrays much easier to work with in JavaScript.

Quick challenge

Take this array:

let nums = [1, 5, 10, 20];

Try to do these on your own:

• add 50 at the end

• remove the first element

• create a new array with all values tripled

• create another array with only values greater than 10

• find the total sum

Try them in your console before looking at any answer.

Conclusion

Array methods are a big step toward writing better JavaScript.

At first, some of them may look confusing, especially map(), filter(), and reduce(). But with a little practice, they become very natural.

Keep experimenting with small arrays, run examples in the console, and try changing the values yourself.

That is the fastest way to learn.