push() and pop()

push()

It is used to add a new element in array

code -

const arr = [1, 2, 3, 4, 5]
console.log(arr)

arr.push(6)
console.log(arr)

output -

[ 1, 2, 3, 4, 5 ]
[ 1, 2, 3, 4, 5, 6 ]

pop()

It is used to remove and return last element of an array

code -

const arr = [1, 2, 3, 4, 5]

const poppedElement = arr.pop()

console.log(poppedElement);

console.log(arr);

output -

5
[ 1, 2, 3, 4 ]

A very important note:

Both push() and pop() are mutating functions, means they change original array

---

shift() and unshift()

shift()

It is just opposite of pop() shift removes and returns first element of an array

code -

const arr = [1, 2, 3, 4, 5]

const a = arr.shift()

console.log(arr);

console.log(a);

output -

[ 2, 3, 4, 5 ]
1

unshift()

It adds the given element at starting of an array. We can pass more than one element.

code -

const arr = [ 4, 5]

arr.unshift(1,2,3)

console.log(arr);

output -

[ 1, 2, 3, 4, 5 ]

Here too unshift() and shift() are mutating methods of an array

---

map()

map() is a non-mutating array method that transforms each element of an array and returns a new array of the same length.

Most common example used to explain map() -

const arr = [1,2,3,4,5]

const newArray = arr.map((e)=> e*2)

console.log(arr);
console.log(newArray);

output -

[ 1, 2, 3, 4, 5 ]
[ 2, 4, 6, 8, 10 ]

Let us analyse map() function now

Syntax -

array.map((element, index, array) => {
  return transformedElement;
});

We have 3 arguments

1. Element - it refers to each element present in given "array"

2. Index - We also have index

3. Array - Yes its the original array on which we are applying map

At last we return a transformedElement , which will replace the original element to transformedElement as we have seen in output above.

And at the end we get a new array (.map() returns a new array) where all original elements are replaced by transformedElement.

Level up -

const original_array = [
    {a: 1, b: 10},
    {a: 3, b: 2},
    {a: 8, b: 5},
    {a: 4, b: 0},
    {a: 9, b: 7},
]

const new_array = original_array.map((e)=> {
    return e.a + e.b
})

console.log(new_array);

output -

[ 11, 5, 13, 4, 16 ]

---

filter()

As name of function, we filter elements from original array and returns a new array.

To do this we give it a condition according to it, it decides weather to keep this element in new array or not.

Most common example -

const arr = [0,1,2,3,4,5,6,7,8,9,10]

const even_arr = arr.filter((e)=> e % 2 === 0)

console.log(even_arr);

output -

[ 0, 2, 4, 6, 8, 10 ]

Let us breakdown filter() more

Syntax -

array.filter((element, index, array) => {
  return condition; // must return true or false
});

Same arguments as in map() just difference in what we return.

If the given element satisfies given condition, means if it returns true it will be added in new array else it will be filtered out.

Level up -

const users = [
  { name: "Aman", age: 20 },
  { name: "Ravi", age: 17 },
  { name: "Neha", age: 25 }
];

const adults = users.filter(user => user.age >= 18);

console.log(adults);

output -

[ { name: 'Aman', age: 20 }, { name: 'Neha', age: 25 } ]

---

reduce()

reduce() is a non-mutating array method used to reduce an array into a single accumulated value.

That accumulated value can be a number, string, object, array, etc.

Most common use -

const arr = [1,2,3,4,5]

const a = arr.reduce((acc, e)=>{
    return acc + e
}, 0)

console.log(a);

output -

15

Again let us deep dive into reduce

Syntax -

array.reduce((accumulator, element, index, array) => {
  return updatedAccumulator;
}, initialValue);

We got some new things from map and filter

1. accumulator - It stores the previous returned value, and gets updated every time for every new element.

2. updatedAccumulator - When we return something in reduce() it is nothing but a updated value of accumulator.

3. initialValue - It is the initial value of accumulator.

Level up -

const arr = [1,2,3,4,5]

const a = arr.reduce((acc, e)=>{
    
    if(e%2 === 0){
        console.log("helo");
        
        return acc + 1
    }

    return acc

}, 0)

console.log(a);

Explanation

Here if current element is even then return acc + 1, means we are doing acc = acc + 1

and if the current element is odd then just return acc, means it is acc = acc

Therefore output -

2 

---

forEach()

forEach() is an array method used to execute a function once for each element in the array.

It does not return anything.

Example -

const nums = [1, 2, 3];

nums.forEach(num => {
  console.log(num);
});

output -

1
2
3