Table of contents
- Hello there, in this article I'm going to share JavaScript Array Methods.
- 1) .length
- 2) .push()
- 3) .pop()
- 4) .toString()
- 5) .concat()
- 6) copyWithin()
- 7) includes()
- 8) indexOf()
- 9) lastIndexOf()
- 10) join()
- 11) find()
- 12) findIndex()
- 13) fill()
- 14) filter()
- 15) flat()
- 16) forEach()
- 17) map()
- 18) reverse()
- 19) sort()
- 20) shift()
- 21) unshift()
- 22) slice()
- 23) splice()
Hello there, in this article I'm going to share JavaScript Array Methods.
Not only I will share the methods and usage, but you will find it very useful in practical usage as well. So let's explore them one by one.
One last thing to say before we start exploring, I recently started Newsletter ๐ฐ, you can join the list to get an email notification ๐ง when I Publish any Article.
1) .length
Using this property, return the number of total elements stored in the array.
Example
const vegetables = [
"Carrots ๐ฅ",
"Potatoes ๐ฅ",
"Chilli ๐ถ"
];
console.log(vegetables.length);
// returns 3
2) .push()
push method adds provided elements at the end of an Array. you can pass multiple parameters in push() method. let's see an example.
Example
const vegetables = [
"Carrots ๐ฅ",
"Potatoes ๐ฅ",
"Chilli ๐ถ"
];
vegetables.push("Broccoli ๐ฅฆ")
console.log(vegetables);
// [ 'Carrots ๐ฅ', 'Potatoes ๐ฅ', 'Chilli ๐ถ', 'Broccoli ๐ฅฆ' ]
see here, I pushed Broccoli ๐ฅฆ, and it's added at the last index of array, this method will modify the original array and this method return number which is the new length of the array after pushing given elements.
3) .pop()
the pop method will remove the last element of an Array. Let's understand it by example.
Example
const vegetables = [
"Carrots ๐ฅ",
"Potatoes ๐ฅ",
"Chilli ๐ถ"
];
let removedVegetable = vegetables.pop()
console.log(`${removedVegetable} removed from Array.`);
console.log(vegetables);
// Chilli ๐ถ removed from Array.
// [ 'Carrots ๐ฅ', 'Potatoes ๐ฅ' ]
see here, Chilli ๐ถ is at the last index of an Array, so the pop method removed it, and it will modify the original Array. this method will return the removed item from an array.
4) .toString()
This method will return the String representation of an Array. let's see in the example.
Example
const fruits = [
"Apple ๐",
"Orange ๐",
"Grapes ๐",
"Strawberry ๐",
"Cherry ๐"
];
console.log(fruits.toString());
// Apple ๐,Orange ๐,Grapes ๐,Strawberry ๐,Cherry ๐
5) .concat()
The contact method combines one or more than one array and returns the combined array, it doesn't modify the array, it returns the new array, in the below example, we've two arrays.
Fruits Array and then we've Vegetables Array, now I want both in the single array, so using the concat method we can combine them. and it will return a new array, see the output so you will get a better idea.
I used console.table()
, a different method to show results in the console, it will show the array in table form with index number so you can get a clear idea.
Example
const fruits = [
"Apple ๐",
"Orange ๐",
"Grapes ๐",
"Strawberry ๐",
"Cherry ๐",
"Watermelon ๐",
"Lemon ๐",
"Pineapple ๐",
"Kiwi ๐ฅ",
"Mango ๐ฅญ"
];
const vegetables = [
"Carrots ๐ฅ",
"Potatoes ๐ฅ",
"Chilli ๐ถ"
];
let vegetablesAndFruits = vegetables.concat(fruits)
console.table(vegetablesAndFruits);
/* Output:
โโโโโโโโโโโฌโโโโโโโโโโโโโโโโโโ
โ (index) โ Values โ
โโโโโโโโโโโผโโโโโโโโโโโโโโโโโโค
โ 0 โ 'Carrots ๐ฅ' โ
โ 1 โ 'Potatoes ๐ฅ' โ
โ 2 โ 'Chilli ๐ถ' โ
โ 3 โ 'Apple ๐' โ
โ 4 โ 'Orange ๐' โ
โ 5 โ 'Grapes ๐' โ
โ 6 โ 'Strawberry ๐' โ
โ 7 โ 'Cherry ๐' โ
โ 8 โ 'Watermelon ๐' โ
โ 9 โ 'Lemon ๐' โ
โ 10 โ 'Pineapple ๐' โ
โ 11 โ 'Kiwi ๐ฅ' โ
โ 12 โ 'Mango ๐ฅญ' โ
โโโโโโโโโโโดโโโโโโโโโโโโโโโโโโ
*/
6) copyWithin()
The syntax of this method is copyWithin(target, start, end?)
.
target
where to paste the copied element.start
from where to start copyingend
from where to end copying, this parameter is optional.
This method will copy and insert the element at the given target and modifies the original array.
Example
const vegetables = [
"Carrots ๐ฅ",
"Potatoes ๐ฅ",
"Chilli ๐ถ"
];
vegetables.copyWithin(0, 2)
console.log(vegetables);
// Output: [ 'Chilli ๐ถ', 'Potatoes ๐ฅ', 'Chilli ๐ถ' ]
7) includes()
This method takes two parameters, one is searchString
and another is startIndex
which is optional.
if the provided element is present in the array then it will return True else false
Example
const fruits = [
"Apple ๐",
"Orange ๐",
"Grapes ๐",
"Mango ๐ฅญ"
];
let apple = fruits.includes("Apple ๐");
console.log(apple);
// returns true
8) indexOf()
This method takes two parameters one is searchString
and another is startIndex
which is optional.
if the provided element is present in the array then it will return the index of that element, and if the element is not present in the Array then it will return -1.
Example
const vegetables = [
"Carrots ๐ฅ",
"Potatoes ๐ฅ",
"Chilli ๐ถ"
];
console.log(vegetables.indexOf("Chilli ๐ถ"));
// 2
9) lastIndexOf()
This function takes two parameters the required argument is searchParam
. this function will return the index of the last occurred element. if the element is not present in the Array then -1 will be returned.
Example
let travelHistory = ["Italy", "India", "Egypt", "Indonesia", "India", "Egypt"];
console.log(travelHistory.lastIndexOf("Egypt")); // 5
console.log(travelHistory.lastIndexOf("India")); // 4
console.log(travelHistory.lastIndexOf("Indonesia")); // 3
console.log(travelHistory.lastIndexOf("UAE")); // -1
10) join()
The join method has one parameter separator
which is optional, if not provided, the array elements are joined with a comma and return String. see the example below to understand it.
Example
const searchEngines = ["Google", "DuckDuckGo", "Yahoo"]
let searchEngineStr = searchEngines.join(" & ")
console.log(searchEngineStr);
// Output: Google & DuckDuckGo & Yahoo
here I provided '&' to join array elements.
11) find()
This method is very useful for finding elements from an array, if the condition is not satisfied then it will return undefined. see the example below.
Example
let users = ["abc", "xyz", "pqr", "iop", "mnb"];
let res1 = users.find(user => user === "pqr");
let res2 = users.find(user => user === "aaapqr");
console.log(res1); // pqr
console.log(res2); // undefined
12) findIndex()
This function takes callback fn as a parameter and it will run until the callback fn returns true, if it returns true the findIndex() will return the index of that element else it will return -1, see the example to understand it more.
Example
let users = ["abc", "xyz", "pqr", "iop", "mnb"];
let res1 = users.findIndex(user => user === "pqr");
let res2 = users.findIndex(user => user === "iii");
console.log(res1); // 2
console.log(res2); // -1
13) fill()
This method will replace array values with given static values in the fill function from start to end index if provided, else it will replace the entire array. see the example below.
Example
let score = ["o","o","o"];
score = score.fill("x");
console.log(score);
// ['x','x','x']
14) filter()
This method as per the name filters out the Array, this will return a new array and removes the element where the condition from the callback function results in true. So for example, I removed one such element.
Example
let food = ["pizza", "sandwich", "burger", "water", "water", "noodles"];
let bill = food.filter(f => f !== "water")
console.log(bill); // [ 'pizza', 'sandwich', 'burger', 'noodles' ]
15) flat()
This function flattens the Array by given depth. see the example below.
Example
const arr = [
0, 1, 2,
[3, 4, 5],
6, 7, 8
];
const narr = arr.flat()
console.log(narr);
16) forEach()
This function is used to iterate through the entire array. see the example below.
Example
const vegetables = [
"Carrots ๐ฅ",
"Potatoes ๐ฅ",
"Chilli ๐ถ"
];
vegetables.forEach(vegetable => console.log(vegetable));
17) map()
This function is similar to forEach() but it will return the new modified array. See the example below.
Example
const vegetables = [
"Carrots ๐ฅ",
"Potatoes ๐ฅ",
"Chilli ๐ถ"
];
let v = vegetables.map(vegetable => vegetable.toUpperCase())
console.log(v);
// [ 'CARROTS ๐ฅ', 'POTATOES ๐ฅ', 'CHILLI ๐ถ' ]
18) reverse()
This method will return a new reversed Array, see the Example below.
Example
const vegetables = [
"Carrots ๐ฅ",
"Potatoes ๐ฅ",
"Chilli ๐ถ"
];
let v = vegetables.reverse()
console.log(v);
// [ 'Chilli ๐ถ', 'Potatoes ๐ฅ', 'Carrots ๐ฅ' ]
19) sort()
This method sorts the original Array.
Example
const vegetables = [
"Carrots ๐ฅ",
"Potatoes ๐ฅ",
"Chilli ๐ถ"
];
vegetables.sort()
console.log(vegetables);
// [ 'Carrots ๐ฅ', 'Chilli ๐ถ', 'Potatoes ๐ฅ' ]
20) shift()
This method will remove the first element of the Array and returns the removed Item. if the array is empty then the returned value will be undefined
.
Example
const vegetables = [
"Carrots ๐ฅ",
"Potatoes ๐ฅ",
"Chilli ๐ถ"
];
let removedVal = vegetables.shift()
console.log(removedVal);
// Carrots ๐ฅ
21) unshift()
This method inserts a new item at the Start of an Array and returns the new length. see the example below.
Example
const vegetables = [
"Carrots ๐ฅ",
"Potatoes ๐ฅ",
"Chilli ๐ถ"
];
let newVal = vegetables.unshift("Corn ๐ฝ");
console.log(vegetables);
// [ 'Corn ๐ฝ', 'Carrots ๐ฅ', 'Potatoes ๐ฅ', 'Chilli ๐ถ' ]
22) slice()
This method will slice the Array by given start and end values.
start
starting index to sliceend
it's the end index of the element
the function will only go to end index - 1 if provided. this function will not modify the original Array, this will return a sliced array.
see the example below.
Example
const fruits = [
"Apple ๐",
"Orange ๐",
"Grapes ๐",
"Strawberry ๐",
"Cherry ๐",
"Watermelon ๐",
"Lemon ๐",
"Pineapple ๐",
"Kiwi ๐ฅ",
"Mango ๐ฅญ"
];
let newFruits = fruits.slice(4, 6)
console.log(newFruits);
// [ 'Cherry ๐', 'Watermelon ๐' ]
as you can see here I provided 6, so the function will slice it to index 4-5, resulting in two values to return.
23) splice()
This method will remove elements and inserts the given element. it takes the following parameters.
start
start index to start removingend
end index to end removevalues
: single value or multiple value to insert
this function will remove elements till the end-1 index. see the example below.
Example
const fruits = [
"Apple ๐",
"Orange ๐",
"Grapes ๐",
"Strawberry ๐",
"Cherry ๐",
"Watermelon ๐",
"Lemon ๐",
"Pineapple ๐",
"Kiwi ๐ฅ",
"Mango ๐ฅญ"
];
fruits.splice(0, 3, "Coconut ๐ฅฅ");
console.log(fruits);
/*
[
'Coconut ๐ฅฅ',
'Strawberry ๐',
'Cherry ๐',
'Watermelon ๐',
'Lemon ๐',
'Pineapple ๐',
'Kiwi ๐ฅ',
'Mango ๐ฅญ'
]
*/
Oh ๐ฅฒ, that's quite a long article, honestly, it took around 4-5 hours to prepare and write this article. if you enjoyed then do like and share, Thanks, see you in the next article. โ๏ธ