Posted inFront-End

JavaScript Array Methods Explained with Simple Examples

December 13, 2025Posted inFront-End
JavaScript Array Methods Explained with Simple Examples
Getting your Trinity Audio player ready...

JavaScript comes with many built-in array methods that make your life easier — whether you want to modify data, filter values, loop through items, or calculate totals.
But still, many beginners get confused about what each method actually does and when to use it.

JavaScript comes with many built-in array methods that make your life easier — whether you want to modify data, filter values, loop through items, or calculate totals. But still, many beginners get confused about what each method actually does and when to use it.

Array of Array In Javascript

In this guide, I’ve explained the most useful JavaScript Array Methods with simple examples, exactly like shown in the image — so you understand everything clearly.

1. map() – Transform Each Element

The map() method creates a new array by applying a function to each element.

Example:

const arr = [1, 2, 3];
const doubled = arr.map(x => x * 2);
console.log(doubled); // [2, 4, 6]

When to use:

  • When you want to change every element
  • Example: convert prices, multiply numbers, format values

2. forEach() – Loop Through Each Element

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

Example:

[1, 2, 3].forEach(num => console.log(num));

When to use:

  • When you want to execute something for each element
  • No new array is returned
  • Useful for logging, calculations, pushing data, etc.

3. filter() – Select Specific Elements

The filter() method returns a new array containing only the elements that pass the condition.

Example:

const arr = [1, 2, 3, 4];
const even = arr.filter(num => num % 2 === 0);
console.log(even); // [2, 4]

When to use:

  • Remove unwanted values
  • Select only matching items
  • Example: even numbers, passed students, active users

4. push() & pop() – Add/Remove Elements from the End

✔ push() – Add at the end

let arr = ['a', 'b'];
arr.push('c');
console.log(arr); // ['a', 'b', 'c']

✔ pop() – Remove from the end

arr.pop();
console.log(arr); // ['a', 'b']

When to use:

  • When working with stacks
  • When adding or removing last elements

5. shift() & unshift() – Add/Remove from the Beginning

✔ unshift() – Add at the beginning

let arr = ['a', 'b'];
arr.unshift('x');
console.log(arr); // ['x', 'a', 'b']

✔ shift() – Remove from the beginning

arr.shift();
console.log(arr); // ['a', 'b']

When to use:

  • Manage queues (FIFO)
  • Adjust the start of an array

6. reduce() – Convert Array to a Single Value

reduce() takes all elements and reduces them into one result.

Example: Add all numbers

const arr = [1, 2, 3];
const total = arr.reduce((a, b) => a + b);
console.log(total); // 6

When to use:

  • Sum numbers
  • Count items
  • Convert arrays to objects
  • Advanced data processing

Final Thoughts

JavaScript arrays are powerful, and these methods are used in almost every project — from React to Node.js. Understanding these six methods will make your coding cleaner, faster, and more professional.

Last updated on December 13, 2025