DEV Community

Cover image for 15 Must-Know Javascript array methods
💡Piyush Kesarwani
💡Piyush Kesarwani

Posted on

15 Must-Know Javascript array methods

Arrays are an essential part of any programming language, and JavaScript is no exception. With arrays, developers can store and manipulate collections of data, including strings, numbers, and even objects. In this article, we will cover 15 must-know JavaScript array methods that everyone should know.

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

The push() method adds one or more elements to the end of an array and returns the new length of the array. This method is useful when you need to add elements to an array without specifying the index.

const array = [1, 2, 3];  array.push(4, 5);  console.log(array); // Output: [1, 2, 3, 4, 5]
Enter fullscreen mode Exit fullscreen mode

pop() – Removes and returns the last element from an array.

The pop() method removes and returns the last element from an array. This method is useful when you need to remove an element from the end of an array.

const array = [1, 2, 3];
    const lastElement = array.pop();
    console.log(array); // Output: [1, 2]
    console.log(lastElement); // Output: 3
Enter fullscreen mode Exit fullscreen mode

shift() – Removes and returns the first element from an array

The shift() method removes and returns the first element from an array. This method is useful when you need to remove an element from the beginning of an array.

const array = [1, 2, 3];
    const firstElement = array.shift();
    console.log(array); // Output: [2, 3]
    console.log(firstElement); // Output: 1
Enter fullscreen mode Exit fullscreen mode

unshift() – Adds one or more elements to the beginning of an array

The unshift() method adds one or more elements to the beginning of an array and returns the new length of the array. This method is useful when you need to add elements to an array at the beginning.

const array = [1, 2, 3];
    array.unshift(4, 5);
    console.log(array); // Output: [4, 5, 1, 2, 3]
Enter fullscreen mode Exit fullscreen mode

splice() – Adds or removes elements from an array at a specified index

The splice() method adds and removes elements from an array at a specified index. This method can be used to add or remove elements from anywhere in the array.

const array = [1, 2, 3, 4];
    array.splice(1, 2, 5, 6);
    console.log(array); // Output: [1, 5, 6, 4]
Enter fullscreen mode Exit fullscreen mode

slice() – Returns a copy of a portion of an array specified by its starting and ending indexes

The slice() method returns a copy of a portion of an array specified by its starting and ending indexes. This method can be used to create a new array that contains a subset of the original array.

const array = [1, 2, 3, 4];
    const newArray = array.slice(1, 3);
    console.log(newArray); // Output: [2, 3]
Enter fullscreen mode Exit fullscreen mode

concat() – Combines two or more arrays and returns a new array

The concat() method combines two or more arrays and returns a new array. This method can be used to join arrays together without modifying the original arrays.

const array1 = [1, 2];
    const array2 = [3, 4];
    const newArray = array1.concat(array2);
    console.log(newArray); // Output: [1, 2, 3, 4]
Enter fullscreen mode Exit fullscreen mode

join() – Joins all elements of an array into a string

The join() method joins all elements of an array into a string, using a specified separator. This method can be used to create a string from an array.

const array = [1, 2, 3];  const string = array.join("-");  console.log(string); // Output: "1-2-3"
Enter fullscreen mode Exit fullscreen mode

indexOf() – Returns the index of the first occurrence of a specified element in an array

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

const array = [1, 2, 3];  const index = array.indexOf(2);  console.log(index); // Output: 1
Enter fullscreen mode Exit fullscreen mode

lastIndexOf() – Returns the index of the last occurrence of a specified element in an array

The lastIndexOf() method returns the index of the last occurrence of a specified element in the array. If the element is not found, this method returns -1.

const array = [1, 2, 3, 2];  const index = array.lastIndexOf(2);  console.log(index); // Output: 3
Enter fullscreen mode Exit fullscreen mode

forEach() – Executes a provided function once for each element in an array

The forEach() method executes a provided function once for each element in an array. This method can be used to perform an operation on each element of an array.

const array = [1, 2, 3];  array.forEach((element) => {  console.log(element);  });  // Output:  // 1  // 2  // 3
Enter fullscreen mode Exit fullscreen mode

map() – Creates a new array with the results of calling a provided function on every element in the array

The map() method creates a new array with the results of calling a provided function on every element in the array. This method can be used to create a new array based on the original array.

const array = [1, 2, 3];  const newArray = array.map((element) => {  return element * 2;  });  console.log(newArray); // Output: [2, 4, 6]

Enter fullscreen mode Exit fullscreen mode

filter() – Creates a new array with all elements that pass a test specified by a provided function

The filter() method creates a new array with all elements that pass a test specified by a provided function. This method can be used to create a new array based on a condition.

const array = [1, 2, 3];  const newArray = array.filter((element) => {  return element > 1;  });  console.log(newArray); // Output: [2, 3]
Enter fullscreen mode Exit fullscreen mode

reduce() – Executes a provided function on each element of the array and returns a single value

The reduce() method executes a provided function on each element of the array and returns a single value. This method can be used to perform an operation on all elements of an array and return a single value.

const array = [1, 2, 3];  const sum = array.reduce((accumulator, currentValue) => {  return accumulator + currentValue;  }, 0);  console.log(sum); // Output: 6
Enter fullscreen mode Exit fullscreen mode

sort() – Sorts the elements of an array in place

The sort() method sorts the elements of an array in place. This method can be used to sort an array in ascending or descending order.

const array = [3, 2, 1];
array.sort();
console.log(array); // Output: [1, 2, 3]
Enter fullscreen mode Exit fullscreen mode

Conclusion
In this article, we have covered 15 must-know JavaScript array methods that everyone should know. These methods are essential for working with arrays in JavaScript and can greatly simplify your code. By using these methods, you can perform a wide range of operations on arrays, such as adding, removing, sorting, and filtering elements. Whether you’re a beginner or an experienced developer, mastering these array methods will make your life easier and your code more efficient.

Those were the 15 must-know javascript array methods for you. I really hoped that you enjoyed reading this article.

Follow me on socials:

Twitter: https://twitter.com/Hy_piyush
Instagram: https://www.instagram.com/piyush_kesarwani22/
Linkedin: https://www.linkedin.com/in/piyush-kesarwani-809a30219/
GitHub: https://github.com/piyushkesarwani

Top comments (0)