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 copying
end 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 slice
end 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 removing
end end index to end remove
values: 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. ✌️

Let's explore JavaScript Array Methods

Table of contents

Hello there, in this article I'm going to share JavaScript Array Methods.

1) .length

Example

2) .push()

Example

3) .pop()

Example

4) .toString()

Example

5) .concat()

Example

6) copyWithin()

Example

7) includes()

Example

8) indexOf()

Example

9) lastIndexOf()

Example

10) join()

Example

11) find()

Example

12) findIndex()

Example

13) fill()

Example

14) filter()

Example

15) flat()

Example

16) forEach()

Example

17) map()

Example

18) reverse()

Example

19) sort()

Example

20) shift()

Example

21) unshift()

Example

22) slice()

Example

23) splice()

Example