The Most Useful JavaScript Array Methods Explanation

An Array Methods Guide For Javascript Beginner.

JavaScript is a programming language that is commonly used in web application development. Besides, we can use it for mobile apps, games, AI, and so on. It has a lot of useful methods that we can use to work with different data types, such as arrays. In this article, I will discuss some useful JavaScript Array methods.

Js array methods in easy way

The push method

I think every JavaScript beginner knows about the method push() . It basically allows us to add an element to the end of an array.

The method push() takes one argument, which is the element we want to add at the end of the array.

Example:

let fruits = ["mango", "jackfruit", "pineapple"];
fruits.push("banana");
console.log(fruits);
//expected result: ["mango", "jackfruit", "pineapple" "banana"]

As you can see, the last element of the ‘fruits’ array banana added to the end of the array. You can add any type of data(numbers, strings, objects and so on).

The unshift method

The method unshift() is an array method that allows us to add an element at the beginning of an array.

The method unshift()takes one argument, which is the element we want to add at the starting of the array.

Example:

let fruits= ["mango", "jackfruit", "pineapple"];
fruits.unshift("banana");
console.log(fruits); 
//expected result: ["banana", "mango", "jackfruit", "pineapple"];

In the above example, the banana added to the beginning of the array.

The shift method

The method shift() is similar to the method unshift() , but instead of adding an element to the starting of the array, it removes the first or beginning element of the array.

The method shift() doesn’t need to take arguments. It is only used to remove the first element.

Example:

let prices= [10,20,30,40,50];
prices.shift(); //it returns the removed element(10)
console.log(prices);
 //results: [20, 30, 40, 50];

As you can see, the method shift() also returns the removed element, which is 10 in our case.

The pop method

The method pop() is used to remove the last element of an array. It doesn’t take arguments and it returns the removed element.

Example:

let prices= [10, 20, 30, 40, 50];
prices.pop(); //returns the removed element(50)
console.log(prices); 
//results: [10, 20, 30, 40];

Just use the method pop() if you want to remove the last element of an array.

The splice method

The method splice() is more useful and alternative method of the push() , unshift() , shift() , pop()method. It allows to add or remove array elements at any index that I want.

The method splice() takes three arguments or parameters:

• The index(required): this is the first argument that I will need to specify. It’s the array index where I will want to add and remove elements.
• A number(optional): the number of elements that I want to remove.
• Items(optional): this is the third argument where I write all the elements that I want to add to the array.

Example-1 :

let names = ["Karim", "Rahim", "Jabbar"];
names.splice(1, 0, "Jhony", "Mony");
console.log(names); 
//expected outcome: ["Karim", "Jhony", "Mony", "Rahim", "Jabbar"];

Example-2 :

let names = ["Karim", "Rahim", "Jabbar"];
names.splice(0, 2, "Jhony", "Mony");
console.log(names); 
//expected outcome: ["Jhony", "Mony", "Jabbar"];

Above the example-1, I used the method splice() and gave it three arguments. At index 1, I removed 0 elements and added the names Jhony and Mony. It’s that simple.

And above the example-2, I used the method splice() and gave it three arguments. At index 0, I removed 2 elements (Karim & Rahim) and added the names Jhony and Mony.

In the third argument, you can specify as many elements as you want to add. You can also choose to only use the first argument or the first two arguments if you want.

Here is an exampl using only one argument:

let names = ["Karim", "Rahim", "Jabbar"];
names.splice(2);
console.log(names);
//results: ["Karim", "Rahim"];

You can also give negative numbers if you want to start from the last element to the first one.

The concat method

The array method concat() is used to add two or more arrays. You can join your targeted arrays to apply this method and get a new array as a return value. New array contains the values of the joined arrays but doesn’t change the existing arrays.

Here is the example:

const phoneCollection = ['samsung','oppo','vivo'];
const phonePrice = [100, 200, 300];
const phoneDetails= phoneCollection.concat(phonePrice);
console.log(phoneDetails);
// expected output: ['samsung','oppo','vivo', 100, 200, 300];

As you can see, the method concat() also returns the array that is completely new, which is contained the elements of existing arrays.

The every method

The every() method tests if all elements in the array pass a test implemented by a provided function. It returns true or false.

If it finds an array element where the function returns a false value, every() returns false. If no false value find in whole array, every()returns true.

Example:

Check if all prices are equal to or greater than 30s.

const foodPrices= [30, 50, 40, 30, 50];
const bearabelLunch= foodPrice.every( foodPrice => foodPrice >= 30);
// isBearableLunch; //true

In the above example, you can see the every element of the array ‘foodPrice’ is greater than or equal 30. So, the every()method returns a true value. If any element of this array contains a value which is less than 30, the every() method will return a false.

The filter method

The filter() method returns a new array that’s element are found from the existing array by filtering on certain condition. In a word, it creates a new array based on if the items of an array pass a certain condition.

Thefilter()does not execute the function for array elements without values.

Example

const words = ['return', 'filter', 'final', 'execute', 'environment', 'result'];
const result = words.filter(word => word.length > 6);
console.log(result);
// expected output: ["execute", "environment", "result"]

In the above example, you can see there are three elements are found after applying the condition. So, the filter()method returns a new array depend on specific condition. If any element of this array contains a value which can maintain the condition, then thefilter() method will return an empty array.

The map method

The map() method creates a new array by manipulating the values in another array. Great for data manipulation and it is often used in React because it is an immutable method.

Example

Return an array with the double of all the values in the original array:

const array1 = [1, 4, 9, 16];
// pass a function to map
const map1 = array1.map(x => x * 2);
console.log(map1);
// expected output: [2, 8, 18, 32]

So, the map()method returns a new array by manipulating the each element of the main array.

The reduce method

The reduce() method reduces the array to a single value. This often overlooked method uses an accumulator to reduce all items in an array to a single value. Great for calculating totals.

Example

Add up the integers in an array.

const numbers = [5, 10, 15];
const total = numbers.reduce( (accumulator, currentValue) => accumulator + currentValue);
// total will be equal to 30

If you don’t declear the accumulator value, the value will count as the value of the first element of the array. The reduce() method returns value of the function is stored in the accumulator or total.

The forEach method

The forEach() method executes a function once for each element in an array. In order, applies a function on each item in an array.

Example

Log each array item to the console

const developers= ['react', 'vue', 'angular'];
developers.forEach( developer=> console.log(developer) );
// expected output:
// 'react'
// 'vue'
// 'angular'

The find method

The find()method returns the value of the first item in the supplied array that passes the provided testing function. If no values passes the testing function, the find()method will provide undefined.

Example

Find the first element in the array that is greater than 10.

const array1 = [5, 12, 8, 130, 44];
const found = array1.find(element => element > 10);
console.log(found);
// expected output: 12

As you can see the above example, ‘array1’ contains five values. When we operate the find() method on this array, it returns the first value of this array that is greater than 10. Besides, without the value 10, here are two more elements that are greater than 10 but it has returned the first one.

Every JavaScript developer should know these because you will always come into situations where you will need to use them.

Thank you for reading this article. I hope you found it useful.