DEV Community

Parth Raval
Parth Raval

Posted on

JavaScript Array Methods: A Complete Guide (Old vs New Syntax with Examples in 2025)

#javascript #webdev #beginners #programming

javascript-array-methods

Introduction

Arrays are one of the most important data structures in JavaScript. Whether you’re working with ES5 (old syntax) or ES6+ (modern syntax), knowing all array operations is a must for clean, efficient, and bug-free code.

This guide covers all JavaScript array methods with both old and new syntax — plus short explanations and examples.

Basic Array Operations

1. push() → Add element at the end

  • Old: arr.push(10);
  • New (Spread): arr = [...arr, 10]; Adds new element(s) at the end of an array.

2. pop() → Remove element from the end

  • Old: arr.pop();
  • New (Destructuring): [...rest, last] = arr; Removes the last element and returns it.

3. shift() → Remove element from the beginning

  • Old: arr.shift();
  • New (Destructuring): [first, ...rest] = arr; Removes the first element and shifts others left.

4. unshift() → Add element at the beginning

  • Old: arr.unshift(5);
  • New (Spread): arr = [5, ...arr]; Adds element(s) at the beginning.

Searching & Checking

5. indexOf() → Find index of element

  • Old: arr.indexOf(3);
  • New (findIndex): arr.findIndex(x => x === 3); Returns the index of the first occurrence.

6. lastIndexOf() → Find last index

  • Old: arr.lastIndexOf(3);
  • New (findLastIndex ES2023): arr.findLastIndex(x => x === 3); Finds the last occurrence index.

7. includes() (ES6)

  • Old (Manual): arr.indexOf(3) !== -1;
  • New: arr.includes(3); Checks if element exists.

8. at() (ES2022)

  • Old: arr[arr.length - 1];
  • New: arr.at(-1); Access elements with positive/negative indexes.

Iteration & Transformation

9. forEach() → Loop through array

  • Old: 
for (let i=0; i<arr.length; i++) console.log(arr[i]);
Enter fullscreen mode Exit fullscreen mode
  • New: arr.forEach(item => console.log(item)); Iterates over elements.

10. map() → Transform each element

  • Old: 
let doubled = [];
for (let i=0; i<arr.length; i++) doubled.push(arr[i]*2);
Enter fullscreen mode Exit fullscreen mode
  • New: arr.map(x => x*2); Returns a new array with transformed values.

11. filter() → Filter elements

  • Old: 
let even = [];
for (let i of arr) if (i%2===0) even.push(i);
Enter fullscreen mode Exit fullscreen mode
  • New: arr.filter(x => x%2===0); Keeps only elements passing a condition.

12. reduce() → Accumulate values

  • Old: 
let sum = 0;
for (let i of arr) sum += i;
Enter fullscreen mode Exit fullscreen mode
  • New: arr.reduce((a,b)=>a+b, 0); Reduces array to a single value.

13. reduceRight() → Accumulate from right

  • Old: reverse + reduce.
  • New: arr.reduceRight((a,b)=>a-b); Like reduce but from right-to-left.

Adding, Removing, Copying

14. splice() → Add/Remove at index

  • Old: arr.splice(2,1,"new");
  • New (spread + slice): 
arr = [...arr.slice(0,2), "new", ...arr.slice(3)];
Enter fullscreen mode Exit fullscreen mode

Insert, remove, or replace elements.

15. slice() → Copy part of array

  • Old: arr.slice(1,3);
  • New: [...arr].slice(1,3); Returns shallow copy from start to end index.

16. concat() → Merge arrays

  • Old: arr.concat(arr2);
  • New: [...arr, ...arr2]; Joins multiple arrays.

17. flat() (ES2019) → Flatten array

  • Old: arr.reduce((a,b)=>a.concat(b), []);
  • New: arr.flat(); Flattens nested arrays.

18. flatMap() (ES2019)

  • Old: arr.map(fn).flat();
  • New: arr.flatMap(fn); Map + flatten in one step.

Sorting & Reversing

19. sort()

  • Old: arr.sort();
  • New: arr.toSorted(); // ES2023 Sorts array in place (or immutable with toSorted).

20. reverse()

  • Old: arr.reverse();
  • New: arr.toReversed(); // ES2023 Reverses array order.

Utility Methods

21. join() → Convert array to string

  • Old: arr.join(",");
  • New: [...arr].join(" - "); Joins elements with separator.

22. toString()

  • Old: arr.toString();
  • New: ${arr} Converts array to string.

23. from() (ES6)

  • Old: [].slice.call("hello");
  • New: Array.from("hello"); Converts iterable to array.

24. isArray()

  • Old: obj instanceof Array;
  • New: Array.isArray(obj); Checks if value is an array.

25. keys(), values(), entries()

  • Old: Manual loops.
  • New: 
for (let [i,v] of arr.entries()) console.log(i,v);
Enter fullscreen mode Exit fullscreen mode

Iterators for index, values, key-value pairs.

Modern Immutable Array Methods (ES2023+)

  • toSorted() → non-mutating sort
  • toReversed() → non-mutating reverse
  • with(index, value) → copy with replacement Safer alternatives to classic mutating methods.

most common array questions

Q1. What are the most common array methods in JavaScript?
Push, pop, shift, unshift, map, filter, reduce, slice, splice, concat, includes.

Q2. What is the difference between old and new array syntax?
Old syntax uses loops and mutating methods, while new syntax (ES6+) uses map, filter, spread, and immutable methods (toSorted, with).

Q3. How to check if a value is an array in JavaScript?
Use Array.isArray(value) instead of instanceof.

Q4. What are immutable array methods?
New ES2023 methods like toSorted(), toReversed(), with() return a new array instead of modifying the original.

Q5. Why should we prefer modern syntax?
It makes code cleaner, functional, immutable, and safer for large applications.

JavaScript arrays are powerful, and with modern ES6+ features, working with them is easier than ever. From push/pop to flatMap, at(), toSorted, this guide covers all array operations old and new — making it perfect for learning, interviews, and professional development in 2025.

Top comments (0)