Writing Quality JavaScript Code-ii

In the first post of this series, we discussed some tricks using the console, string interpolation, destructuring and spread syntax. In this article, we will be covering some advanced topics and some modern improvements in JavaScript Syntax, which helps us in writing quality JavaScript Code. So without any further delays, let’s dive in:

1) Map, Reduce and Filter:

Map, Reduce and Filter are three JavaScript functions that make array handling very easy and convenient in JS. They make the code more readable and also very precise. Let us look at a use case. Carrying forward from the example used in the previous article, we had

let mango = {color:"yellow" , taste: "sweet", season: "summers",cost:20};
let apple = {color: "red" , taste: "sweet", season : "all",cost:30};
let grapes = {color: "gree", taste:"sweet", season: "winters",cost:50};

Let us make array fruit:

let fruits = [mango, apple, grapes];

Now, Suppose you just want an array that has the color of each fruit. A naive developer says easy task I can use for() of forEach(). But JavaScript provides a better option, the map function.

//Wrong way
let color = []
for(i=0;i<3;i++) {
   color[i] = fruits[i].color;
}

//Right way
let color = fruits.map(function(fruit) {
     return fruit.color;
} );

Now suppose, as another use case, you want to find sum of the cost of all the fruits. Your for()… bell is again ringing, but JS provides something better. It provides you the reduce function. The map function returns an array, whereas the reduce function returns the aggregate of an array. Let us see how it looks :

/* 
syntax 
let accumulatedValue = array.filter( callbackfn, initialValue)
*/
let totalCost = fruits.reduce(function(price, fruit) {
     return fruit.cost+price;
} , 0);

In the above example, we used 0 as the initial value for the variable price and for each element returned price + fruit.cost.

Now suppose you want to filter out some of the elements. Let us say you want the fruits with cost less than 40. JS has a handler for this too, the filter method. Let us see how this works  :

let cheapFruits = fruits.filter(function(fruit) {
     return fruit.cost < 40;
});

There are many other functions like these, provided by JS to make our tasks easier and enable us to write quality JavaScript Code.

2) Arrow Syntax:

A new introduction into JS by ES6 syntax, Arrow Functions or “fat arrow” functions are ways of writing concise JavaScript function. They utilize a new token =>  to identify a function. Arrow functions are not just a syntax change, arrow functions are basically anonymous functions, and they do change how this binds inside the function. This keyword and how it is bind in a function is a big topic and we cover it in a later post. Here I just want to make sure that you know, fat arrow is not just syntax sugar, it has a meaning in terms of object referencing.
Let us now see how we can use arrow functions to write concise functions :

//Old Syntax
let add = function(a,b) {
return a+b;
};
//New Syntax
let add = (a,b) => { return a+b } ;

Arrow Function enables the developer to write the same logic in almost half the lines of code. If there is no expression and only one line in the function, we can also omit the curly braces. The same function can also be written as :

let add = (a,b) => a+b  ;

Now let us see, how can we use the arrow syntax to make the above-written map, reduce and filter expressions more concise

let color = fruits.map( fruit => fruit.color );
let totalCost = fruits.reduce((price, fruit) => fruit.cost+price , 0);
let cheapFruits = fruits.filter( fruit =>  fruit.cost < 40 );

This is how easy and concise the fat arrow functions make the word for developers.

3) let, var and const

Whenever one thinks about variables, one thinks about scopes. Scopes are the region in a program where a variable is identified. Generally variable have a Global Scope: valid throughout the program, Block Scope: Valid through a block of {} and Functional Scope valid through a Function. This is the foundation of the difference between var and let.

Var has a functional scope, i.e, it is valid inside the function it is declared in. For example :

function demoFunction () {
var a = [];
  for(var i=0;i<3;i++)
    {
        a[i]=i;
    }
  console.log(i) // 3
}

As you see in the above block, var i is declared in the for block, and if you come from C background you must be shocked that var i was valid outside the for loop. But as stated earlier, var has a functional scope, thus var i is valid inside the function demoFunction.

function demoFunction () {
var a = [];
for(let i=0;i<3;i++)
{
a[i]=i;
}
console.log(i) // Undefined
}

demoFunction();

Whereas using a let gives you error. Talking about const, const is just like let, it just cannot be changed.
Now a question arises when to use what, my simple advice would be, declare everything as a const, and if you find altering a variable, just edit it to let. Do away with var completely.

I initially planned to write about async/await in the same post. But promise is a big topic, will be writing a complete post catering to promises. Till then follow the practices and try writing quality JavaScript Code.