Logo Smooets Horizontal White

Exploring 15 Practical JavaScript Array Methods: A Handy Cheat Sheet for Developers

JavaScript has evolved into a powerful programming language that is now a must-have tool in the skillset of most web developers. 

And for JavaScript programmers, Arrays, which are versatile data collections that can be modified in multiple ways, are one of JavaScript’s basic but also important features that you will often use.

What is Array in JavaScript

 

JavaScript Array Methods

 

How to visualize some types of values in programming

Arrays play a fundamental role in data structuring within JavaScript, providing developers with a convenient way to store and operate on data collections.

Typically, an array is an ordered series of values encompassing different data types like  numbers, strings, and even nested arrays.

This article will delve into some of the most practical and handy JavaScript array methods, accompanied by examples demonstrating their effectiveness in simplifying your coding workflow.

 

1. toString()

One of the simplest array methods in JavaScript, just like the name suggests it converts an array into a string.

Each item is converted into a string and then concatenated, with commas as their separators. For instance:

const array = [3, 4, '5a', '6b'];

console.log(array.toString());

// Result:'3,4,5a,6b'

2. join()

This is another useful method that operates in a similar way as the previous method. 

Because how this method works is that it takes all the items in an array and “join” them together into a single string. 

Automatically, the separator used to join the items is a comma, but you can freely modify the separator as an argument. For instance: 

const recipe= ['Rice', 'Steak', 'Vegetables'];

console.log(recipe.join());

// Result: Rice,Steak,Vegetable


console.log(recipe.join(' and '));

// Result: Rice and Steak and Vegetable


console.log(recipe.join('-'));

// Result: Rice-Steak-Vegetable

 

3. indexOf()

This method is simply used to find the first instance of a specific item within an array. 

It will return the index—hence the name—of the item if it is found in the array. However, if the item is not found, the method will return “-1”.

const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];

console.log(beasts.indexOf('bison'));

// Result: 1

In the code above, the method searches for the ‘bison’ item in the ‘beasts’ array, and returns the index of that value (which is 1, since arrays are zero-indexed in JavaScript).

 

4. forEach()

One useful method for looping through the items of an array and doing a specific action on each item. 

This method will take a function as an argument, which is then executed once for each item inside the array. As the function is executed, the current item is passed as an argument to the function.

const arrayTest = ['one', 'second', '3'];

arrayTest.forEach(item => console.log(item));

// Result:'one'

// Result:'second'

// Result:'3'

It can be used as an alternative to a for loop, and often results in more concise code.

 

5. at()

This method enables you to fetch an item from a specific index within the array. 

If the index you provided is out of range, the method will return undefined.

const arrayTest = ['one', 'second', '3', '4th'];

console.log(arrayTest.at(2));  

 //Result: '3'

In the example above, the method is called on the arrayTest array to fetch the item at index 2, which is ‘3’.

 

6. pop()

This simple method lets you take out the last item inside an array and then return it as a different value, for example:

const arrayTest = [3, 4, 5, 6];

console.log(arrayTest.pop());

//Result: '6'

console.log(arrayTest);

//Result: '[3, 4 ,5]'

7. splice()

Compared to the last method, this one is a more versatile method for modifying arrays compared to the last one. It enables you to add, remove, or even replace items within an array.

const recipe = ['Rice', 'Soy Sauce', 'Vegetables', 'Eggs'];

// Inserts at index 1

recipe.splice(1, 0, 'Garlic');

console.log(recipe);

// Result: Array ['Rice', 'Garlic', 'Soy Sauce', 'Vegetables', 'Eggs']

// Replaces 1 item at index 3

recipe.splice(3, 1, 'Meat');

console.log(recipe);

 

8. push()

The push() method is an easy and straightforward way to add one (or more) items to the end of an array. 

const recipe = ['Rice', 'Soy Sauce', 'Vegetables', 'Eggs'];

recipe.push('Sesame Oil', 'Chili Sauce');

console.log(recipe);

// Result:Array ['Rice', 'Garlic', 'Soy Sauce', 'Vegetables', 'Eggs', 'Sesame Oil', 'Chili Sauce']

 

9. shift()

This simple method is used to delete the first item from an array and return that item. Example:

const recipe = ['Rice', 'Soy Sauce', 'Vegetables', 'Eggs'];

recipe.shift();

console.log(recipe);

// Result:Array ['Soy Sauce', 'Vegetables', 'Eggs']

 

10. unshift()

Opposite to the previous method, the unshift() method allows you to add one or more items to the beginning of an array.

const recipe = ['Soy Sauce', 'Vegetables', 'Eggs'];

recipe.unshift('Beef');

console.log(recipe);

// Result:Array ['Beef', 'Soy Sauce', 'Vegetables', 'Eggs']

 

11. fill()

This method—would you guess—allows you to fill all or specific parts of an array with a static value. 

This fill() method also modifies the original array by setting the values of one or more items into the specified value.

const arrayTest = [3, 4, 5, 6];

arrayTest.fill(2);

console.log(arrayTest);

// Result: Array [2, 2, 2, 2]

To fill only specific parts of an array here’s an example how to do it:

arrayTest.fill(7, 2, 4);

console.log(arrayTest);

// Result: Array [3, 4, 7, 7]

In this code, the method fills the number 7 into the array from position 2 until position 4.

 

12. reverse()

Functions exactly as described – it reverses the order of items in an array. 

It’s a simple method that also modifies the original array by modifying the order of its items.

const arrayTest = [3, 4, 5, 6];

arrayTest.reverse();

console.log(arrayTest);

// Result:Array [6, 5, 4, 3]

 

13. includes()

The Includes() method helps you determine whether an array contains a particular item. 

It returns a boolean “true” or “false” value depending on whether the item exists in the array.

const recipe = ['Beef', 'Soy Sauce', 'Vegetables', 'Eggs'];

console.log(recipe.includes('Chili Sauce'));

// Result:false

 

14. every()

This method is similar to the previous method as it allows you to check whether all the items in an array pass a certain condition that you can set as arguments.

It also returns another true or false value indicating whether all the items in the array met the certain condition or not.

const isBelowLimit = (limit) => limit < 50;

const arrayTest = [2, 22, 19, 23, 42, 49];

console.log(arrayTest.every(isBelowLimit));

// Result:true

 

15. some()

The some() method is also similar to the previous methods above. It checks whether at least one item in an array meets a particular condition. 

If any item in the array satisfies the test, it returns a true boolean value, otherwise it returns false.

const arrayTest = [2, 22, 19, 23, 42, 49];

// Checks whether an item is odd

const odd = (item) => item % 2 !== 0;

console.log(arrayTest.some(odd));

// Result:true

Closing

In conclusion, there are numerous methods JavaScript provided to let use modify and play around with array, way more than we can write here.  While some methods might be more useful than others, they can still make your code more efficient, concise, and easier to maintain.

JavaScript is also one of our expertise that have helped companies around the world to solve their software development problem. Want to know how to help yours? Let us know!

Search
Popular Articles
Follow Us