22
Top JavaScript Array Methods with Examples
In programming, an array is a collection of elements or items. Arrays store data as elements and retrieve them back when you need them.
The array data structure is widely used in all programming languages that support it.
There are many great articles on JavaScript arrays already available around the internet. So why did I write yet another article on the same subject? What’s the motivation?
Well, over the years of interacting with my mentees, I realized that most beginners need a tutorial that covers arrays thoroughly from beginning to end with examples.
So I decided to create such an article chock full of meaningful examples. If you are a beginner at JavaScript, I hope you’ll find it very helpful.
A pair of square brackets [] represents an array in JavaScript. All the elements in the array are comma(,) separated.
In JavaScript, arrays can be a collection of elements of any type. This means that you can create an array with elements of type String, Boolean, Number, Objects, and even other Arrays.
Here is an example of an array with four elements: type Number, Boolean, String, and Object.
const mixedTypedArray = [100, true, 'freeCodeCamp', {}];
The position of an element in the array is known as its index. In JavaScript, the array index starts with 0, and it increases by one with each element.
So, for example, in the above array, the element 100 is at index 0, true is at index 1, 'freeCodeCamp' is at index 2, and so on.
The number of elements in the array determines its length. For example, the length of the above array is four.
Interestingly, JavaScript arrays are not of fixed length. You can change the length anytime by assigning a positive numeric value. We will learn more about that in a while.
How to Create an Array in JavaScript
You can create an array in multiple ways in JavaScript. The most straightforward way is by assigning an array value to a variable.
The unshift() the method adds a new element to an array (at the beginning), and "unshifts" older elements:
const fruits = [“Orange”, “Apple”, “Mango”, “Banana”,];
fruits.unshift(“Lemon”);
console.log(fruits)The push() the method adds a new element to an array (at the end):
const fruits = [“Orange”, “Apple”, “Mango”, “Banana”,];
fruits.push(“lemon”);
console.log(fruits);The shift() the method removes the first array element and "shifts" all other elements to a lower index.
const fruits = [“Banana”, “Orange”, “Apple”, “Mango”];
fruits.shift();
console.log(fruits)The pop() the method removes the last element from an array:
const fruits = [“Banana”, “Orange”, “Apple”, “Mango”];
fruits.pop();
console.log(fruits)The slice() method slices out a piece of an array into a new array.
This example slices out a part of an array starting from array element 1 (“Orange”):
const fruits = [“Banana”, “Orange”, “Lemon”, “Apple”, “Mango”];
const citrus = fruits.slice(1);
console.log(fruits)The slice() the method creates a new array. It does not remove any elements from the source array.
The filter() the method creates a new array filled with elements that pass a test provided by a function.
The filter() the method does not execute the function for empty elements.
The filter() the method does not change the original array.
const users = [
{firstName: "Joe", lastName: "Doe"},
{firstName: "Alex", lastName: "Clay"},
{firstName: "Opie", lastName: "Winston"},
{firstName: "Wasten", lastName: "Doe"},
]
const newUser = users.filter(user => user.firstName == "Opie")
console.log(newUser)The reverse() method reverses the order of the elements in an array.
The reverse() method overwrites the original array.
const array1 = ['one', 'two', 'three'];
console.log('array1:', array1); //["one", "two", "three"]const reversed = array1.reverse();
console.log('reversed:', reversed); //["three", "two", "one"]
// Careful: reverse is destructive -- it changes the original array.
console.log('array1:', array1); //["three", "two", "one"]The sort() method sorts an array alphabetically:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
console.log(fruits)I hope you’ve found this article insightful, and that it helps you understand JavaScript arrays more clearly. Please practice the examples multiple times to get a good grip on them.
Thanks for reading
Support me!
22