DEV Community

Cover image for JavaScript Array Methods: A Beginner's Guide
Zamzam Hassan
Zamzam Hassan

Posted on • Edited on • Originally published at dev.to

JavaScript Array Methods: A Beginner's Guide

As a beginner, one of the fundamental aspects you will encounter is working with arrays, and JavaScript offers a treasure trove of built-in array methods to help you manipulate and work with arrays like a pro.

What is an Array?
In JavaScript, an array is a collection of values that can hold various data types, such as numbers, strings, objects, and even other arrays. Arrays are incredibly versatile and can be used to store and manage data efficiently.

Arrays in JavaScript

In JavaScript, arrays come equipped with a powerful set of methods that allow you to perform operations like adding, removing, and transforming elements effortlessly. Here's a Here are some of the most commonly used array methods for beginners:

1. push() and pop()

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

const planets = ['Mercury', 'Venus'];
planets.push('Earth'); 

// Now, planets is ['Mercury', 'Venus', 'Earth']
Enter fullscreen mode Exit fullscreen mode

pop() removes and returns the last element of an array.

const planets = ['Mercury', 'Venus', 'Earth'];
// lastPlanet is 'Earth'

const lastPlanet = planets.pop(); 
// Now, planets is ['Mercury', 'Venus']
Enter fullscreen mode Exit fullscreen mode

2. unshift() and shift()

unshift() adds one or more elements in the beginning of the given array.

const planets = ['Mercury', 'Venus'];
planets.unshift('Earth'); 
// planets is now ['Earth', 'Mercury', 'Venus']
Enter fullscreen mode Exit fullscreen mode

shift() removes and returns the first element of an array.

const planets = ['Mercury', 'Venus', 'Earth'];
const firstPlanet = planets.shift(); 
// firstPlanet is 'Mercury', 
planets is now ['Venus', 'Earth']
Enter fullscreen mode Exit fullscreen mode

3. concat()

It returns a new array object that contains two or more merged arrays.

const planets = ['Mercury', 'Venus'];
const morePlanets = ['Earth', 'Mars'];

const combinedPlanets = planets.concat(morePlanets);
combinedPlanets is ['Mercury', 'Venus', 'Earth', 'Mars']
Enter fullscreen mode Exit fullscreen mode

4. join()

It joins the elements of an array as a string.

const planets = ['Mercury', 'Venus', 'Earth'];
const planetString = planets.join(', '); 
// planetString is 'Mercury, Venus, Earth'
Enter fullscreen mode Exit fullscreen mode

5. slice()

It creates a new array by extracting a portion of an existing array.

const planets = ['Mercury', 'Venus', 'Earth', 'Mars'];
const slicedPlanets = planets.slice(1, 3); 
// slicedPlanets is ['Venus', 'Earth']
Enter fullscreen mode Exit fullscreen mode

6. splice()

It adds/removes elements to/from the given array.

const planets = ['Mercury', 'Venus', 'Earth'];
planets.splice(1, 1, 'Mars'); 
// planets is now ['Mercury', 'Mars', 'Earth']
Enter fullscreen mode Exit fullscreen mode

7. indexOf()

It searches the specified element in the given array and returns the index of the first match.

const planets = ['Mercury', 'Venus', 'Earth'];
const index = planets.indexOf('Venus'); 
// index is 1
Enter fullscreen mode Exit fullscreen mode

8. filter()

It returns the new array containing the elements that pass the provided function conditions.

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0); 
// evenNumbers is [2, 4]
Enter fullscreen mode Exit fullscreen mode

9. map()

It calls the specified function for every array element and returns the new array

const numbers = [1, 2, 3];
const doubledNumbers = numbers.map(num => num * 2); 
// doubledNumbers is [2, 4, 6]
Enter fullscreen mode Exit fullscreen mode

10. reduce()

It executes a provided function for each value from left to right and reduces the array to a single value.

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0); 
// sum is 10
Enter fullscreen mode Exit fullscreen mode

11. reverse()

It reverses the elements of given array.

const planets = ['Mercury', 'Venus', 'Earth'];
planets.reverse(); 
// planets is now ['Earth', 'Venus', 'Mercury']
Enter fullscreen mode Exit fullscreen mode

12. toString()

It converts the elements of a specified array into string form, without affecting the original array.

const numbers = [1, 2, 3];
const numbersString = numbers.toString(); 
// numbersString is '1,2,3'

Enter fullscreen mode Exit fullscreen mode

13. findIndex()

It returns the index value of the first element in the given array that satisfies the specified condition.

const numbers = [1, 2, 3, 4, 5];
const evenIndex = numbers.findIndex(num => num % 2 === 0); 
// evenIndex is 1 (index of the first even number)

Enter fullscreen mode Exit fullscreen mode

14. forEach()

It invokes the provided function once for each element of an array.

const planets = ['Mercury', 'Venus', 'Earth'];
planets.forEach(planet => {
  console.log(planet); 
// Logs each planet: 'Mercury', 'Venus', 'Earth'
});

Enter fullscreen mode Exit fullscreen mode

15. includes()

It checks whether the given array contains the specified element.

const numbers = [1, 2, 3, 4, 5];
const hasNumberThree = numbers.includes(3);
// hasNumberThree is true
Enter fullscreen mode Exit fullscreen mode

16. lastIndexOf()

It searches the specified element in the given array and returns the index of the last match.

const planets = ['Mercury', 'Venus', 'Earth', 'Venus'];
const lastIndex = planets.lastIndexOf('Venus');
// lastIndex is 3 (index of the last 'Venus')

Enter fullscreen mode Exit fullscreen mode

17. sort()

It returns the element of the given array in a sorted order.

const planets = ['Venus', 'Mercury', 'Earth'];
planets.sort(); 
// planets is now ['Earth', 'Mercury', 'Venus']

Enter fullscreen mode Exit fullscreen mode

Conclusion

JavaScript array methods are a crucial part of a web developer's toolkit, and mastering them is essential for becoming proficient in JavaScript. As a beginner, understanding these methods will pave the way for more advanced JavaScript concepts and empower you to build dynamic web applications.
Happy coding!

Top comments (0)