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.
If we console.log the array, it becomes:
2)- push()
Unlike pop() method, push() method adds an element to the end of an array.
The array now becomes:
3)- shift()
shift() method removes the first element of an array.
The array becomes then:
4)- unshift()
unshift() method adds an element at the beginning of an array.
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
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.
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.
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.
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.
The new array is:
9)- fill()
To fill an array with a static value we use fill() method.
The array becomes:
We can also add the static value at a specific position of the array.
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 w 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.
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:
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.
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:
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.
13)- reverse()
reverse() method reverses the order of the array elements.
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.
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.
16)- at()
at() returns the element that is in the index specified in the parenthesis.
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.
In the browser we have an array that is created:
18)- slice()
slice() method returns a slice or a part of the array.
The new portion of the array will be:
The first argument that the slice() method takes is the beginning the returned array should start from. Here the returned array should start from index 1.
The second argument is the end where the returned array should stop. Here it should stop at index 3.
The end is not included, which means if we want the slice() method to stop at index 3, then the returned array will contain elements until index 2.
19)- Array.isArray()
This method returns true if the declared variable is an array.
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.
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
Top comments (0)