This comprehensive handbook covers everything you need to know about JavaScript array methods, from the basics to the advanced. With clear explanations and real-world examples, you'll learn how to use array methods to manipulate, iterate over, and transform your data. Master JavaScript array methods today!
In programming, an array is a data structure that contains a collection of elements. Arrays are very useful because you can store, access, and manipulate multiple elements in a single array.
In this handbook, you'll learn how to work with arrays in JavaScript. We'll cover the specific rules you need to follow when creating an array, as well as how to use array methods to manipulate and transform your array as desired.
📘 15+ Best JavaScript Books for Beginners and Experienced Coders
In JavaScript, an array is implemented as an object that can have a group of items, elements, or values as an ordered collection. This means you can access an array's element using its position in the collection. You'll see why this is important in the next section.
An array can hold elements of different data types, and the size of the array is not fixed. This means that you can add as many elements to an array as you want.
There are two ways you can create an array in JavaScript:
[]
Array()
constructorThe square brackets []
is a literal notation used to create an array. The array elements are defined inside the brackets, with each element separated using a comma ,
.
The following example shows how to create an array named myArray
that has three elements of different types: a Number, a String, and a Boolean.
let myArray = [29, 'Nathan', true];
And here's how to create an array with 3 number elements:
let myNumbers = [5, 10, 15];
You can specify as many elements as you want inside the square brackets.
Another way to create an array is to use the Array()
constructor, which works like the square brackets:
let myArray = Array(29, 'Nathan', true);
// or
let myNumbers = new Array(5, 10, 15);
Note that the constructor function can be called with or without the new
operator. Both create an array object just fine.
In most code examples and codebases, you'll most likely see developers use the square brackets to create an array instead of using the constructor. This is because it's faster to type []
instead of Array()
.
As I've said before, an array is an ordered collection, so you can access an element from its position (also known as index number) in the array.
To access an array's element, you need to specify the array name followed by square brackets. Inside the square brackets, specify the index of the element you want to access.
For example, here's how you access the first element of myArray
:
let myArray = [29, 'Nathan', true];
console.log(myArray[0]); // 29
console.log(myArray[1]); // Nathan
console.log(myArray[2]); // true
The array index number starts from 0 and increases by 1 for each element added to the array.
If you try to access an index number that hasn't been assigned any value yet, JavaScript will return undefined
as shown below:
let myArray = [29, 'Nathan', true];
console.log(myArray[3]); // undefined
console.log(myArray[4]); // undefined
console.log(myArray[100]); // undefined
You can also replace an element on a certain index number with a new element by using the assignment =
operator.
The following example shows how to replace the third element (boolean) with a string:
let myArray = [29, 'Nathan', true];
// Replace the third element
myArray[2] = 'Sebhastian';
console.log(myArray); // [ 29, 'Nathan', 'Sebhastian' ]
In the example above, you can see that the true
boolean value is replaced with the string 'Sebhastian'. Next, let's take a look at the length
property.
length
PropertyThe length
property shows how many elements an array has. You can access this property using the dot .
notation as shown below:
let myArray = [29, 'Nathan', true];
console.log(myArray.length); // 3
let animals = ['Dog', 'Cat'];
console.log(animals.length); // 2
The length
property is updated each time you add or remove elements from an array.
To add one or more elements to an array, you can use the array push()
and unshift()
methods.
The push()
method adds new elements to the end of the array, while the unshift()
method inserts new elements at the start of the array:
let animals = ['Dog', 'Cat'];
animals.push('Horse', 'Fish');
console.log(animals);
// [ 'Dog', 'Cat', 'Horse', 'Fish' ]
animals.unshift('Bird');
console.log(animals);
// [ 'Bird', 'Dog', 'Cat', 'Horse', 'Fish' ]
Here, notice that you can use a comma to separate the elements you want to add to the array.
Next, let's see how you can remove elements from an array.
To remove an element from an array, you can use the shift()
and pop()
methods, depending on the position of the element you want to remove.
Use the shift()
method to remove the first element, and use pop()
to remove the last element in the array:
let animals = ['Dog', 'Cat', 'Horse', 'Fish'];
animals.shift();
console.log(animals);
// [ 'Cat', 'Horse', 'Fish' ]
animals.pop();
console.log(animals);
// [ 'Cat', 'Horse' ]
Both shift()
and pop()
can only remove one element at a time. If you want to remove an element in the middle of an array, you need to use the splice()
method.
splice()
to Remove or Add Element(s)The array splice()
method is used to remove or add elements at specific positions. You use this method when push
, pop
, shift
, and unshift
can't get the job done.
To remove elements using the splice()
method, you need to specify two arguments: the index number to start array manipulation, and the number of elements to delete.
For example, suppose you want to delete two elements at index 1 and 2 in the animals
array. Here's how you do it:
let animals = ['Dog', 'Cat', 'Horse', 'Fish'];
animals.splice(1, 2);
console.log(animals);
// [ 'Dog', 'Fish' ]
The splice(1, 2)
means start array manipulation at index 1, then delete 2 elements from there.
To add elements using splice()
, you need to specify the elements to add after the second argument.
For example, here I add a string value 'Bird' and 'Squid' at index 1:
let animals = ['Dog', 'Cat'];
animals.splice(1, 0, 'Bird', 'Squid');
console.log(animals);
// [ 'Dog', 'Bird', 'Squid', 'Cat' ]
If you don't want to delete any elements, you can pass 0
as the second argument to the splice()
method. You then specify the elements you want to add.
The splice()
method can be confusing the first time you see it, but don't worry! You'll memorize how it works with more practice.
To check if a variable is an array, you can use the Array.isArray()
method which tests whether the argument given to the method is an array or not.
This method returns true
when you pass an array to it, and false
for anything else:
let myArray = [1, 2, 3];
let notAnArray = 'Hello!';
console.log(Array.isArray(myArray)); // true
console.log(Array.isArray(notAnArray)); // false
Note that you need to specify the Array
class when calling the isArray()
method.
This is because isArray()
is a static method, so you can only call it directly from the class that defines the method.
There are 4 ways you can iterate over an array in JavaScript, depending on the method you use:
for
loopwhile
loopfor...in
loopfor...of
loopforEach()
methodLet's learn how to use these 4 methods with examples.
To iterate over an array using a for
loop, you need to use the array length
as the condition expression.
In the following example, a for
loop will continue to run as long as the variable i
is less than the array's length:
let animals = ['dog', 'bird', 'cat', 'horse'];
for (let i = 0; i < animals.length; i++) {
console.log(animals[i]);
}
You can manipulate the elements of the array inside the for
loop's body.
Another way to iterate over an array is to use a while
loop. You need to use a variable and the array's length to control when the iteration stops, like the for
loop previously:
let animals = ['dog', 'bird', 'cat', 'horse'];
let i = 0;
while (i < animals.length) {
console.log(animals[i]);
i++;
}
Inside the while loop, you need to increment the i
variable by one to avoid an infinite loop.
The for...in
loop is another syntax that you can use to iterate over an array. This loop returns the index position of the array, so you can use it like this:
let animals = ['dog', 'bird', 'cat', 'horse'];
for (i in animals) {
console.log(animals[i]);
}
The for...in
loop is more concise when compared to a for
or while
loop, but it's better to use a for...of
loop when iterating over an array.
The for...of
loop can be used to iterate over an array. It returns the array's element in each iteration:
let animals = ['dog', 'bird', 'cat', 'horse'];
for (element of animals) {
console.log(element);
}
While the for...in
loop returns the index position, the for...of
loop returns the element directly.
forEach()
methodThe JavaScript array object itself has a method called forEach()
that you can use to iterate over an array from position 0 to the last position.
The method accepts a callback function that gets executed in each iteration. For each iteration, the method also passes the array's element and index position. Here's an example of using the method:
let animals = ['dog', 'bird', 'cat', 'horse'];
animals.forEach(function (element, index) {
console.log(`${index}: ${element}`);
});
The output will be:
0: dog
1: bird
2: cat
3: horse
And that's how you iterate over an array using the forEach()
method. You can use any method you like best.
To convert an array into a string, you can use the toString()
or join()
method.
The toString()
method converts a given array into a string, with the elements separated by a comma:
const animals = ['cat', 'bird', 'fish'];
console.log(animals.toString()); // "cat,bird,fish"
The join()
method also converts an array into a string, but you can pass a specific string separator as its argument.
The following example shows how to use a slash /
and an empty string as the string separator:
const animals = ['cat', 'bird', 'fish'];
console.log(animals.join()); // "cat,bird,fish"
console.log(animals.join('/')); // "cat/bird/fish"
console.log(animals.join('')); // "catbirdfish"
Behind the scenes, the toString()
method actually calls the join()
method to create the string.
JavaScript arrays are treated as objects. So when you compare two arrays, the comparison will look to the reference — that is, the address to the memory location that stores that array — instead of the actual values.
The comparison of two arrays will return false
even when they contain the same elements:
let arrayOne = [7, 8, 9];
let arrayTwo = [7, 8, 9];
console.log(arrayOne === arrayTwo); // false
This is because arrayOne
and arrayTwo
are different objects stored in different memory locations.
The only way an array comparison would return true
is when both variables refer to the same array object. In the example below, the arrayTwo
variable is a reference to arrayOne
:
let arrayOne = [7, 8, 9];
let arrayTwo = arrayOne;
console.log(arrayOne === arrayTwo); // true
But this won't work when you need to compare two arrays from different references. One way to compare arrays is by converting the array to a JSON object.
Before comparing two different arrays, you need to convert them into JSON objects by calling the JSON.stringify()
method.
You can then compare the two serialized strings as follows:
let arrayOne = [7, 8, 9];
let arrayTwo = [7, 8, 9];
console.log(JSON.stringify(arrayOne) === JSON.stringify(arrayTwo)); // true
But this solution compares the arrays indirectly, and having the same values in different orders will return false
instead of true
.
To compare the elements of two arrays programmatically, you need to use another solution.
every()
methodAnother way you can compare two arrays is by using the combination of the length
property and the every()
method.
First, you compare the length of the arrays so the comparison doesn't return true
when the second array contains more elements than the first array.
After that, you test if the element on the first array is equal to the element on the second array, at the same index position. Use the &&
operator to join the comparison as shown below:
let arrayOne = [7, 8, 9];
let arrayTwo = [7, 8, 9];
let result =
arrayOne.length === arrayTwo.length &&
arrayOne.every(function (element, index) {
// compare if the element matches in the same index
return element === arrayTwo[index];
});
console.log(result); // true
This way, you compare if the element at a specific index is really equal or not.
Still, this solution requires both arrays to have equal elements at a certain index in order to return true
.
If you don't care about the order and only want both arrays to have the same elements, you need to use the includes()
method instead of the equality ===
operator.
includes()
methodIn order to compare array elements that are out of order, you can use the combination of the every()
and includes()
methods.
The includes()
method tests whether an array has a specific element you specified as its argument:
let arrayOne = [7, 8, 9];
let arrayTwo = [9, 7, 8];
let result =
arrayOne.length === arrayTwo.length &&
arrayOne.every(function (element) {
return arrayTwo.includes(element);
});
console.log(result); // true
Another alternative to the includes()
method is to use the indexOf()
method, which returns the index of the specified element.
When the element isn't found, the indexOf()
method returns -1
. This means you need to make every()
return true
when indexOf(element) !== -1
as shown below:
let arrayOne = [7, 8, 9];
let arrayTwo = [9, 7, 8];
let result =
arrayOne.length === arrayTwo.length &&
arrayOne.every(function (element) {
return arrayTwo.indexOf(element) !== -1;
});
console.log(result); // true
As you can see, comparing arrays is not straightforward. You need to use the methods provided by the array object creatively.
But don't worry! Most of the time you don't need to compare array objects when developing a web application. Next, let's learn how you can copy an array.
One way to copy an array is to use the slice()
method, which is provided exactly for copying an array.
You only need to call the method and assign the returned array to a new variable like this:
let arrayOne = [7, 8, 9];
let arrayTwo = arrayOne.slice();
console.log(arrayOne); // [ 7, 8, 9 ]
console.log(arrayTwo); // [ 7, 8, 9 ]
But keep in mind that the slice()
method returns a shallow copy, which means that the values of the copy are references to the original array.
A shallow copy won't cause a problem when your array contains primitive values like strings, numbers, or booleans. But it might become an issue when you copy an array of objects.
To show you what I mean, see the example below:
let arrayOne = [{ name: 'Jack', age: 25 }];
let arrayTwo = arrayOne.slice();
console.log(arrayOne); // [ { name: 'Jack', age: 25 } ]
console.log(arrayTwo); // [ { name: 'Jack', age: 25 } ]
arrayTwo[0].name = 'Nathan';
console.log(arrayOne); // [ { name: 'Nathan', age: 25 } ]
console.log(arrayTwo); // [ { name: 'Nathan', age: 25 } ]
Do you notice what's wrong? The code above modifies only the name
property of arrayTwo
, but it changes both arrays!
This is because arrayTwo
is a shallow copy of arrayOne
. To prevent this behavior, you need to perform a deep copy so that arrayTwo
values are disconnected from the original array.
To create a deep copy of an array, you need to copy the array by using the JSON.parse()
and JSON.stringify()
methods instead of using the slice()
method.
The JSON.stringify()
transforms the array into a JSON string, and JSON.parse()
converts that string back into an array.
Because the copy is created from a JSON string, there's no connection to the original array anymore:
let arrayOne = [{ name: 'Jack', age: 25 }];
let arrayTwo = JSON.parse(JSON.stringify(arrayOne));
console.log(arrayOne); // [ { name: 'Jack', age: 25 } ]
console.log(arrayTwo); // [ { name: 'Jack', age: 25 } ]
arrayTwo[0].name = 'Nathan';
console.log(arrayOne); // [ { name: 'Jack', age: 25 } ]
console.log(arrayTwo); // [ { name: 'Nathan', age: 25 } ]
Here, you can see that changing the property of arrayTwo
doesn't change the same property in arrayOne
. Nice work!
JavaScript provides the concat()
method that you can use to merge two or more arrays into one. The following example shows how to merge the cats
and birds
arrays as one array named animals
:
let cats = ['tiger', 'cat'];
let birds = ['owl', 'eagle'];
let animals = cats.concat(birds);
console.log(animals); // [ 'tiger', 'cat', 'owl', 'eagle' ]
console.log(cats); // [ 'tiger', 'cat' ]
console.log(birds); // [ 'owl', 'eagle' ]
At first glance, the syntax of the concat()
method seems to merge the birds
array into the cats
array. But as you can see from the console logs, the cats
array is actually unchanged.
To make the code more intuitive, you can call the concat()
method from an empty array instead of from the cats
array:
let cats = ['tiger', 'cat'];
let birds = ['owl', 'eagle'];
let animals = [].concat(cats, birds);
Although this syntax is more intuitive, you will most likely encounter the cats.concat(birds)
syntax in many JavaScript source code. Which syntax to use? That's for you and your team to decide.
The concat()
method allows you to merge as many arrays as you need. The following example merges three arrays as one:
let cats = ['tiger', 'cat'];
let birds = ['owl', 'eagle'];
let dogs = ['wolf', 'dog'];
let animals = [].concat(cats, birds, dogs);
console.log(animals); // [ 'tiger', 'cat', 'owl', 'eagle', 'wolf', 'dog' ]
You've now learned how to merge arrays using the concat()
method. Let's look at how you can merge arrays with the spread operator next.
The spread operator ...
can be used to expand elements of the arrays you want to merge. You need to put the expanded elements in one new array as follows:
let cats = ['tiger', 'cat'];
let birds = ['owl', 'eagle'];
let animals = [...cats, ...birds];
console.log(animals); // [ 'tiger', 'cat', 'owl', 'eagle' ]
Here, you can see that the elements from cats
and birds
arrays are expanded into another array, and that array is assigned as the value of the animals
variable.
Both the concat()
method and the spread operator can be used to merge multiple arrays just fine.
There are three ways you can search an array, depending on the result you want to achieve:
Let's learn all three ways to search an array together. Don't worry, they are simple.
If you only want to know if a certain element exists in an array, you can use the includes()
method. The following example searches for the string value 'e' in an array of strings:
let letters = ['a', 'b', 'c', 'd'];
console.log(letters.include('e')); // false
The includes()
method returns true
when the element is found, or false
when it isn't.
Other times, you might want to get the index position of the element. You need to use the indexOf()
method in that case:
let letters = ['a', 'b', 'c', 'd'];
console.log(letters.indexOf('c')); // 2
Here, the indexOf()
method is called on the letters
array to search for the index of the value 'c'. The method returns -1
when the element isn't found, but in this case it returns 2
as the letter c is at the 2nd index (remember, JS uses zero-based indexing, meaning the count starts from 0, not 1).
To find elements that meet certain criteria, you need to use the filter()
method.
The filter()
method is a built-in method available for JavaScript array objects that can help you in filtering an array. The syntax of the method is as follows:
arrayObject.filter(callback, thisContext);
The method has two parameters:
callback
(Required) – The filtering function that will be executed for each array valuethisContext
(Optional) – The value of this
keyword inside the callback
The thisContext
parameter is optional and usually not needed. You only need to define the callback
function, which will accept three arguments:
currentElement
being processed into the methodindex
of the element that starts from 0
array
object where you call filter()
filterCallback(currentElement, index, array){
// ...
}
The callback function must include a validation pattern that returns either true
or false
.
Let's see an example of filter()
in action. Let's say you have an array called stockPrices
as follows:
let stockPrices = [3, 7, 2, 15, 4, 9, 21, 14];
You want to filter the prices to include only those greater than 5.
Here's how you do it with the filter()
method:
let stockPrices = [3, 7, 2, 15, 4, 9, 21, 14];
let filteredPrices = stockPrices.filter(function (currentElement) {
return currentElement > 5;
});
console.log(filteredPrices); // [7, 15, 9, 21, 14]
The filter()
method evaluates the currentElement
and returns either true
or false
.
If your callback function returns true
, the currentElement
will be added to the result array:
currentElement
is 3
so the callback returns false
currentElement
is 7
so the callback returns true
and the value is pushed into the result arrayfilteredPrices
variableAnd that's how the method works. Next, let's see how to use the filter()
method to filter an array of objects.
The filter()
method can also be used on an array of objects.
Suppose you have an array of objects containing imaginary stock prices and their symbols as shown below:
let stocks = [
{
code: 'GOOGL',
price: 1700,
},
{
code: 'AAPL',
price: 130,
},
{
code: 'MSFT',
price: 219,
},
{
code: 'TSLA',
price: 880,
},
{
code: 'FB',
price: 267,
},
{
code: 'AMZN',
price: 3182,
},
];
Now you need to filter the array to contain only stocks with price
value less than 1000. Here's how you do it:
let filteredStocks = stocks.filter(function (currentElement) {
return currentElement.price < 1000;
});
The value of filteredStocks
will be as follows:
0: {code: "AAPL", price: 130}
1: {code: "MSFT", price: 219}
2: {code: "TSLA", price: 880}
3: {code: "FB", price: 267}
Finally, you can also write the callback function using the arrow function syntax like this:
let filteredStocks = stocks.filter(
currentElement => currentElement.price < 1000
);
When you have simple filter criteria, using the arrow function syntax can help you write cleaner code.
To sort an array, you can use the provided sort()
method, which sorts an array in ascending order by default:
let numbers = [5, 2, 4, 1];
numbers.sort();
console.log(numbers); // [ 1, 2, 4, 5 ]
If you want to sort an array in descending order, you can call the reverse()
method after the sort()
method as shown below:
let numbers = [5, 2, 4, 1];
numbers.sort().reverse();
console.log(numbers); // [ 5, 4, 2, 1 ]
The reverse()
method will reverse the array, so the first array element becomes the last, the last becomes the first, and so on.
A multi-dimensional array is an array that contains another array. To create one, you need to write an array inside an array literal (the square bracket)
The following example shows how you can create a two-dimensional array:
let numbers = [[5, 6, 7]];
To access the array, you just need to call the variable with two array indices. The first index is for the outer array, and the second index is for the inner array:
let numbers = [[5, 6, 7]];
console.log(numbers[0][0]); // 5
console.log(numbers[0][1]); // 6
console.log(numbers[0][2]); // 7
As you can see from the example above, the array [5, 6, 7]
is stored inside index 0
of the outer []
array. You can add more elements inside the array as follows:
let numbers = [[5, 6, 7], [10], [20]];
console.log(numbers[1][0]); // 10
console.log(numbers[2][0]); // 20
A multi-dimensional array is not required to have the same array length, as can be seen above. Although you can create even a three or four-dimensional array, it's not recommended to create more than a two-dimensional array because it will be confusing.
Notice how difficult it is to read and access the value [23]
inside the three-dimensional array below:
let numbers = [[5, 6, 7, [23]]];
console.log(numbers[0][3][0]); // 23
Finally, you can still use JavaScript Array
object methods like push()
, shift()
, and unshift()
to manipulate the multi-dimensional array:
let numbers = [[5, 6, 7, [23]]];
numbers.push([50]);
console.log(numbers); // [[5, 6, 7, [23]], [50]]
numbers.shift();
console.log(numbers); // [[50]]
numbers.unshift('13');
console.log(numbers); // ["13", [50]]
A multi-dimensional array has no unique methods compared to a one-dimensional array. Often, it's used to store a group of related data as one array.
The following example shows how to group name
and age
values under a multi-dimensional array:
let users = [
['Nathan', 28],
['Jack', 23],
['Alex', 30],
];
Unless you have to use an array, it's better to use an array of objects to store a group of related data:
let users = [
{ name: 'Nathan', age: 28 },
{ name: 'Jack', age: 23 },
{ name: 'Alex', age: 30 },
];
Ideally, you should use only one-dimensional arrays in your project. Use two-dimensional structure if you really need to, but never go beyond that or you'll have a hard time manipulating the array later.
Congratulations on finishing this JavaScript Array Guide. I hope this tutorial has helped you understand how to create, copy, and manipulate an array in JavaScript.
Source: https://www.freecodecamp.org
#javascript #array