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:
.length
.forEach
.map
.filter
.concat
.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.
Related Posts
Unveiling the Fascination of the Collatz Conjecture: Exploring Sequence Creation with JavaScript
The Collatz Conjecture, also known as the 3x+1 problem, is a fascinating mathematical puzzle that has intrigued mathematicians for decades. It has sparked publications with titles such as The Simplest Math Problem Could Be Unsolvable, or The Simple Math Problem We Still Can’t Solve because it is, indeed, rather simple-looking.
Read moreThe Art of Data Visualization: Exploring D3.js
Data is everywhere, flowing into our applications from various sources at an unprecedented rate. However, raw data alone holds little value unless it can be transformed into meaningful insights.
Read moreJavaScript’s Secret Weapon: Supercharge Your Web Apps with Web Workers
During an interview, I was asked how we could make JavaScript multi-threaded. I was stumped, and admitted I didn’t know… JavaScript is a single-threaded language.
Read more