9 Array Methods Every JavaScript Developer Should Know

Why Array?

Objects allow you to store keyed collections of values.
But quite often we find that we need an ordered collection, where we have a 1st, a 2nd, a 3rd element and so on. For example, we need that to store a list of something: users, goods, HTML elements etc.

There exists a special data structure named Array, to store ordered collections.

Nowadays Array is a ❤️ of JavaScript if you work with API to communicate with backend.

Oops!!!! Forgive me for the adding basic info about array 😨

Lets get started! 🏃

1. includes()

The includes() method checks whether an array contains a specified element.

const languages = ["Javascript", "Python", "C#", "Java"];
languages.includes("Javascript");
//output: true

This method returns true if the array contains the element, and false if not.

2. reverse()

The reverse() method reverses the order of the elements in an array.

const languages = ["Javascript", "Python", "C#", "Java"];
languages.reverse();
//output: ["Java", "C#", "Python", "Javascript"]

Note: this method will change the original array.

3. join()

The join() method creates and returns a new string by concatenating all of the elements in an array.

The elements will be separated by a specified separator. The default separator is comma (,).

const languages = ["Javascript", "Python", "C#", "Java"];
languages.join();
//output: Java,C#,Python,Javascript

Note: this method will not change the original array.

Warning: If an element is undefined, null or an empty array [], it is converted to an empty string.

4. concat()

The concat() method is used to join two or more arrays.

const languages = ["Javascript", "Python", "C#", "Java"];
const frameworks = ["Angular", "Express", "Next"];
const languagesAndFrameworks = languages.concat(frameworks);
//output ["Javascript", "Python", "C#", "Java", "Angular", "Express", "Next"]

This method does not change the existing arrays, but returns a new array, containing the values of the joined arrays.

5. every()

The every() method checks if all elements in an array pass a test (provided as a function).

let’s look at the year's example:

const years = [2010, 2009, 2021, 2022];
years.every(a => a > 2008);
//output: true

The every() method executes the function once for each element present in the array:

• If it finds an array element where the function returns a false value, every() returns false (and does not check the remaining values)
• If no false occur, every() returns true

Note: every() does not execute the function for array elements without values.

*Note: every() does not change the original array
*

6. push()

The push() method adds new items to the end of an array, and returns the new length.

const languages = ["Javascript", "Python", "C#", "Java"];
languages.push("GoLang");
//output ["Javascript", "Python", "C#", "Java", "GoLang"]

Note: The new item(s) will be added at the end of the array.
Note: This method changes the length of the array.

7. pop()

The pop() method removes the last element of an array and returns that element.

const languages = ["Javascript", "Python", "C#", "Java"];
languages.pop();
//output ["Javascript", "Python", "C#"]

Note: This method changes the length of an array.

8. shift()

The shift() method removes the first item of an array.

const languages = ["Javascript", "Python", "C#", "Java"];
languages.shift();
//output ["Python", "C#", "Java"]

Note: This method changes the length of the array.
Note: The return value of the shift method is the removed item.
Note: this method will change the original array.

9. unshift()

The unshift() method adds new items to the beginning of an array, and returns the new length.

const languages = ["Javascript", "Python", "C#", "Java"];
languages.unshift("C++, GoLanf");
//output ["C++, GoLanf", "Javascript", "Python", "C#", "Java"]

Note: This method changes the length of an array.

You made it 👍

Hope this will help you to play with array in your daily routine of your Javascript life. Share the knowledge with your fellow developers.

JavaScript Array Methods Cheat Sheet

Happy.Code()