Top 10 must-know JavaScript array methods

Arrays are an integral part of JavaScript programming language and understanding the various methods available can greatly improve your coding efficiency and ability to solve problems. In this article, we will explore the top 10 must-know JavaScript array methods that every developer should be familiar with.

1. push()

This method is used to add one or more elements to the end of an array. It returns the new length of the array after the elements have been added.

Example:

let fruits = ['apple', 'banana', 'pear'];

fruits.push('orange', 'mango');

console.log(fruits); 

// Output: ['apple', 'banana', 'pear', 'orange', 'mango']

2. pop()

This method is used to remove the last element from an array and return it. It is commonly used in combination with a loop to iterate through and remove elements from an array.

For example:

let numbers = [1, 2, 3, 4, 5];

while (numbers.length > 0) {
  console.log(numbers.pop());
}

// Output: 5, 4, 3, 2, 1

3. shift()

Similar to `.pop()`, this method is used to remove the first element from an array and return it. It is useful for removing elements from the beginning of an array without having to reindex the remaining elements.

For example:

let vegetables = ['carrot', 'broccoli', 'cauliflower'];

console.log(vegetables.shift()); 

// Output: carrot

console.log(vegetables); 

// Output: ['broccoli', 'cauliflower']

4. unshift()

This method is the opposite of .shift(), adding one or more elements to the beginning of an array and returning the new length of the array. It is useful for adding elements to the beginning of an array without having to reindex the remaining elements.

For example:

let animals = ['dog', 'cat', 'bird'];

animals.unshift('fish', 'lizard');

console.log(animals); 

// Output: ['fish', 'lizard', 'dog', 'cat', 'bird']

5. splice()

This method is a powerful tool for modifying the contents of an array. It allows you to add or remove elements from a specific index and can even be used to replace existing elements. It returns an array of the removed elements.

For example:

let numbers = [1, 2, 3, 4, 5];

let removed = numbers.splice(2, 2); 
// returns [3, 4]

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

6. slice()

The slice() method returns a shallow copy of a portion of an array. It does not modify the original array.

For example:

let numbers = [1, 2, 3, 4, 5];

let slice = numbers.slice(2, 4);
console.log(slice); 
// Output: [3, 4]

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

7. concat()

The concat() method returns a new array that is the result of concatenating the original array with one or more additional arrays or values.

For example:

let numbers1 = [1, 2, 3]; 

let numbers2 = [4, 5, 6]; 

let combined = numbers1.concat(numbers2); 

// returns [1, 2, 3, 4, 5, 6]

8. join()

The join() method creates and returns a new string by concatenating all elements in an array, separated by a specified separator.

For example:

let numbers = [1, 2, 3, 4, 5];

let str = numbers.join(', ');

console.log(str)
// Output: "1, 2, 3, 4, 5"

9. indexOf()

The indexOf() method searches an array for a specified element and returns the index of its first occurrence.

For example:

let numbers = [1, 2, 3, 4, 5]; 

let index = numbers.indexOf(3); 

console.log(index)
// Output: 2

10. lastIndexOf()

The lastIndexOf() method searches an array for a specified element and returns the index of its last occurrence.

For example:

let numbers = [1, 2, 3, 4, 5, 3]; 

let index = numbers.lastIndexOf(3); 

console.log(index);
// Output: 5

Conclusion

In conclusion, these 10 must-know JavaScript array methods are essential when working with arrays in JavaScript. They allow you to add or remove elements from arrays, as well as access elements at the beginning or end of an array. Familiarising yourself with these methods will greatly help you to write efficient and effective code when working with arrays in JavaScript. Whether you are a beginner or an experienced developer, these methods will be invaluable to you as you work with arrays.

Sources:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array