Beginner Software Engineer Journey

JavaScript Array Methods

Matthew Stewart's photo
Matthew Stewart
·

3 min read

Table of contents

Introduction

Arrays are fundamental data structures in JavaScript. They offer a versatile way to store and manipulate collections of data. One of the key reasons arrays are so powerful is the wide arrangement of built-in methods that make working with them a breeze. In this blog post, we'll dive into some of the most useful array methods in JavaScript, organized into three categories: adding/removing elements, searching arrays, and iterating over arrays.

Adding/Removing Elements

1. push()

The push() method adds the specified elements to the end of an array. This is a quick way to expand your array with new data.

let animals = ["Bear", "Lion"];
animals.push("Tiger");
// animals is ["Bear", "Lion", "Tiger"]

2. pop()

Conversely, the pop() method removes the last element from an array and returns it.

let animal = animals.pop();
// animal is "Tiger", animals is ["Bear", "Lion"]

3. shift()

shift() removes the first element from an array and shifts all remaining elements one position to the left.

animal = animals.shift();
// animal is "Bear", animals is ["Lion"]

4. unshift()

On the other hand, unshift() specified elements to the beginning of an array and shift the existing elements to higher indices.

animals.unshift("Tiger");
// animals is ["Tiger", "Lion"]

5. splice()

The splice() method is incredibly versatile. It can add, remove, or replace elements at any index within an array. Its flexibility makes it a powerful tool for array manipulation.

animals.splice(1, 0, "Deer");
// animals is ["Tiger", "Deer", "Lion"]
// splice(start, deleteCount, item)

Searching Arrays

1. indexOf() and lastIndexOf()

indexOf() and lastIndexOf() helps you find the index of a given element within an array. The former starts searching from the beginning, while the latter begins its search from the end.

animals.indexOf("Deer"); 
// 1

2. includes()

includes() checks if an array contains a specific element and returns true or false accordingly.

animals.includes("Gorilla"); 
// false

3. find()

The find() method returns the first element in an array that satisfies a given condition.

animals.find(animal => animal === "Lion"); 
// "Lion"

4. filter()

filter() creates a new array containing all elements that meet a specific condition.

animals.filter(animal => animal.startsWith("D"));  
// ["Deer"]

Iterating Arrays

1. forEach()

forEach() is used to execute a provided function once for each element in the array. It's handy for acting on each item in the array.

animals.forEach(animal => console.log(animal));

2. map()

map() creates a new array by applying a provided function to every element in the array. It's great for transforming data.

let lengths = animals.map(animal => animal.length);
// [5, 4, 4]

3. reduce()

reduce() is used to reduce the array to a single value. It executes a provided function for each element and accumulates the result.

let sum = animals.reduce((accumulator, currentValue) => accumulator + currentValue.length, 0);
// 13

Conclusion

JavaScript arrays are immensely powerful, thanks to the wide range of built-in methods they offer. Mastering these methods can significantly enhance your ability to work with arrays efficiently and effectively. Whether you need to add or remove elements, search for specific data, or iterate through your array, there's a method for every situation. So go ahead, and make the most of these array methods to streamline your JavaScript code!