5 Javascript array methods you should know

Dec 12, 2020 · by Senthil Ganesh

Arrays are objects which are list-like and has methods to several operations on the data in the array. In this article we will see the methods to know for working with array of objects.

1. filter() method

The filter() method creates a new array containing elements from the parent array that match the conditional statement set in the callback function. If the condition returns false, the element will not be in the output array. The callback function executes for each of the elements of the array and it is required. This method does not affect the original array.

The callback functions take three parameters.

  1. Current value
  2. Index
  3. Array

The current value is the only required parameter in the callback function


let players = [
  { name: 'Sachin', score: 154, balls: 121 },
  { name: 'Kohli', score: 01, balls: 10 },
  { name: 'Dravid', score: 102, balls: 145 },
  { name: 'Yuvaraj', score: 65, balls: 21 },
  { name: 'Gambhir', score: 90,balls: 78 }
];

//Filter the players whose score is greater than 90
let highScores = players.filter(player => player.score >= 90);

console.log(highScores)
//(3) [{…}, {…}, {…}]
//0: {name: "Sachin", score: 154, balls: 121}
//1: {name: "Dravid", score: 102, balls: 145}
//2: {name: "Gambhir", score: 90, balls: 78}

2. map() method

The map() method creates a new array with the results from the callback function. The callback function executes for each of the elements of the array. This method does not affect the original array.

The callback functions take three parameters.

  1. Current value
  2. Index
  3. Array

The current value is the only required parameter in the callback function

let players = [
  { name: 'Sachin', score: 154, balls: 121 },
  { name: 'Kohli', score: 01, balls: 10 },
  { name: 'Dravid', score: 102, balls: 145 },
  { name: 'Yuvaraj', score: 65, balls: 21 },
  { name: 'Gambhir', score: 90,balls: 78 }
];

let strikeRates = players.map(player => (player.score *100)/ player.balls);
console.log(strikeRates)
//(5) [127.27272727272727, 10, 70.34482758620689, 309.5238095238095, 115.38461538461539]
//0: 127.27272727272727
//1: 10
//2: 70.34482758620689
//3: 309.5238095238095
//4: 115.38461538461539

3. slice() method

The slice() method creates a new array with a shallow copy of the original array based on the start and end parameters. The start and end parameter is the index of the original array. This method does not affect the original array and the method returns the array as follows:

  1. An array of Objects – The slice method creates a new array with references to the existing objects in the original array. The change value in any of the arrays will reflect in both the array. But if a new element is added to either array, the other array is not affected.
  2. An array of primitive data types (like strings, numbers, booleans) – The slice method creates a new array. Any change in any of the array will not affect the other array.

let players = [
  { name: 'Sachin', score: 154, balls: 121 },
  { name: 'Kohli', score: 01, balls: 10 },
  { name: 'Dravid', score: 102, balls: 145 },
  { name: 'Yuvaraj', score: 65, balls: 21 },
  { name: 'Gambhir', score: 90,balls: 78 }
];

//Select the 2nd and 3rd item in the arrary
let playerSecondThird = players.slice(1,3);
console.log(playerSecondThird)
//(2) [{…}, {…}]
//0: {name: "Kohli", score: 1, balls: 10}
//1: {name: "Dravid", score: 102, balls: 145}

//Select the last 2 players
let lastTwoPlayers = players.slice(-2);
console.log(lastTwoPlayers)
//(2) [{…}, {…}]
//0: {name: "Yuvaraj", score: 65, balls: 21}
//1: {name: "Gambhir", score: 90, balls: 78}


//select all the players from 2nd index (Dravid)
let allPlayersFrom2ndIndex = players.slice(2)
console.log(allPlayersFrom2ndIndex)
//(3) [{…}, {…}, {…}]
//0: {name: "Dravid", score: 102, balls: 145}
//1: {name: "Yuvaraj", score: 65, balls: 21}
//2: {name: "Gambhir", score: 90, balls: 78}

// Select all the players except the last one
let allPlayersExceptLastOne = players.slice(0,-1)
console.log(allPlayersExceptLastOne)
(4) [{…}, {…}, {…}, {…}]
//0: {name: "Sachin", score: 154, balls: 121}
//1: {name: "Kohli", score: 1, balls: 10}
//2: {name: "Dravid", score: 102, balls: 145}
//3: {name: "Yuvaraj", score: 65, balls: 21}

4. splice() method

The splice() method modifies the existing array to add/remove items and/or add elements to the existing array. The method returns the items which are removed.

The method takes three parameters:

  1. Start
  2. Delete count
  3. Items to add into the array

The start is the only required parameter. If the start parameter is negative, the removal of items will begin that many items from the end of the array.


let players = [
  { name: 'Sachin', score: 154, balls: 121 },
  { name: 'Kohli', score: 01, balls: 10 },
  { name: 'Dravid', score: 102, balls: 145 },
  { name: 'Yuvaraj', score: 65, balls: 21 },
  { name: 'Gambhir', score: 90,balls: 78 }
];

//Remove the item in the first index.
players.splice(1,1)
//The removed item which is returned by the splice method
//[{…}]
//0: {name: "Kohli", score: 1, balls: 10}

console.log(players)
//(4) [{…}, {…}, {…}, {…}]
//0: {name: "Sachin", score: 154, balls: 121}
//1: {name: "Dravid", score: 102, balls: 145}
//2: {name: "Yuvaraj", score: 65, balls: 21}
//3: {name: "Gambhir", score: 90, balls: 78}

//Add an item as a 3rd item without removing any item. The return items of the method will be empty
players.splice(2,0,{name:"Pandya", score:45, balls:12})
//[]

console.log(players)
//(5) [{…}, {…}, {…}, {…}, {…}]
//0: {name: "Sachin", score: 154, balls: 121}
//1: {name: "Dravid", score: 102, balls: 145}
//2: {name: "Pandya", score: 45, balls: 12}
//3: {name: "Yuvaraj", score: 65, balls: 21}
//4: {name: "Gambhir", score: 90, balls: 78}

5. sort() method

The sort() method sorts the items in the array and returns the sorted array. The sort order is ascending by default. The sort method has compare function as a parameter that defines the sort order. The compare function will have 2 elements for comparison at a time.


let players = [
  { name: 'Sachin', score: 154, balls: 121 },
  { name: 'Kohli', score: 01, balls: 10 },
  { name: 'Dravid', score: 102, balls: 145 },
  { name: 'Yuvaraj', score: 65, balls: 21 },
  { name: 'Gambhir', score: 90,balls: 78 }
];


//Sort the players by score
players.sort((p1,p2)=>(p1.score - p2.score));

console.log(players)
//(5) [{…}, {…}, {…}, {…}, {…}]
//0: {name: "Kohli", score: 1, balls: 10}
//1: {name: "Yuvaraj", score: 65, balls: 21}
//2: {name: "Gambhir", score: 90, balls: 78}
//3: {name: "Dravid", score: 102, balls: 145}
//4: {name: "Sachin", score: 154, balls: 121}