7 Must known array functions 🍻 ft.Js

Array are the most important data type in any language, because we store collective of data in a single variable.

While working in API and JSON data format we used to deal a lot with array.

If we became more familiar with the array then our life become more easier in the programming 🍻 …

we will see some important array functions which help to manipulate array in javascript.

first we will see how to iterate array, to iterate through a array first thing came to our mind is forloop, apart from those things there are some other methods too…

const fiveElementArray = [5,5,5,5,5]
for (let i = 0; i < fiveElementArray.length; i++) {
console.log(fiveElementArray[i]);
}
// output : 
5
5
5
5
5

foreach function

similar to for loop, foreach method is used to iterate through array, the advantage of foreach is , we can pass callback function to it, so it applies that function to every element of the array.

const fiveElementArray = [5,5,5,5,5]
fiveElementArray.forEach((currentValue, index, array)=>{
console.log(currentValue);
})
// output :
5
5
5 
5
5

currentValue — returns the current

index — returns the current index

array — return the entire array it belongs to

the above code can also rewritten as below

const newArr = [5,5,5,5,5]  
newArr.forEach(logCurrentValue);  
function logCurrentValue(currentValue, index, array){     console.log(currentValue); 
} 

in the above function we are passing logCurrentValue function as callback function to forEach method, which applies those function to each and every element in that array.

map function

like foreach, map function also used to apply function to each element in the array, the difference is foreach does not return anything, but the map function returns a new array.

which helps to chain other functions to the map function.

const newArr = [1,2,3,4,5]
const outPut = newArr.map((currentValue, index, array)=>{
    return currentValue * 5;
})
console.log(outPut); // [ 5, 10, 15, 20, 25 ]

callback function that we are passing is responsible for the transformation, here the transformation is the function applies to each element in array and multiplies it by 5 and push to new array,

like foreach function, callback function in map also takes 3 arguments, currentValue, index, and current array, most of the javascript array methods which takes callback function as input has these 3 arguments…

map function is immutable, it does not affect the original array and it does not apply function to the empty element.

TIPS :

In most javascript interview, different between map and foreach is most frequently asked question.

map function returns array so we can chain other array function to it.

const newArr = [1,2,3,4,5]
const outPut = newArr.map((currentValue, index, array)=>{
    return currentValue * 5;
}).filter((value)=>{
    return value % 10 == 0;
})
console.log(outPut);
// output :
[ 10, 20 ]

here we chain filter function with the map function. map function return array [5,10,15,20,25], then we apply filter function to the map function, where filter function returns only number has 0 reminder while divisible by 10.

filter function

filter function returns a new array of elements that satisfies the condition passed in callback.

like map function this also return a array.

const newArr = [0,1,2,3,4,5]
const output = newArr.filter((value)=>{
    return value % 2 == 0;
})
console.log(output); [0,2,4]

In the above code function returns the even number, so the filter function filters out the newArr value with even number and forms a new array.

If each value of the array satisfies the condition then the value push to the new array, if not then it will not push to the new array.

reduce function

reduce function applies function to each element, accumulates all return value to a single value and return that accumulated value.

some of the use case for reduce function are,

• Summing value,
• finding max or min number…

const newArr = [1,2,3,4,5]
const sumValue = newArr.reduce((tot, value)=>{
    return tot + value;
},0);
console.log(sumValue); // 15

above code is to calculate sum of all elements in a array, in callback function first argument ( tot ) is accumulator , it is returned value of previous iteration , second parameter ( value ) is current element.

reduce function accept second argument which is initial value, we passed 0 , if we want object or array as output data type, then we can pass {}, [].

we will look one more example in reduce array function,

In the below code we will get name of each student and form a array.

const studentsData = [
    { name: "Alia Bhatt", score: 70 },
    { name: "Jackie Shroff", score: 80 },
    { name: "Ranveer singh", score: 63 },
    { name: "Ranveer Allahbadia", score: 75 },
    { name: "osho", score: 59 }
]
const stuName = studentsData.reduce((accu, value)=>{
return [...accu, value.name]
},[])
console.log(stuName);
// output :
[
  'Alia Bhatt',
  'Jackie Shroff',
  'Ranveer singh',
  'Ranveer Allahbadia',
  'osho'
]

In the above code, we initialize the reduce function with [] empty array and get name of all students from reduce function and form a new array.

includes function

if we want to check an array contains a particular element, then we can use the includes method, unlike other array function it takes a single element as argument.

const newArr = [5, 5, 5, 5, 5, 5]
const valuePresentInArray = newArr.includes(5);
console.log(valuePresentInArray); // true

include method is used to find the presence of an element in a single dimensional array, includes method return the boolean value true or false.

if we want to find the presence of a particular element in an object array then we can use the find method for this use case.

find function

find method accepts callback functions, if the element is in the array then it returns the entire object.

const newArr = [
  {name:"Alia bhatt",age:5},
  {name:"katrina kaif",age:3}
]
const valuePresentArray = newArr.find((value)=>{
  return value.age == 5
});
console.log(valuePresentArray); // {name: "Alia bhatt", age: 5}

if the element is not in the object array then it return undefined.

like find method there is a method called findIndex it return the index number of the element in the array

findIndex

const newArr = [
  {name:"Alia bhatt",age:5},
  {name:"katrina kaif",age:3}
]
const indexValue = newArr.findIndex((value)=>{
  return value.age == 3
});
console.log(indexValue); // 1

findIndex method returns the index of an element.

In this blog, iI missed some of the array methods like every , some , indexof , lastIndexof .

Please take your time and do some research on the above methods that i missed in this blog.

Hey where are you leaving😢, before closing your tab, please read the below blog, this will be more and more useful for your interview preparation and for your career… 🍺

shallowCopy && Deep Copy ft. [Array, Object]

If not now, then you can read it later too… but don’t miss it 😎.. Bye bye tata…

!!! Happy coding !!!

Feel free to follow me in LinkedIn ❤️

https://in.linkedin.com/in/sathithyayogi

If you have any feedback , mail me at sathithyayogi99@gmail.com.