Array Important Methods.

In this blog we cover some essential array topics which we use most of the time when we use array or want to perform operation with array. so let's walk through the topics which we learn.

• push() and pop()

• shift() and unshift()

• map()

• filter()

• reduce()

• forEach()

push() and pop()

push :- push method is used to add new values in the existing array and change their length. It does not create new array and makes it mutates (changeable). let's take an example.
const arr = [1, 2, 3, 4];

console.log(arr.push( 5, 6, 7, 8));

//Output: arr = [1, 2, 3, 4, 5, 6, 7, 8];

Through this example we can clearly see 5, 6, 7, 8 these four values add into "arr" array.

pop :- pop method is used to remove value from an array from the last and change the length of existing array. It is reverse of push method just remember one thing at a time pop remove only one value. let's take also an example:

const arr1 = [1, 2, 3, 4];

console.log(arr1.pop());

//Output: arr1 = [1, 2, 3];

Through this example we can see clearly the last element '4' is removed and the new length is [1, 2, 3].

shift() and unshift()

unshift :- It is used also add an element in to array but in the first place. It does not create any new array. let's take an example:

const arrUnshift = ['code'];

console.log(arrUnshift.unshift('chai'));

//Output: arrUnshift = ['chai', 'code'];

In this example code is already in array the chai is added through unshift and it added at the first place.

shift :- shift adds new elements in an array in the first place of an array. does not create a new array. Example:

const arrShift = ['code']

console.log(arrShift.shift('chai', 'aur'));

Output: arrShift = ['chai', 'aur', 'code'];

In this example 'chai' and 'aur' is added through shift and it added from start of an array.

foEach(), map(), filter() and reduce()

These four loops are most commonly use in javascript when we perform tasks with arrays. All of them has their own different work and different use cases.

These loops are 'high order function' which means, pass function as an argument, or return function to it's parent function.

1. forEach :- forEach can accessible through " . " notation is used to iterate from array and get values from an array one-by-one. It takes callback function there does not need to add set condition (where forEach should stop) and no need to add increment operator just like " for loop ".

   Note: - forEach always return undefined. We can not return value from forEach.

   let's take an example and see how forEach works:

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

arr.forEach((item) => {
    console.log(item);
})

output:
1
2
3
4
5
6

This is the basic example arr is array using . notation we can access forEach and inside the forEach we use arrow function which simply take item as a argument and then console it.

There is another way to write same function where we don't use {} braces and write in-line.

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

arr.forEach((item) => console.log(item));

This code also works and given same output.

---

1. map :- map function again a loop and prototype of array. it works same as forEach but with small difference map return a new array . It does not mutate ( change ) the original array.

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

const newValues = arr.map((item) => {
     return item * 2;
});

console.log(newValues);

// Output :- [ 2, 4, 6, 8, 10, 12 ]

It this example map function return values explicit and store in a variable newValues. if we console the newValues so we get updated array.

---

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

const newValues = arr.map((item) => item * 2);

console.log(newValues);

// Output :- [ 2, 4, 6, 8, 10, 12 ]

In this example map return values implicitly. where don't need to add {} and return keyword.

---

Let's take an another example where we can see how the map works and return a new array.

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

function map(item){
    const updateValue = [];
    for(let i = 0; i < item.length; i++){
        updateValue.push(myfun(item[i]));
    }
    
    return updateValue ;
}

function myfun(val){
    return val * 2;
}

console.log(map(arr));
// Output :- [ 2, 4, 6, 8, 10, 12 ]    New array

---

1. filter :- It is used to filter values from an array as per it's name. it needs a specific condition to filter the values and return a new array.

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

const evenNumber = arr.filter((item) => {
    return item % 2 === 0;
})

console.log(evenNumber);
 // Output :- [ 2, 4, 6 ]   New array

In this example those values are filter which are even number and return it explicitly.

---

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

const evenNumber = arr.filter((item) => item % 2 === 0);

console.log(evenNumber);
 // Output :- [ 2, 4, 6 ]   New array

This code gives same output with implicit return values.

---

1. reduce :- reduce is also a array loop but it has different syntax from others as you can see other loop syntax are mostly common.

   In reduce case callback function takes two parameter the first one is accumulator ( Initial value ) and the second is current value. Now let's move to direct example where we get clarity.

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

const sumValue = arr.reduce((acc, curr) => {
    return acc + curr;

}, 0)   // This 0 is equal to acc .This is initialize value
console.log(sumValue);

//Output:- 21

Now , in this example we get the sum of array element. After the curly braces there is 0 instead of 0 if there is another value like 2 so the acc value is equal to 2 . This is the initialize value.

In the "curr" place array element comes one-by-one like 1, 2, 3, 4, 5, 6 and perform operation (arithmetic ), every new value store in acc and in the last it return.

Important :- If we don't provide any initialize value so the acc take array first index value and curr starts with array index second value.

---

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

const sumValue = arr.reduce((acc, curr) => acc + curr, 0);
// This 0 is equal to acc .This is initialize value

console.log(sumValue);

//Output:- 21

This is the example of implicit

In this blog we cover some array methods and basic and important loops which we use most of the time when we perform operations with array.

Thanks of the reading this blog and I hope you find this blog helpful.