DEV Community

Cover image for map, reduce, filter, sort, slice ...etc
Nawaz Mujawar
Nawaz Mujawar

Posted on

map, reduce, filter, sort, slice ...etc

We are going to look into methods that are used to modify an Array in JavaScript.

Here are the methods which are we going to look at in

  • push()

  • pop()

  • shift()

  • unshift()

  • filter()

  • map()

  • reduce()

  • indexOf()

  • includes()

  • find()

  • sort()

  • splice()

  • slice()

push()

const animals =["cat","dog"];
animals.push("tiger");
console.log(animals)// ["cat","dog","tiger"]
Enter fullscreen mode Exit fullscreen mode

push() inserts the argument/value passed in push("tiger") to the last position in the animals array.

pop()

const animals =["cat","dog","tiger","cow","elephant"];
animals.pop();
console.log(animals)// ["cat","dog","tiger","cow"]
Enter fullscreen mode Exit fullscreen mode

pop()removes the last item of an array.

shift()

const animals =["cat","dog"];
animals.shift("zebra");
console.log(animals)// ["zebra","cat","dog"]
Enter fullscreen mode Exit fullscreen mode

shift() inserts the argument/value passed in shift("zebra") to the first position in the animals array.

unshift()

const animals =["cat","dog","tiger"];
animals.unshift();
console.log(animals)// ["dog","tiger"]
Enter fullscreen mode Exit fullscreen mode

unshift() removes the first item of an array.

filter()

const numbersArray =[12,34,312,67,98];

const newNumbersArray = filter((num)=>{
    if(num >50){
       return num;
    }
})
console.log(newNumbersArray) // [312,67,98]
console.log(numbersArray) //[12,34,312,67,98]
Enter fullscreen mode Exit fullscreen mode
  • filter() takes the first argument as a callback function.
  • filter() do not change the original array, it returns a new copy of an array.
  • As per the given condition it returns a new filtered array.

map()

const users =[{name:"john",age:34},{name:"steve",age:40}];

const newUsersArray = filter((user)=>{
   return{
   detail :`${user.name} is ${user.age} years old`
   }
})
console.log(newUsersArray) 
// [
//   {detail:"john is 34 years old"},
//   {detail:"steve is 40 years old"}
// ]
console.log(users) 
//[{name:"john",age:34},{name:"steve",age:40}]

Enter fullscreen mode Exit fullscreen mode
  • map() loops over the each array item.
  • map() do not change the original array, it returns a new copy of an array.
  • In the above code snippet we have looped over users array and returned a new array with concatenating of name and age value.

reduce()

Let's check with an example.

Get the sum of all array items. i.e if an array is like [1,2,3] then result should be 6.

first will try with forEach()

let sum =0;
const nums =[1,2,3];
nums.forEach((num)=>{
   sum = sum + num;
})
console.log(total) //6
Enter fullscreen mode Exit fullscreen mode

Now using reduce()

const nums =[1,2,3];
const total = nums.reduce((acc ,num)=>{
   acc = acc + num;
  return acc
},0)
Enter fullscreen mode Exit fullscreen mode

Here the reduce() it takes callback function as the first argument and the initial value of the accumulator acc. And callback function provides two parameters first is accumulator acc and second is array item num

reduce() do not change the original array.

Returns single accumulated value.

indexOf()

indexOf() returns the index of item.

const admins =[1,2,4];
const user ={name:"raj",id:4}
console.log(admins.indexOf(user.id)) //2
Enter fullscreen mode Exit fullscreen mode

includes()

includes() returns a boolean depending upon whether the item is present or not in the array.

const admins =[1,2,4];
const user ={name:"raj",id:4}
console.log(admins.indexOf(user.id)) // true
Enter fullscreen mode Exit fullscreen mode

find()

find() searches for the item in an array and returns that item.

If the item is not present then return -1.

const users =[{name:"john",age:34},{name:"steve",age:40}]
const searchedUser = users.find((user)=>{
      if(user.name === "steve") return user;
})
console.log(searchedUser) // {name:"steve",age:40}
Enter fullscreen mode Exit fullscreen mode

sort()

sort() sorts the given array.

const nums =[2,8,4,3]
nums.sort()
console.log(nums) //[2,3,4,8]
Enter fullscreen mode Exit fullscreen mode

splice()

splice() changes the original array.

Let's check an example for that.

Deletion

const arr =[2,3,5,1,6,8];
arr.splice(2,1)
console.log(arr)// [2,3,1,6,8]
Enter fullscreen mode Exit fullscreen mode

In the above example splice() first argument is the index of items that needs to be deleted. And second argument is number of times.

Lets check another example for that

const arr =[2,3,5,1,6,8];
arr.splice(2,2)
console.log(arr)// [2,3,6,8]
Enter fullscreen mode Exit fullscreen mode

Here it deletes two items i.e 5 and 1 from index 2.

Insertion

const arr =[2,3,5,1,6,8];
arr.splice(3,0,9,7)
console.log(arr)// [2,3,5,9,7,1,6,8]
Enter fullscreen mode Exit fullscreen mode

In the above example splice() first argument is index where new items need to be inserted. the second argument is 0 because we don't want to delete any item. The third argument is the items 9,7 that need to be added to the array.

slice()

slice() returns new array with selected items.

slice() do not change original array.

const fruits =["apple","mango","banana","orange","watermelon"];

const favoriteFruits = fruits.slice(1,3);
console.log(favoriteFruits) // ["mango","banana"]
Enter fullscreen mode Exit fullscreen mode

slice() first argument is starting index and second argument is ending index.

Top comments (0)