Arrays & methods in JS

Array, is an non-primitive data type that helps to store the collection of multiple items. It starts from the zeroth index, store different types of data, and can be resizable. If index starts from negative number so array will be shown in reverse order.

Example:

const country = ["USA", "Germany", "India", "England"];

There are different pre-defined methods to perform different operations with the array like add, remove, filter or sort out any value. These methods further create shallow copy where Array’s reference is copied into the new array and sometimes return value different from the original array based on the method used for new array.

Let’s talk about some common methods with the example. Let’s take an example of cricket team.

const cricketTeam = ["Sachin", "Rohit", "Kohli", "Dhoni"];

Array.at():

It gives the item value at the index position based on the given index value. If we want to know the position of the batting position of the batsman in the team so it will provide the player name for that batting position but index starts from zeroth position so we assume it at 4th position in the example.

const battingOrder = cricketTeam.at(3);
console.log(battingOrder);
//Output: Dhoni

Array.concat():

It gives the item value at the index position based on the given index value. If we want to know the position of the batting position of the batsman in the team so it will provide the player name for that batting position but index starts from zeroth position so we assume it at 4th position in the example.

const cricketTeam1 = ["Sachin", "Rohit", "Kohli", "Dhoni"];
const cricketTeam2 = ["Ashwin", "Bumrah", "Kumble", "Harbhajan"];

const team = cricketTeam1.concat(cricketTeam2);
console.log(team);
//Output: ["Sachin", "Rohit", "Kohli", "Dhoni", "Ashwin", "Bumrah", "Kumble", "Harbhajan"]

Array.filter():

Filter method of the Array, filtered out values in the array based on the provided function and gives the new array. If we want to create a collection of the batsman in the team so it will provide the player’s name for in the new array after implement provided function.

const cricketTeam = ["Sachin", "Rohit", "Kohli", "Bumrah"];

const team = cricketTeam.filter((batsman) => batsman != "Bumrah");

console.log(team);
//Output: ["Sachin", "Rohit", "Kohli"]

Array.map():

Map method use to implement the mathematical function in an array, just like we can get multiples of 2.

const multiples = [1, 2, 3, 4, 5];

const number = multiples.map((num) => num * 2);

console.log(number);
//Output: [2, 4, 6, 8, 10]

Array.pop():

It removes the last element from the array and return that element, for example, need to drop a player for any reason so with the help of Pop, we can remove the last player in the array.

const cricketTeam = ["Sachin", "Rohit", "Kohli", "Bumrah"];

const droppedPlayer = cricketTeam.pop();

console.log(droppedPlayer);
//Output: "Bumrah"

console.log(cricketTeam);
//Output: ["Sachin", "Rohit", "Kohli"]

Array.push():

It adds the given element in the end of the array and return the length of the Array, for example, team needs an all-rounder player so we can add a allrounder player at the end with the help of Push method.

const cricketTeam = ["Sachin", "Rohit", "Kohli", "Bumrah"];

const addPlayer = cricketTeam.push("Jadeja");

console.log(addPlayer);
//Output: 5

console.log(cricketTeam);
//Output: ["Sachin", "Rohit", "Kohli", "Bumrah", "Jadeja"]

Array.shift():

It removes the first element from the array and return that element, for example, need to drop a player for any reason so with the help of Pop, we can remove the first player in the array.

const cricketTeam = ["Sachin", "Rohit", "Kohli", "Bumrah"];

const droppedPlayer = cricketTeam.shift();

console.log(droppedPlayer);
//Output: "Sachin"

console.log(cricketTeam);
//Output: ["Rohit", "Kohli", "Bumrah"]

Array.unshift():

It adds the given element in the beginning of the array and return the length of the Array, for example, team needs opener player so we can add a opener player in the beginning with the help of Unshift method.

const cricketTeam = ["Sachin", "Rohit", "Kohli", "Bumrah"];

const addPlayer = cricketTeam.unshift("Sahwag");

console.log(addPlayer);
//Output: 5

console.log(cricketTeam);
//Output: ["Sahwag", "Sachin", "Rohit", "Kohli", "Bumrah"]

Array.slice():

Slice method helps to provide partial array into the new array object with the given index’s value in start and end index, but it will not include end’s index value in result, so overcome this we can use array.length+1 as a end index parameter for example, check the last example.

const cricketTeam = ["Sachin", "Kohli", "Dhoni", "Yuvraj", "Jadeja", "Aswin", "Bumrah"];

//Get the Batsman players
console.log(cricketTeam.slice(0, 4));
//Output: ["Sachin", "Kohli", "Dhoni", "Yuvraj"]

//Get the Allrounds
console.log(cricketTeam.slice(3, 5));
//Output: ["Yuvraj", "Jadeja"]

//Get the Bowlers
console.log(cricketTeam.slice(3, cricketTeam.length + 1 ));
//output: ["Yuvraj", "Jadeja", "Aswin", "Bumrah"]

Array.splice():

Splice method changes the value of the array by removing, replacing or adding new elements in the array. It requires start, Delete Count and Item value. We can add multiple elements in the array by provide multiple item values in the method.

const cricketTeam = ["Sachin", "Kohli", "Yuvraj", "Bumrah"];
//Input for all below examples

//insert at index 1
console.log(cricketTeam.splice(2, 0, "Sahwag");
//Output: ["Sachin", "Kohli", "Sahwag", "Yuvraj", "Bumrah"]

// Replaces 1 element at index 1
console.log(cricketTeam.splice(1, 1, "Dhoni"));
//Output: ["Sachin", "Dhoni", "Yuvraj", "Bumrah"];

// Replaces 2 element at index 1 & 2
console.log(cricketTeam.splice(1, 1, "Dhoni" , "Raina"));
//Output: ["Sachin", "Dhoni", "Raina", "Bumrah"];

//Remove the 1 element at index 2
console.log(cricketTeam.splice(2, 1));
//output: ["Sachin", "Kohli", "Bumrah"];

//Remove the 2 element at index 1 & 2
console.log(cricketTeam.splice(1, 2));
//output: ["Sachin", "Bumrah"];

These are the commonly used methods in arrays. There are several more methods like .reduce(), .shift(), .sort() and many more.

For more detailed explanation, visit Arrays.