JavaScript array is a special data type that, along with the JavaScript object, lets you manipulate an entire range of information under the roof of one variable. Although the latter has some apparent advantages over the former one, like, for instance, it can be used to create associative array; nevertheless, the first one has some aces in the hole, and these aces are JavaScript array methods.

JavaScript Array Methods

JavaScript array is a special complex data type, in essence, it is a list-like object. Therefore, it has:

  • a particular property, aka length;
  • elements, aka items of an array;
  • and a vast set of JavaScript array methods that lets you unleash the full power hidden inside a component.

By default, JavaScript offers developers a lavish variety of methods to manipulate data. This diversity ensures flexibility and universality of the component.

Let’s take a look at some of the most useful JavaScript array methods that make your life a whole lot easier when it comes to working with arrays.

Most Useful JavaScript Array Methods

Adding and Removing Items

push(): adds one or more elements to the end of an array.

var avengers = ["Captain Marvel", "Captain America", "Iron Man"];
avengers.push("Hulk"); //adding one element
avengers.push ("Hawkeye", "Black Widow"); // adding more than one element to the end of array

unshift(): adds one or more elements to the beginning of an array.

var avengers = ["Captain Marvel", "Captain America", "Iron Man"];
avengers.unshift("Hulk"); //adding one element to the beginning of array
avengers.unshift("Hawkeye", "Black Widow"); // adding more than one element to the beginning of array

pop(): removes the last element of an array.

var avengers = ["Captain Marvel", "Captain America", "Iron Man"];
avengers.pop();
//Alternatively, you can return the value that was popped out
var lastElem = avengers.pop();

shift(): returns and at the same time deletes the first element of an array.

var avengers = ["Captain Marvel", "Captain America", "Iron Man"];
avengers.shift();
//Alternatively, you can return the value
var lastElem = avengers.shift();

Using push() and pop(), you can imitate a Stack data structure (Last In First Out). Here’s an example:

var avengers = ["Captain Marvel", "Captain America", "Iron Man"];
avengers.push("Hulk"); 

console.log(avengers);               // ["Captain Marvel", "Captain America", "Iron Man", "Hulk"];

last_element = avengers.pop(); 

console.log(avengers);               // ["Captain Marvel", "Captain America", "Iron Man"]
console.log(last_element); // "Hulk"

Use shift() and push() for imitating a Queue data structure(First In First Out). Here’s an example:

var avengers = ["Captain Marvel", "Captain America", "Iron Man"];
first_item = avengers.shift();

console.log(avengers); // ["Captain America", "Iron Man"]
console.log(first_item);   // "Captain Marvel"

avengers.push(first_item); // add it back

Splice()

This is a universal method for adding, inserting, and removing elements from an array. The syntax for splice() is:

array.splice(index [, deleteCount, elem1, ..., elemN]);
  • index – starting position;
  • deleteCount – number of elements to remove;
  • elem1,…elemN –  elements to insert.

Here’s an example to remove an element from the second index of an array:

var numbers= [1, 2, 3, 4, 5, 6, 7];

numbers.splice(1, 1); // remove the element from index #1

console.log(numbers); // [1, 3, 4, 5, 6, 7]

Here’s an example for removing 2 elements from the specified position and replacing them with 3 new elements:

var numbers= [1, 2, 3, 4, 5, 6, 7];

numbers.splice(1, 2, "100", "200", "300"); // starting from index 1, remove 2 elements and insert 3 new elements

console.log(numbers); // [1, "100", "200", "300", 4, 5, 6, 7];

You can also insert new elements without removing any existing item from an error. For that, you need to set deleteCount to 0, like this:

var numbers= [1, 2, 3, 4, 5, 6, 7];

numbers.splice(2, 0, "100", "200"); //from index 2, delete 0 elements and insert 2 new elements

console.log(numbers); // [1, 2, "100", "200", 3, 4, 5, 6, 7]

Lastly, you can use negative indexes to specify a position from the end of an array. For example, let’s remove the second last element from the array:

var numbers= [1, 2, 3, 4, 5, 6, 7];

numbers.splice(-2, 1);

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

Iteration Methods

Iteration methods are increasingly popular among developers. They give you an opportunity to cycle through an entire array and perform specific operations. There are five iteration methods in JavaScript:

1. filter(): creates a new array of elements that pass the filter criteria.

var numbers= [1, 2, 3, 4, 5, 6, 7];
var odd_numbers = numbers.filter(item => item % 2 == 1); // using arrow function

var even_numbers = numbers.filter(function(item) { return item % 2 == 0; }); // using a regular function


console.log(odd_numbers);   // [1, 3, 5, 7]
console.log(even_numbers);  // [2, 4, 6]

There are two things to note here. First, you can use either arrow functions or regular functions. Second, when defining the function, be careful not to change the array element since it can cause some unpleasant surprises later.

2. every(): tests whether all elements in an array pass specific criteria. If they do, it returns true, else it returns false.

var numbers = [1, 2, 44, 5, 66, 76, 98];

function digits(nums) {
  return nums <= 9;
}

console.log(numbers.every(digits)); // false

3. forEach(): allows you to perform operation on each element of an array.

var numbers = [1, 2, 44, 5, 66, 76, 98];

function increase(item, index, arr) {
  arr[index] = item + 10;
}

var update_array = numbers.forEach(increase); 
console.log(update_array); // [11, 12, 54, 15, 76, 86, 108]

4. map(): a simplified version of forEach() that allows you to perform an operation on each element of an array.

var numbers = [1, 2, 44, 5, 66, 76, 98];

function increase(item) {
  return item + 10;
}

var update_array = numbers.map(increase); 
console.log(update_array); // [11, 12, 54, 15, 76, 86, 108]

5. some(): tests whether at least one element of an array passes a given criteria. Returns true even if one element passes a test, else, it returns false.

var numbers = [1, 2, 44, 5, 66, 76, 98];

function digit(item) {
  return item <= 9;
}
// check whether there is at least one digit in the array
var check = numbers.some(digit); // true

Array Merge Methods

There will be times when you need to merge two or more arrays using JavaScript. These situations should be addressed using the concat() method. Several things to note about this method:

  • It does not change the existing array but returns a new one containing the merged items.
  • It takes any number of arrays as its argument.
  • It also takes strings as arguments.

Here’s a basic examples:

var odd_numbers = [1,3,5,7,9];
var even_numbers = [2,4,6,8];

var all_numbers = odd_numbers.concat(even_numbers); // returns [1,3,5,7,9,2,4,6,8]
var all_number_with_zero = all_numbers.concat("0"); // returns [1,3,5,7,9,2,4,6,8, "0"]

Here’s an example of merging more than two arrays:

var odd_numbers = [1,3,5,7,9];
var even_numbers = [2,4,6,8];
var negative_numbers = [-1,-2,-3,-4];
var dec_numbers = [10, 20, 30, 40];

var all_numbers = odd_numbers.concat(even_numbers, negative_numbers, dec_numbers); //[1,3,5,7,9, 2,4,6,8, -1,-2,-3,-4, 10, 20, 30, 40]

Sort Methods

Sorting is one of the most popular operations when it comes to the collection of elements. JavaScript array object has two methods for reordering items: reverse() and sort().

While the first method only reverses the order of the elements and returns a new array, the second method is more powerful.

By default, the sort() method compares elements as strings. It is good when you have an array of strings, however, what if an array includes numbers? Then, it will not work properly. In this case, you need to use an alternative compare function as an argument. Here’s a simple example of how to sort an array of numbers in descending order:

var numbers = [5, 10, 1, 7, 250, 45];
var numbers_sorted= numbers.sort(function(a, b){return b - a}); //[1, 5, 7, 10, 45, 250]

Note: you can also compare different data types, such as objects.

Array Prototype Method

Since JavaScript array is an object, it means you have access to Array.Prototype so that you can modify its default behavior. Although it is not recommended to do so as you will affect the behavior of all arrays in the global context, the safe things to do is to add other helpful functions.

For instance, it is common to extend the ability of a JavaScript array object to return the first element without deleting it. Here’s an example:

var avengers = ["Captain Marvel", "Captain America", "Iron Man"];

Array.prototype.first = function() {
// Here you can define whatever operations you want
return this[0]; 
}

console.log(avengers.first()); // prints: Captain Marvel

From now on, the method first() will be available for every array in your scope. Sometimes it’s a blessing and sometimes it’s a curse. Therefore, it is for you to decide whether to extend the scope of JavaScript methods or use combinations of already existing ones.

Wrapping Up

JavaScript array methods let you masterfully manipulate data inside an array. You can do lots of stuff without reinventing the wheel. However, if you still want to create something new and improve this data type with custom methods, you can easily embrace its “object” nature and extend its default possibilities.