map, reduce, filter, sort, slice ...etc
Tags: javascript, webdev, react, beginners
Published: 2023-10-16 17:50:16

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.