Let's explore JavaScript Array Methods

Let's explore JavaScript Array Methods

ยท

8 min read

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 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. โœŒ๏ธ

ย