Top 20 commonly used Javascript array methods with examples

Hey guys in this post, we will discuss the most commonly used array methods and their usage.

What is an Array?

An array is a special variable, which can hold more than one value at a time. There are many useful built-in properties and methods that will help to solve any complex task which involves an array.

We will discuss the 20 most commonly used array methods that every developer should know.

Commonly used array methods

Following are the most commonly used array methods

map()
filter()
push()
sort()
concat()
forEach()
every()
some()
includes()
pop()
join()
reduce()
shift()
find()
findIndex()
unshift()
indexOf()
fill()
slice()
reverse()

Let’s discuss these methods one by one

Usage of map() method

This method creates a new array with the results of calling a provided function on every element in this array.

const usageOfMap = (numbers) => {
    const newArray = numbers.map(number => number * number);
    console.log('Usage of map():',newArray);
}

const numbers = [1, 2, 3, 4, 5];
usageOfMap(numbers);

Output:

D:\nodejs-workspace\Test>node index.js
Usage of map(): [ 1, 4, 9, 16, 25 ]

Usage of filter() method

This method creates a new array with only elements that pass the condition inside the provided function

const usageOfFilter = (fruits) => {
    const newArray = fruits.filter(fruit => fruit === "Apple");
    console.log("Usage of filter():", newArray);
}

const fruits = ["Apple", "Mango", "Grapes", "Apple", "Watermelon", "Orange", "Apple"];
usageOfFilter(fruits);

Output:

D:\nodejs-workspace\Test>node index.js
Usage of filter(): [ 'Apple', 'Apple', 'Apple' ]

Usage of push() method

This method adds one or more elements to the end of the array and returns the new length of the array.

const usageOfPush = (laptops) => {
    laptops.push("Macbook Air");
    console.log("Usage of push():", laptops);
}

const laptops = ["HP", "Lenovo", "Dell"];
usageOfPush(laptops);

Output:

D:\nodejs-workspace\Test>node index.js
Usage of push(): [ 'HP', 'Lenovo', 'Dell', 'Macbook Air' ]

Usage of sort() method

This method is used to arrange/sort the array’s elements either in ascending or descending order.

const usageOfSort = (countries) => {
    console.log("Usage of sort():");
    const ascendingOrder = countries.sort((a, b) => a > b ? 1: -1);
    console.log("Ascending order:", ascendingOrder);

    const descendingOrder = countries.sort((a, b) => a > b ? -1: 1);
    console.log("Descedning order:", descendingOrder); 
}

const countries = ["India", "Australia", "South africa", "Bangladesh", "Sri lanka"];
usageOfSort(countries);

Output:

D:\nodejs-workspace\Test>node index.js
Usage of sort():
Ascending order: [ 'Australia', 'Bangladesh', 'India', 'South africa', 'Sri lanka' ]
Descedning order: [ 'Sri lanka', 'South africa', 'India', 'Bangladesh', 'Australia' ]

Usage of concat() method

This method is used to merge two or more arrays and returns a new array, without changing the existing array.

const usageOfConcat = (list1, list2) => {
    const mergedArray = list1.concat(list2);
    console.log("Usage of concat():", mergedArray);
}

const list1 = ["HP", "Dell"];
const list2 = ["Macbook Air", "Lenovo"];
usageOfConcat(list1, list2);

Output:

D:\nodejs-workspace\Test>node index.js
Usage of concat(): [ 'HP', 'Dell', 'Macbook Air', 'Lenovo' ]

Usage of forEach() method

This method helps to loop over the array by executing a provided callback function for each element in an array.

const usageOfForeach = (laptops) => {
    laptops.forEach(laptop => {
        console.log(laptop);
    })
}

const laptops = ["HP", "Dell", "Macbook Air", "Lenovo"];
usageOfForeach(laptops);

Output:

D:\nodejs-workspace\Test>node index.js
HP
Dell
Macbook Air
Lenovo

Usage of every() method

This method checks every element in the array that passes the condition, returning true or false as appropriate.

const usageOfEvery = (laptops) => {
    const flag = laptops.every(laptop => laptop === 'Dell');
    console.log("Usage of every():", flag);
}

const laptops = ["HP", "Dell", "Macbook Air", "Lenovo"];
usageOfEvery(laptops);

const laptops1 = ["Dell", "Dell", "Dell", "Dell"];
usageOfEvery(laptops1);

Output:

D:\nodejs-workspace\Test>node index.js
Usage of every(): false
Usage of every(): true

Usage of some() method

This method checks if at least one element in the array passes the condition, returning true or false as appropriate.

const usageOfSome = (fruits) => {
    const flag = fruits.some(fruit => fruit === 'Mango');
    console.log("Usage of some():", flag);
}

const fruits = ["Apple", "Mango", "Orange", "Pineapple", "Watermelon"];
usageOfSome(fruits);

const fruits1 = ["Apple", "Banana", "Orange", "Pineapple", "Watermelon"];
usageOfSome(fruits1);

Output:

D:\nodejs-workspace\Test>node index.js
Usage of some(): true
Usage of some(): false

Usage of includes() method

This method checks if an array includes the element that passes the condition, returning true or false as appropriate.

const usageOfIncludes = (fruits) => {
    const flag = fruits.includes("Banana");
    console.log("Usage of includes():", flag);
}

const fruits = ["Apple", "Orange", "Pineapple", "Watermelon"];
usageOfIncludes(fruits);

const fruits1 = ["Apple", "Banana", "Orange", "Pineapple", "Watermelon"];
usageOfIncludes(fruits1);

Output:

D:\nodejs-workspace\Test>node index.js
Usage of includes(): false
Usage of includes(): true

Usage of pop() method

This method removes the last element from the end of the array and returns that element.

const usageOfPop = (fruits) => {
    fruits.pop();
    console.log("Usage of pop():", fruits);
}

const fruits = ["Apple", "Banana", "Orange", "Pineapple", "Watermelon"];
usageOfPop(fruits);

Output:

D:\nodejs-workspace\Test>node index.js
Usage of pop(): [ 'Apple', 'Banana', 'Orange', 'Pineapple' ]

Usage of join() method

This method returns a new string by concatenating all of the array’s elements separated by the specified separator.

const usageOfJoin = (array) => {
    const afterJoin = array.join(' ');
    console.log("Usage of join():", afterJoin);
}

const array = ["I", "love", "my", "country"];
usageOfJoin(array);

Output:

D:\nodejs-workspace\Test>node index.js
Usage of join(): I love my country

Usage of reduce() method

This method applies a function against an accumulator and each element in the array to reduce it to a single value.

const usageOfReduce = (numbers) => {
    const reducedValue = numbers.reduce((total, element) => { 
        return total + element
    });
    console.log("Usage of reduce():", reducedValue);
}

const numbers = [1, 2, 3, 4, 5];
usageOfReduce(numbers);

Output:

D:\nodejs-workspace\Test>node index.js
Usage of reduce(): 15

Usage of shift() method

This method removes the first element from an array and returns that element.

const usageOfShift = (fruits) => {
    fruits.shift();
    console.log("Usage of shift():", fruits);
}

const fruits = ["Apple", "Banana", "Orange", "Pineapple", "Watermelon"];
usageOfShift(fruits);

Output:

D:\nodejs-workspace\Test>node index.js
Usage of shift(): [ 'Banana', 'Orange', 'Pineapple', 'Watermelon' ]

Usage of find() method

This method returns the value of the first element in an array that pass the test in a testing function.

const usageOfFind = (numbers) => {
    const number = numbers.find(number => number > 3);
    console.log("Usage of find():", number);
}

const numbers = [1, 2, 3, 4, 5, 6, 7, 8];
usageOfFind(numbers);

Output:

D:\nodejs-workspace\Test>node index.js
Usage of find(): 4

Usage of findIndex() method

This method returns the index of the first element in an array that passes the test in a testing function.

const usageOfFindIndex = (laptops) => {
    const index = laptops.findIndex(laptop => laptop === "Dell");
    console.log("Usage of find():", index);
}

const laptops = ["HP", "Dell", "Macbook Air", "Lenovo", "HP", "Dell"];
usageOfFindIndex(laptops);

Output:

D:\nodejs-workspace\Test>node index.js
Usage of find(): 1

Usage of unshift() method

This method adds one or more elements to the beginning of an array and returns the new length of the array.

const usageOfUnshift = (laptops) => {
    const length = laptops.unshift("Lenovo");
    console.log("Usage of unshift():");
    console.log(length, laptops);
}

const laptops = ["HP", "Dell", "Macbook Air", "Lenovo", "HP", "Dell"];
usageOfUnshift(laptops);

Output:

D:\nodejs-workspace\Test>node index.js
Usage of unshift():
7 [ 'Lenovo', 'HP', 'Dell', 'Macbook Air', 'Lenovo', 'HP', 'Dell' ]

Usage of indexOf() method

This method returns the index of the first occurrence of the specified element in the array or -1 if it is not found.

const usageOfIndexOf = (laptops) => {
    const index = laptops.indexOf("Dell");
    console.log("Usage of indexOf():", index);
}

const laptops = ["HP", "Dell", "Macbook Air", "Lenovo", "HP", "Dell"];
usageOfIndexOf(laptops);

const laptops1 = ["HP", "Macbook Air", "Lenovo", "HP"];
usageOfIndexOf(laptops1);

Output:

D:\nodejs-workspace\Test>node index.js
Usage of indexOf(): 1
Usage of indexOf(): -1

Usage of fill() method

This method fills the elements in an array with a static value and returns the modified array.

const usageOfFill = (laptops) => {
    laptops.fill("Dell");
    console.log("Usage of fill():", laptops);
}

const laptops = ["HP", "Dell", "Macbook Air", "Lenovo", "HP", "Dell"];
usageOfFill(laptops);

Output:

D:\nodejs-workspace\Test>node index.js
Usage of fill(): [ 'Dell', 'Dell', 'Dell', 'Dell', 'Dell', 'Dell' ]

Usage of slice() method

This method returns a new array with specified start to end elements

const usageOfSlice = (laptops) => {
    const newArray = laptops.slice(1, 3);
    console.log("Usage of slice():", newArray);
}

const laptops = ["HP", "Dell", "Macbook Air", "Lenovo", "HP", "Dell"];
usageOfSlice(laptops);

Output:

D:\nodejs-workspace\Test>node index.js
Usage of slice(): [ 'Dell', 'Macbook Air' ]

Usage of reverse() method

This method reverses an array in place. Element at last index will be first and element at 0 index will be last.

const usageOfReverse = (laptops) => {
    laptops.reverse();
    console.log("Usage of reverse():", laptops);
}

const laptops = ["Macbook Air", "Lenovo", "HP", "Dell"];
usageOfReverse(laptops);

Output:

D:\nodejs-workspace\Test>node index.js
Usage of reverse(): [ 'Dell', 'HP', 'Lenovo', 'Macbook Air' ]

That’s it thank you for reading.

Checkout the complete javascript tutorial

Post Views: 1,377