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"]

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"]

pop()removes the last item of an array.

shift()

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

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"]

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]

• 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}]

• 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

Now using reduce()

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

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

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

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}

sort()

sort() sorts the given array.

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

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]

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]

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]

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"]

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