Deeper Dive into Javascript Arrays.

I will start this with a little intro of arrays from mdn.

“The JavaScript Array object is a global object that is used in the construction of arrays; which are high-level, list-like objects.”

If you are into web development no matter what is your level, you must have used arrays.

Arrays are cool for iteration , but , but there is catch it’s not just for iteration and they provide a much more operations and flexibility over top of them.

// suppose you have an array ["test", "new", "thing"] as variable testArr
var x = null;
testArr.map(val => {
   x += val+ ', '
});
console.log(x);

You might have encounter similar code, anything wrong here?

well couple of things, to start with user is trying to flatten an array and assign it to a variable using an map, but the problem with map is it returns a new array, which is not been used at all.

testArr.forEach(val => {
   x += val+ ', '
});

Nice, since we have changed the map to foreach we are not returning anything and performing just iteration. But the output will still have an extra comma since we are adding it in end. We can always trim it and get the desired output or use join :)

var x = testArr.join(',');

Cool, now we have reduce the code to one line, you might have noticed i have assigned the “testArr.join(‘,’)” to var x, yes you got it right it’s because join return string.

But these are pretty basics what is other methods which can help to write better code ?

Well what about MAP, yes the same map which i replaced earlier with foreach.

Map can be awesome tool when you want to perform some operation in existing set and return a new copy of existing array without affecting it and if you can use it along with JS call and return optimization kudos to you.

a simple example of map :-

var inpArr = [1,2,3,4];
function multiply(inpData, variable) {
   return inpData.map(val=> val*variable);
};
console.log(multiply(inpArr, 2)); //[2,4,6,8]
console.log(multiply(inpArr, 3)); //[3,6,9,12]
console.log(inpArr); //[1,2,3,4]

Nice right!!!

But wait there is more :)

If you make till here. Congrats, you have unlocked my favorite method of Arrays.

that is .. drum roll…

Array.reduce :-

I love this method and i use it wherever and whenever i want, sometimes i don’t even need it but i still go for this one.

The problem with other methods is well actually not a problem, it’s just they have restrictions on what they can return or perform. Yeah, you can always override the default behavior. But reduce gives you freedom of returning anything ( You can convert an array to object, string, number, boolean).

let inpArr = [1,2,3,4,5];
function convertToObj(inpData) {
  return inpData.reduce((returnVal, item, index) => {
     returnVal[index] = item;
     return returnVal
 },{});
}
function getSumOfAll(inpData) {
 return inpData.reduce((returnVal, item, index) => {
   return returnVal+item;
 },0);
}
convertToObj(inpArr); //{0:1, 1:2, 2:3, 3:4, 4:5} object
getSumOfAll(inpArr); //15 number

Nice , right !!!

reduce first argument is accumulator and second argument is currentValue, accumulator arguments are currentValue, currentItem, currentIndex. No go play around.

This is not all, but since this article is getting long, there are other methods such as flatten, find, findby, filter and deep dive in objects. All of them are pretty cool but that’s for some other time.

happy coding !!!