10 Most used Array methods in Javascript

#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']

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']

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']

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']

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]

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']

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']

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']

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']

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]

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']