DEV Community

ayeolakenny
ayeolakenny

Posted on

10 Most used Array methods in Javascript

In this blog post i'm going to walk you through the most commonly used array JavaScript methods.
Which is going to be helpful in your JavaScript journey, i would also try to keep it nice and simple, so lets dive right in;

1. "push();"

This works at the ending of an array,
which helps in adding elements to the end of an array.

Notice that the letter 'd' has been pushed(added) to the end of the array,
and it makes permanent change to the array.

let arr = ['a', 'b', 'c'];
console.log(arr.push('d'));//returns the new value of the array (4)
console.log(arr); //returns ['a', 'b', 'c', 'd']
Enter fullscreen mode Exit fullscreen mode

2. The "pop();"

Like the "push" method mentioned above.
the "pop" method also works at the ending of an array,
which helps in removing elements at the end of the array, and returns the element.

Notice the the letter 'd' has been popped(removed) out of the end of the array,
and it makes permanent change to the array.

let arr =  ['a', 'b', 'c', 'd'];
console.log(arr.pop()); //returns 'd'
console.log(arr); //returns  ['a', 'b', 'c']
Enter fullscreen mode Exit fullscreen mode

3. "shift();"

This works at the beginning of an array,
which helps in removing elements from the beginning of the array, and returns the element.

Notice the the letter 'a' has been shifted(removed) out of the end of the array,
and it makes permanent change to the array.

let arr =  ['a', 'b', 'c', 'd'];
console.log(arr.shift()); //returns 'a'
console.log(arr); //returns  ['b', 'c', 'd']
Enter fullscreen mode Exit fullscreen mode

4. "unshift();"

You guessed right, this is the opposite of the "shift()" method,
it also works at the beginning of an array, and helps in adding elements to the beginning an array,
and returns the length of the array.

Notice that the letter 'a' has been unshifted(added) to the brginning of the array,
and it makes permanent change to the array.

let arr = ['b', 'c'];
console.log(arr.unshift('a'));//returns the new value of the array (4)
console.log(arr); //returns ['a', 'b', 'c']
Enter fullscreen mode Exit fullscreen mode

5. "concat();"

This helps to concatenate(join/link) two arrays together.

Notice that the first array(arr) and the second array(arr2) has been concatenated(joined) together,
and moreover the "concat" method does not make any change to the array.

let arr =  ['a', 'b', 'c', 'd']; //first array
let arr2 = [true, false, true]; //second array
console.log(arr.concat(arr2));//returns ["a", "b", "c", "d", true, false, true]
console.log(arr);//returns ['a', 'b', 'c', 'd']
console.log(arr2);//returns[true, false, true]
Enter fullscreen mode Exit fullscreen mode

6. "join();"

This joins all the elements in an array to create a string, and does not affect or modify the array.

Notice that the "join" method takes an element and outputs it inbetween the strings.

let arr =  ['a', 'b', 'c', 'd'];
console.log(arr.join(''));//returns 'abcd'
console.log(arr.join('-'));//returns 'a-b-c-d'
console.log(arr)//returns ['a', 'b', 'c', 'd']
Enter fullscreen mode Exit fullscreen mode

7. "reverse();"

This basically takes in an array, and reverses it.

Notice that it makes a permanent change to the array.

let arr =  ['a', 'b', 'c', 'd'];
console.log(arr.reverse());//returns ['d', 'c', 'b', 'a']
console.log(arr);//returns ['d', 'c', 'b', 'a']
Enter fullscreen mode Exit fullscreen mode

8. "sort();"

This basically helps in sorting arrays to order, however causing permanent change to the array.

Notice that it sorts the numbers before the alphabets.

let arr = [5, 3, 'c', 'b', 'a', 4, 1, 2];
console.log(arr.sort();)//returns [1, 2, 3, 4, 5, 'a', 'b', 'c']
console.log(arr);//returns [1, 2, 3, 4, 5, 'a', 'b', 'c']
Enter fullscreen mode Exit fullscreen mode

9. "slice();"

This basically targets an array and returns the targeted array,
and the original array remains unchanged.

Notice that the value is returned from the first value((1)=b) of the array and one element aback from the second value ((2)=b) of the array,
and the original array remains unchanged.

let arr =  ['a', 'b', 'c', 'd'];
console.log(arr.slice(1,2));//returns ['b']
Enter fullscreen mode Exit fullscreen mode

10 "splice();"

Just like the "slice();" method, this also targets an array and returns the targeted array,
moreover it causes a permanent change in the array.

let arr = [1, 2, 3, 4, 5, 'a', 'b', 'c'];
console.log(arr.splice(5, 3));//returns ['a', 'b', 'c']
console.log(arr)//returns [1, 2, 3, 4, 5]
Enter fullscreen mode Exit fullscreen mode

Notice that the value is returned from the first value((5)='a') which states the element to start from,
and the second value(3) which states the number of elements to be removed from the array.

let arr = [1, 2, 3, 4, 5, 'a', 'b', 'c'];
console.log(arr.splice(5, 3, 'replaced'));//returns ['a', 'b', 'c']
console.log(arr)//returns [1, 2, 3, 4, 5, 'replaced']
Enter fullscreen mode Exit fullscreen mode

Notice that you can also replace a spliced element with another element by adding the element in the third argument.


Thats the 10 most common/used array methods i think all javascript programmers must learn, if you have any to add feel free to add below.

Discussion (2)

Collapse
noelemmanuel16 profile image
Noel Emmanuel

nice one bro,really learned alot ,keep it up

Collapse
kahramanx profile image
Mustafa Kahraman

What do you think about .reduce() method, is that still using in front-end?