As a software developer, working with arrays is an inevitable part of our daily routine. It is often required to access, search and manipulate arrays in different ways to get the desired result. Thankfully, JavaScript provides us with several built-in array methods that help us perform different operations on arrays.

In this article, we will cover some of the most popular JavaScript array methods that every developer should know. We will cover their syntax, use cases, and examples to give you a better understanding of how they work.

[] Array Access

Array access using the square brackets is the most basic way to access the elements of an array in JavaScript. It involves using the index of the element you want to access within the square brackets. For example, to access the first element of an array, you would use the following code:

let myArray = ['apple', 'banana', 'orange'];
let firstElement = myArray[0];

This code will assign the value 'apple' to the variable firstElement. Array access can be used to read, update, or add elements to an array. However, it is important to note that using an index that is outside the range of the array will result in an undefined value.

.at()

The at() method is a more recent addition to the JavaScript language, introduced in ECMAScript 2019. It allows for more flexible array access, as it can accept both positive and negative indices. Negative indices count from the end of the array, with -1 representing the last element. The at() method can also handle out-of-bounds indices more gracefully, returning undefined instead of throwing an error. Here is an example of using at():

let myArray = ['apple', 'banana', 'orange'];
let lastElement = myArray.at(-1);

This code will assign the value 'orange' to the variable lastElement. Using at() can help make your code more concise and less prone to errors.

.join()

The join() method is used to join all elements of an array into a single string. By default, it separates the elements with a comma, but you can specify a different separator string as a parameter. Here is an example:

let myArray = ['apple', 'banana', 'orange'];
let myString = myArray.join('-');

This code concatenates all elements in an array into a string. The final value of myString will be a string with these values separated by a hyphen: 'apple-banana-orange'.

.every()

The every() method tests whether all elements in the array pass the specified test function. It returns a boolean value - true if all elements pass the test and false if at least one element fails the test:

const numbers = [2, 4, 6, 8, 10];
const allEven = numbers.every(num => num % 2 === 0);
console.log(allEven); // true

The code creates an array of numbers and checks if all elements are even using the every() method. The boolean result is stored in the allEven variable, which is then logged to the console.

.some()

The some() method tests whether at least one element in the array passes the specified test function. It returns a boolean value - true if at least one element passes the test and false if none of the elements pass the test:

const numbers = [1, 2, 3, 4, 5];
const hasEven = numbers.some(num => num % 2 === 0);
console.log(hasEven); // true

The code defines an array of numbers and uses the some() method to check if it contains any even numbers. If the array contains at least one even number, the method returns true and logs it to the console.

.find()

The find() method returns the first element in the array that passes the specified test function. If no elements pass the test, it returns undefined:

const numbers = [1, 2, 3, 4, 5];
const evenNumber = numbers.find(num => num % 2 === 0);
console.log(evenNumber); // 2

The .find() method is used to find the first even number in the numbers array using a callback function that returns true if the number is even. The resulting value, 2, is then logged to the console.

.indexOf()

The indexOf() method returns the index of the first occurrence of a specified element in the array. If the element is not found, it returns -1:

const fruits = ['apple', 'banana', 'orange'];
const index = fruits.indexOf('banana');
console.log(index); // 1

In this code, indexOf() is used to find the index of the 'banana' element in the fruits array, which is 1.

.pop()

The pop() method removes the last element from the array and returns that element:

const fruits = ['apple', 'banana', 'orange'];
const lastFruit = fruits.pop();
console.log(lastFruit); // orange

The pop() method is used to remove the last element from an array. In this code, it removes the 'orange' element from the 'fruits' array and assigns it to the 'lastFruit' variable, which is then logged to the console.

.push()

The push() method adds one or more elements to the end of the array and returns the new length of the array:

const fruits = ['apple', 'banana'];
const newLength = fruits.push('orange', 'pear');
console.log(newLength); // 4

In this example, orange and pear are added to the fruits array using push, increasing the array length to 4. The new length is then logged to the console using console.log.

.map()

The map() method creates a new array with the results of calling a provided function on every element in the calling array:

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

In this example, the numbers array is mapped to a new array doubled, where each element is multiplied by 2 using an arrow function. The resulting doubled array is then logged to the console.

.forEach()

The forEach() method is used to loop over an array and execute a callback function for each element. This method does not return a new array but instead allows you to perform an action on each element in the original array. Here's an example of how to use forEach() to log each element of an array to the console:

const numbers = [1, 2, 3, 4, 5];
numbers.forEach(number => console.log(number));

.splice()

The splice() method is used to add or remove elements from an array. This method modifies the original array and returns the removed elements. Here's an example of how to use splice() to remove the second element from an array:

const fruits = ['apple', 'banana', 'orange'];
const removedFruit = fruits.splice(1, 1);
console.log(fruits); // Output: ['apple', 'orange']
console.log(removedFruit); // Output: ['banana']

.filter()

The filter() method is used to create a new array that contains all elements that pass a certain test. This method does not modify the original array but instead returns a new array that satisfies the condition. Here's an example of how to use filter() to create a new array that contains only even numbers:

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers); // Output: [2, 4]

.concat()

The concat() method is used to combine two or more arrays into a single array. This method does not modify the original arrays but instead returns a new array that contains all the elements from the original arrays. Here's an example of how to use concat() to combine two arrays:

const fruits = ['apple', 'banana'];
const vegetables = ['carrot', 'celery'];
const combined = fruits.concat(vegetables);
console.log(combined); // Output: ['apple', 'banana', 'carrot', 'celery']

.fill()

The fill() method is used to fill all the elements in an array with a static value. This method modifies the original array and returns the modified array. Here's an example of how to use fill() to fill an array with a default value:

const numbers = [1, 2, 3, 4, 5];
const filledNumbers = numbers.fill(0);
console.log(filledNumbers); // Output: [0, 0, 0, 0, 0]

.slice()

The slice() method is used to create a new array that contains a portion of an existing array. This method does not modify the original array but instead returns a new array that contains the selected elements. Here's an example of how to use slice() to create a new array that contains the first three elements of an array:

const numbers = [1, 2, 3, 4, 5];
const slicedNumbers = numbers.slice(0, 3);
console.log(slicedNumbers); // Output: [1, 2, 3]

.shift()

The shift() method removes the first element from an array and returns that element. It also shifts all subsequent elements to a lower index. Here's an example:

const array = ["apple", "banana", "cherry"];
const shifted = array.shift();
 
console.log(shifted); // "apple"
console.log(array);   // ["banana", "cherry"]

In this example, we start with an array containing three elements. We then call shift() on that array, which removes the first element ("apple") and returns it. Finally, we log the returned value and the updated array to the console.

.unshift()

The unshift() method adds one or more elements to the beginning of an array and returns the new length of the array. Here's an example:

const array = ["apple", "banana", "cherry"];
const length = array.unshift("orange", "kiwi");
 
console.log(length); // 5
console.log(array);  // ["orange", "kiwi", "apple", "banana", "cherry"]

In this example, we start with an array containing three elements. We then call unshift() on that array, which adds two elements ("orange" and "kiwi") to the beginning of the array and returns the new length of the array (5). Finally, we log the returned value and the updated array to the console.

.sort()

The sort() method sorts the elements of an array in place and returns the sorted array. The default sort order is built upon converting the elements into strings, then comparing their sequences of UTF-16 code units values. Here's an example:

const array = [1, 4, 2, 3, 5];
const sorted = array.sort();
 
console.log(sorted); // [1, 2, 3, 4, 5]
console.log(array);  // [1, 2, 3, 4, 5]

In this example, we start with an array containing five elements. We then call sort() on that array, which sorts the elements in ascending order and returns the sorted array. Finally, we log both the returned value and the updated array to the console.

Conclusion

Understanding popular JavaScript array methods is crucial for any software developer looking to master the language. Each of these methods serves a specific purpose, and they all offer different pros and cons depending on your use case.

For example, methods like push() and pop() can quickly and easily add or remove elements from an array, while methods like filter() and map() can help you manipulate and transform data within an array. Similarly, methods like indexOf() and find() can help you quickly search for specific elements within an array.

It's also worth noting that innovations in JavaScript development have led to the creation of new array methods in recent years. There are much more methods available than described in this post, like the flat() method can flatten nested arrays, while the flatMap() method combines the functionality of map() and flat() to transform and flatten arrays in one step.

Overall, whether you're a seasoned JavaScript developer or just starting out, understanding popular array methods is a must. By knowing when and how to use each method, you'll be able to write cleaner, more efficient code and unlock new possibilities for your JavaScript projects.