JavaScript provides numerous built-in methods for manipulating arrays, making it a versatile tool for handling data. Whether you need to concatenate arrays, join elements, find specific values, or sort elements, these methods provide a quick and efficient way to transform your data.

In this article, we’ll cover 8 of the most commonly used array methods in JavaScript, including concat(), join(), indexOf(), slice(), splice(), find(), some(), and every().

Each method will be accompanied by examples and explanations, so you can get a solid understanding of how to use them in your own projects.

1 .concat()

The .concat() method creates a new array that consists of the elements from one or more arrays. It does not modify the original arrays, but rather returns a new array that is a combination of the original arrays. Here's an example:

// --- Example 1---
const firstArray = [1, 2, 3];
const secondArray = [4, 5, 6];

// Use .concat() to combine the two arrays
const concatenatedArray = firstArray.concat(secondArray);

console.log(concatenatedArray); 
// Output: [1, 2, 3, 4, 5, 6]


// --- Example 2 ---
const firstArray = ['dog', 'cat'];
const secondArray = ['elephant', 'zebra'];

// Use .concat() to combine the two arrays
const concatenatedArray = firstArray.concat(secondArray);

console.log(concatenatedArray); 
// Output: ['dog', 'cat', 'elephant', 'zebra']

2 .join()

The .join() method joins all elements of an array into a string and returns the resulting string. By default, the elements are separated by a comma, but a different separator can be specified as an argument. Here's an example:

// --- Example 1---
const numbers = [1, 2, 3, 4, 5];

// Use .join() to join the numbers into a string
const joinedNumbers = numbers.join();

console.log(joinedNumbers); 
// Output: '1,2,3,4,5'


// --- Example 2 ---
const words = ['dog', 'cat', 'elephant', 'bear', 'zebra'];

// Use .join() to join the words into a string separated by a space
const joinedWords = words.join(' ');

console.log(joinedWords); 
// Output: 'dog cat elephant bear zebra'

3 .indexOf()

The .indexOf() method returns the first index at which a given element can be found in the array, or -1 if it is not present. Here's an example:

// --- Example 1---
const numbers = [1, 2, 3, 4, 5];

// Use .indexOf() to find the index of 3 in the numbers array
const indexOfThree = numbers.indexOf(3);

console.log(indexOfThree); 
// Output: 2


// --- Example 2 ---
const words = ['dog', 'cat', 'elephant', 'bear', 'zebra'];

// Use .indexOf() to find the index of 'elephant' in the words array
const indexOfElephant = words.indexOf('elephant');

console.log(indexOfElephant); 
// Output: 2

4 .slice()

The .slice() method returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included). The original array will not be modified. Here's an example:

// --- Example 1 ---
const numbers = [1, 2, 3, 4, 5];

// Use .slice() to create a new array that includes elements 2 to 4
const slicedArray = numbers.slice(2, 4);

console.log(slicedArray); 
// Output: [3, 4]


// --- Example 2 ---
const words = ['dog', 'cat', 'elephant', 'bear', 'zebra'];

// Use .slice() to create a new array that includes elements 1 to 3
const slicedArray = words.slice(1, 3);

console.log(slicedArray); 
// Output: ['cat', 'elephant']

5 .splice()

The .splice() method changes the content of an array by removing or adding elements. The first argument is the index at which to start changing the array, the second argument is the number of elements to remove, and the third and subsequent arguments are the elements to be added. Here's an example:

// --- Example 1---
const numbers = [1, 2, 3, 4, 5];

// Use .splice() to remove the element at index 2 and add the number 6
numbers.splice(2, 1, 6);

console.log(numbers); 
// Output: [1, 2, 6, 4, 5]


// --- Example 2 ---
const words = ['dog', 'cat', 'elephant', 'bear', 'zebra'];

// Use .splice() to remove the element at index 2 and add the word 'giraffe'
words.splice(2, 1, 'giraffe');

console.log(words); 
// Output: ['dog', 'cat', 'giraffe', 'bear', 'zebra']

6 .find()

The .find() method returns the value of the first element in the array that satisfies the provided testing function. Otherwise, it returns undefined. Here's an example:

// --- Example 1---
const numbers = [1, 2, 3, 4, 5];

// Use .find() to find the first number greater than 3
const firstNumberGreaterThanThree = numbers.find(number => number > 3);

console.log(firstNumberGreaterThanThree); 
// Output: 4


// --- Example 2 ---
const words = ['dog', 'cat', 'elephant', 'bear', 'zebra'];

// Use .find() to find the first word that starts with the letter 'e'
const firstWordStartingWithE = words.find(word => word[0] === 'e');

console.log(firstWordStartingWithE); 
// Output: 'elephant'

7 .some()

The .some() method returns a boolean value indicating whether at least one element in the array passes the test implemented by the provided function. Here's an example:

// --- Example 1---
const numbers = [1, 2, 3, 4, 5];

// Use .some() to determine if any number is greater than 6
const anyNumberGreaterThanSix = numbers.some(number => number > 6);

console.log(anyNumberGreaterThanSix); 
// Output: false


// --- Example 2 ---
const words = ['dog', 'cat', 'elephant', 'bear', 'zebra'];

// Use .some() to determine if any word has more than 4 letters
const anyWordLongerThanFourLetters = words.some(word => word.length > 4);

console.log(anyWordLongerThanFourLetters); 
// Output: true

8 .every()

The .every() method returns a boolean value indicating whether all elements in the array pass the test implemented by the provided function. Here's an example:

// --- Example 1---
const numbers = [1, 2, 3, 4, 5];

// Use .every() to determine if all numbers are less than 6
const allNumbersLessThanSix = numbers.every(number => number < 6);

console.log(allNumbersLessThanSix); 
// Output: true


// --- Example 2 ---
const words = ['dog', 'cat', 'elephant', 'bear', 'zebra'];

// Use .every() to determine if all words have more than 2 letters
const allWordsLongerThanTwoLetters = words.every(word => word.length > 2);

console.log(allWordsLongerThanTwoLetters); 
// Output: true

With these 13 methods (you will find the first 5 here), you now have a comprehensive understanding of how to manipulate arrays in JavaScript. Whether it’s concatenating, joining, finding, or sorting elements, these methods provide a flexible and efficient means of transforming data.

Happy coding! ✌️