JavaScript Array Methods and How to Use Them

Arrays are essential building blocks of any program. In this article, we’ll go through some useful array methods, and learn how to apply them to your programs.

This article will cover the following array methods:

1. .length
2. .forEach
3. .map
4. .filter
5. .concat
6. .sort

1. Array .length

Array.prototype.length is probably the most simplistic method on this list. It literally returns the length of an array.

From MDN: The length property of an object which is an instance of type Array sets or returns the number of elements in that array. The value is an unsigned, 32-bit integer that is always numerically greater than the highest index in the array.

const arr = [1, 2, 3];
console.log(arr.length);
// Output: 3

Interestingly, you can also empty an array by using .length:

const arr = [1, 2, 3];
arr.length = 0;
console.log(arr);
// Output: []

2. Array .forEach()

Array.prototype.forEach

From MDN: The forEach() method executes a provided function once for each array element.

Using a for loop:

const arr = [1, 2, 3];
for (let i = 1; i <= arr.length; i++) {
  console.log(i);
}
// Output: 1, 2, 3

It is much easier and even cleaner to use a forEach method.

const arr = [1, 2, 3];
arr.forEach((el) => console.log(el));
// Output: 1, 2, 3

3. Array .map()

Array.prototype.map

From MDN: The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

Using a for loop:

const arr = [1, 2, 3];
for (let i = 1; i <= arr.length; i++) {
  console.log(i + 1);
}
// Output: 2, 3, 4

Using .map():

const arr = [1, 2, 3];
const mapArr = arr.map((el) => el + 1);

console.log(mapArr);
// Output: 2, 3, 4

4. Array .filter()

Array.prototype.filter

From MDN: The filter() method creates a shallow copy of a portion of a given array, filtered down to just the elements from the given array that pass the test implemented by the provided function.

Using a for loop:

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
for (let i = 1; i <= arr.length; i++) {
  if (i > 3) {
    console.log(i);
  }
}
// Output: 4, 5, 6, 7, 8, 9, 10

Using .filter()

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const greaterThanThree = arr.filter((num) => num > 3);
console.log(greaterThanThree);
// Output: 4, 5, 6, 7, 8, 9, 10

5. Array .concat()

Array.prototype.concat

From MDN: The concat() method is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array.

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const arr3 = arr1.concat(arr2);
console.log(arr3);
// Output: 1, 2, 3, 4, 5, 6

6. Array .sort()

Array.prototype.sort

From MDN: The sort() method sorts the elements of an array in place and returns the reference to the same array, now sorted. The default sort order is ascending, built upon converting the elements into strings, then comparing their sequences of UTF-16 code units values.

This is quite interesting, which is why we saved it for last. Thus far when we used for loops, it’s been quite simple. Sorting an array without using the sort() method can be a bit tedious:

let arr = [4, 5, 2, 3, 1];
let temp;

function sortArr(arr) {
  for (let i = 0; i < arr.length; i++) {
    for (let j = i + 1; j < arr.length; j++) {
      if (arr[i] > arr[j]) {
        temp = arr[i];
        arr[i] = arr[j];
        arr[j] = temp;
      }
    }
  }
  return arr;
}

const newArr = sortArr(arr);
console.log(newArr);
// Output: 1, 2, 3, 4, 5

Using sort():

const arr = [4, 5, 2, 3, 1];
console.log(arr.sort());
// Output: 1, 2, 3, 4, 5

That’s it!

After reading about these array methods and seeing their for loop counterparts, we can come to a greater appreciation for them. We hope this article has helped you learn something new.

Don’t forget to check out these string methods.