Arrays are one of the most important concepts in JavaScript.
Arrays are objects that enable storing a collection of items and data under a single variable name and have the capability to perform a certain operation.
In this article, we’ll go through 20 methods we can use with an array to manage the data we have.
1)- pop()
One of the array methods is the pop() method.
The pop() method removes the last element of an array.
var phones=["Nokia","Iphone","Samsung","Xiaomi"];
phones.pop();
console.log(phones);
If we console.log the array, it becomes:
2)- push()
Unlike pop() method, push() method adds an element to the end of an array.
var phones=["Nokia","Iphone","Samsung","Xiaomi"];
phones.push("Oppo");
console.log(phones);
The array now becomes:
3)- shift()
shift() method removes the first element of an array.
var phones=["Nokia","Iphone","Samsung","Xiaomi"];
phones.shift();
console.log(phones);
The array becomes then:
4)- unshift()
unshift() method adds an element at the beginning of an array.
var phones=["Nokia","Iphone","Samsung","Xiaomi"];
phones.unshift("Sony");
console.log(phones);
The array becomes:
5)- splice()
To add or remove elements to/from a specific position in the array the splice() method allows us to do that.
a)- Add an element to a specific position
var phones=["Nokia","Iphone","Samsung","Xiaomi"];
phones.splice(2,0,"Sony","Oppo");
console.log(phones);
To add an element to a specific position we use splice() method. It takes 3 parameters at least:
The first parameter is where, or at what position we want to add our elements. In this example we want to add them at position 2, which means after “Iphone”, hence “2” is added as first parameter of splice().
The second parameter reflects how many elements we want to delete. In this example we don’t want to delete any element, so we added “0” as second parameter of splice().
The third parameter and beyond are the elements that we want to add.
So the array becomes:
b)- Remove a specific element
splice() method, unlike pop() and shift() methods, allows us to remove any element from an array. All we have to do is to specify its position.
var phones=["Nokia","Iphone","Samsung","Xiaomi"];
phones.splice(2,1);
console.log(phones);
To remove a specific element from the array we use splice() method. It takes 2 parameters:
The first parameter is where, or at what position we want to add our elements. But here we will use the first parameter to specify from where the “delete” operation should start. In this example it should start from position 2.
The second parameter is to specify how many elements should be removed. In this example we want to remove one element.
At the end we have the following array:
6)- map()
map() method generally accepts a function as argument. This function runs through each element of the array and returns a new array based on these elements.
var numbers=[10, 20, 30, 40];
var newArray= numbers.map(function(element){
return element*2;
})
console.log(newArray);
So here the function took every element of the array “numbers” and multiplied it by 2, and at the end returned a new array with the new results.
7)- filter()
filter() method returns a new array that contains all the elements that pass the test.
var age=[70,45,15,39];
var newArray= age.filter(function(ages){
return ages>30;
})
console.log(newArray);
Here the function returns the age if the age is greater than 30 and stores it in the new array.
8)- concat()
concat() method helps us merge arrays to get one array.
var vegetables=["broccoli","eggplants","potatoes"];
var fruit=["banana","kiwi","apple"];
var mixed=vegetables.concat(fruit);
console.log(mixed);
The new array is:
9)- fill()
To fill an array with a static value we use fill() method.
var numbers=[100,10,20,25,15];
var static=numbers.fill("kiwi");
console.log(static);
The array becomes:
We can also add the static value at a specific position of the array.
var numbers=[100,10,20,25,15];
var static=numbers.fill("kiwi", 2, 4);
console.log(static);
The array becomes:
To add static values to specific positions of the array we pass the fill() method some parameters:
The first parameter is the static value, in this example it is “Kiwi”.
The second parameter is starting from which position this value should be added, in this example it should be added starting from position 2.
The third value is at what position we should stop adding the static value. In this example it is at position 4.
10)- join()
join() method joins the elements of the array and returns a string.
var fruit=["banana","orange","kiwi","apple"];
var elements=fruit.join("/");
console.log(elements);
In the browser we have:
join() method accepts a separator that is added between the parenthesis. In this example we chose the backslash “/” as separator, we can choose any separator we want.
If we choose a hyphen as separator the code will be:
var fruit=["banana","orange","kiwi","apple"];
var elements=fruit.join("-");
console.log(elements);
And so the results will be:
11)- IndexOf()
indexOf() method returns the first index at which a given element can be found in the array. If the element is not in the array, then the method returns -1.
var fruit=["banana","orange","kiwi","apple","mango","kiwi"];
var element=fruit.indexOf("kiwi");
console.log("the index of this fruit is " + element);
In the browser we have:
Here the index of “Kiwi” is 2. Because indexOf() returns the index of the first occurrence of the element. If we try this with “apple” we’ll have 3 as an index.
However, what about if we have the same element repeated twice or 3 times or more in the array, and we want to know the index of the second occurrence or third or fourth occurrence?
Let’s see that with “Kiwi”. “Kiwi” is repeated twice. So the index of the first “Kiwi” is 2. To know the index of the second “Kiwi” we’ll add:
var fruit=["banana","orange","kiwi","apple","mango","kiwi"];
var element=fruit.indexOf("kiwi",3);
console.log("the index of this fruit is " + element);
3 represents the start point from where the array should start looking. And here it should start after the first “Kiwi”, which means at position 3.
In the browser we have:
12)- includes
includes() helps to check if an element is in the array. If so, it returns true.
var fruit=["banana","orange","kiwi","apple","mango"];
var element=fruit.includes("orange");
console.log(element);
//true
13)- reverse()
reverse() method reverses the order of the array elements.
var fruit=["banana","orange","kiwi","apple","mango"];
fruit.reverse();
console.log(fruit);
In the browser we have:
14)- every()
every() method returns true if all the elements of the array pass the test. This method accepts a function that runs through all the array’s elements.
var ages=[70,54,36,19,33];
var check= ages.every(function(age){
return age>18;
})
console.log(check);
//true
15)- some()
some() is a method that returns true if at least one element in the array passes the test given by the function passed as argument.
var ages=[70,54,36,19,33];
var check= ages.some(function(age){
return age>60;
})
console.log(check);
//true
16)- at()
at() returns the element that is in the index specified in the parenthesis.
var cars=["BMW","Audi","Ford","Tesla"];
var carName=cars.at(2);
console.log(carName + " is at index 2");
In the browser we have:
17)- of()
This method creates a new array from a variable number of arguments, regardless of number or type of the arguments.
var newArray=Array.of("Thomas","John","Liam","Michael");
console.log(newArray);
In the browser we have an array that is created:
18)- slice()
slice() method returns a slice or a part of the array.
var names=["Thomas","John","Liam","Michael"];
var slicedArray=names.slice(1,3);
console.log(slicedArray);
The new portion of the array will be:
19)- Array.isArray()
This method returns true if the declared variable is an array.
var names=["Thomas","John","Liam","Michael"];
console.log(Array.isArray(names));
//true
20)- delete()
This methods deletes an element from the array by specifying the index we want to be deleted. However, the delete() method leaves undefined or empty holes in the array after the element is deleted.
Which means even if the element is deleted, the length of the array does not change.
If for example the length of the array is 5, then after an element is being deleted the length will stay 5.
var names=["Thomas","John","Liam","Michael"];
delete names[2];
console.log(names);
In the browser we have:
It is not advisable to use this method to delete elements from an array.
To delete an element from an array use splice() method instead.
Read More
What are the different types of inputs in HTML forms?
Understanding JavaScript Objects: From Basic Concepts to Practical Usage