Learn JavaScript Arrays’ Methods

Here are some JavaScript Arrays’ Methods.

Array push()

The push() method adds a new element to the end of the array.

const vehicles = [“Car”, “Bus”, “Van”, “Lorry”, “Bike”];
vehicles.push(“Plane”);

//Output -> [“Car”, “Bus”, “Van”, “Lorry”, “Bike”, “Plane”]

and also you can get new array length by implementing like this,

const vehicles = [“Car”, “Bus”, “Van”, “Lorry”, “Bike”];
let length = vehicles.push(“Plane”);

//Output -> 6

Array pop()

The pop() method is used to remove the last element of the array.

const vehicles = [“Car”, “Bus”, “Van”, “Lorry”, “Bike”];
vehicles.pop();

//Output -> [“Car”, “Bus”, “Van”, “Lorry”]

If you want to get the pop value you need to implement like this,

const vehicles = [“Car”, “Bus”, “Van”, “Lorry”, “Bike”];
let value = vehicles.pop();

//Output -> Bike

Array shift()

By using this shift() method, you can remove the array first element. Refer the below example.

const vehicles = [“Car”, “Bus”, “Van”, “Lorry”, “Bike”];
vehicles.shift();

//Output -> [“Bus”, “Van”, “Lorry”, “Bike”]

If you want to get the removed value, use

const vehicles = [“Car”, “Bus”, “Van”, “Lorry”, “Bike”];
let value = vehicles.shift();

//Output -> Car

Array unshift()

If you want to add a new element to the beginning, this is the method for that.

const vehicles = [“Car”, “Bus”, “Van”, “Lorry”, “Bike”];
vehicles.unshift(“Plane”);

//Output -> [“Plane”, “Car”, “Bus”, “Van”, “Lorry”, “Bike”]

Array concat()

The concat() method creates a new array by merging existing arrays. If you want to merge two arrays, you can use this.

const array01 = [“A”, “B”, “C”];
const array02 = [“D”, “E”, “F”];
const newArray = array01.concat(array02););

//Output -> [“A”, “B”, “C”, “D”, “E”, “F”]

Here is another example,

const array01 = [“A”, “B”, “C”].concat(“D”);

//Output -> [“A”, “B”, “C”, “D”]

Array join()

const array01 = [“A”, “B”, “C”].join(“-“);

//Output -> A-B-C

Here is another example,

const array01 = [“A”, “B”, “C”].join(” and “);

//Output -> A and B and C

Array slice()

The slice() method slices out elements. If you use slice(1), array will remove first element. If you use slice(3), array will remove first 3 elements.

const array01 = [“A”, “B”, “C”].slice(1);
//Output -> [“B”, “C”]

const array01 = [“A”, “B”, “C”].slice(2);
//Output -> [“C”]

Array splice()

This is splice, not slice. Do not mess with this. Lol. The splice() method can be used to add new items to an array:

const array01 = [“A”, “B”, “E”];
array01.splice(2, 0, “C”, “D”);

//Output -> [ ‘A’, ‘B’, ‘C’, ‘D’, ‘E’ ]

In here, “2” means the position where new elements should be added and the “0” means, how many elements should be removed. If you replace 0 with any number, let assume you will replace 0 with 1, you will get,

const array01 = [“A”, “B”, “E”];
array01.splice(2, 1, “C”, “D”);

//Output -> [ ‘A’, ‘B’, ‘C’, ‘D’ ]

It means last element will remove from the array. If you add 3, the output will be [ ‘A’, ‘B’, ‘C’, ‘D’ ].

const array01 = [“A”, “B”, “E”];
array01.splice(2, 3, “C”, “D”);

//Output -> [ ‘A’, ‘B’, ‘C’, ‘D’ ]

Because there is no 3 elements after you added position 2 (It means after “B” only has “E”. if your array has [“A”, “B”, “E”, “F”, “G”], then you will see after position 2, elements will remove).

Array indexOf()

If you want to get the index of an element, you can use this method.

const array01 = [“A”, “B”, “C”].indexOf(“B”);

//Output -> 1

Array includes()

If you want to find out an element is in your array or not, you can use this method.

const array01 = [“A”, “B”, “C”].includes(“B”);

//Output -> True

Array find()

const array01 = [3, 5, 6, 8].find( (n) => n % 2 === 0 );

//Output -> 6

Also you can use this method like this,

const ages = [3, 10, 18, 20];

function checkAge(age) {
     return age > 18;
}

const array01 = ages.find(checkAge);

//Output -> 20

Array findIndex()

Find the index that you need to find something.

const array01 = [2, 4, 3, 5].find( (n) => n % 2 !== 0 );

//Output -> 3

Another example,

const ages = [3, 10, 18, 20];

function checkAge(age) {
     return age > 18;
}

const array01 = ages.findIndex(checkAge);

//Output -> 3

Array Map()

I am using map() method to multiply by 2 array elements.

const array01 = [2, 4, 3, 5].map( (n) => n * 2);

//Output -> [ 4, 8, 6, 10 ]

const No = [2, 4, 6, 8];

function multiple(No) {
return No * 2;
}

const array01 = No.map(multiple);

//Output -> [ 4, 8, 12, 16 ]

Array filter()

const array01 = [3, 5, 6, 8].filter( (n) => n % 2 === 0 );

//Output -> [6, 8]

Here is some documentation for more details – Click here

Array reduce()

const array01 = [2, 4, 3, 7].reduce( (acc, cur) => acc + cur );

//Output -> 16

Here is another perfect example for this JavaScript Arrays’ Methods – Click here

Array every()

I am checking my every array element greater than 6 or not.

const array01 = [2, 3, 4, 5].every( (x) => x < 6 );

//Output -> true

Array some()

I am checking my array has element that greater than 6.

const array01 = [3, 5, 6, 8].some( (x) => x > 6 );

//Output -> true

Array reverse()

If you want to reverse your array element you can use this method.

const array01 = [3, 5, 6, 8].reverse();

//Output -> [8, 6, 5, 3]

This is the end os “JavaScript Arrays’ Methods” article. Thank you for reading. If you are interesting on my article, make sure to follow my other articles as well and also make sure to leave a comment.

facebookShare on Facebook
TwitterTweet
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x