Posts

Did you know how to use comma operator in Javascript? A simple , can separate expressions in the same statement, evaluate left-to-right in the expression, pick the right most valid value as the result, and confuse other developers - all within the blink of an eye. We have discussed about operators when discussing operator precedence. But the no. of uncommon operators are more than the typical bunch. Oh, and btw, comma has the lowest precedence amongst all operators. ...

typeof is useful but has inherent issues. There are gaps between what a developer expects in terms of consistency and what typeof delivers. Let us look at a few examples - const i = 1; console.log(typeof i); // number typeof is a unary operator, and does not require brackets. If you indeed put the brackets around the input, they just group the input and nothing more. More examples - console.log(typeof (1 + 2)); // number console.log(typeof ""); // string console.log(typeof undefined); // undefined console.log(typeof { fruit: "apple" }); // object console.log(typeof ["apple"]); // object console.log(typeof new Date()); // object console.log(typeof null); // object You may observe that - ...

You must have seen the copyWithin() method for an array, and surely wondered what it can do. copywithin copies elements from one position to another position in the same array. (Just kidding about the wondering thing - no one ‘wonders’ today, they just Google). const fruits = ["apple", "orange", "grapes", "banana"]; fruits.copyWithin(2, 0, 2); // copy 2 ele from [0] to [2] console.log("fruits: ", fruits); // [ 'apple', 'orange', 'apple', 'orange' ] copyWithin has the below syntax. array.copyWithin(target, start, end) It copies the elements from start to end to the target position. ...

Use set and filter to find the difference between two arrays. let fruits1 = ["apple", "orange", "grapes"]; let fruits2 = ["banana", "mango", "apple"]; let difFruits = [...new Set(fruits1)].filter((item) => !fruits2.includes(item)); console.log(difFruits); // [ 'orange', 'grapes' ] Similarly if you want to find the elements common in both arrays, you could employ a slightly different strategy. let fruits1 = ["apple", "orange", "grapes"]; let fruits2 = ["banana", "mango", "apple"]; let commonFruits = [...new Set(fruits1)].filter((item) => fruits2.includes(item) ); console.log(commonFruits); // [ 'apple' ] Traditionally, you would have executed two loops to find differences between arrays. Something like - let fruits1 = ["apple", "orange", "grapes"]; let fruits2 = ["banana", "mango", "apple"]; const difFruits = []; for (fruitOne of fruits1) { let found = false; for (fruitTwo of fruits2) { if (fruitTwo == fruitOne) { found = true; break; } } // fruits2 loop if (!found) difFruits.push(fruitOne); } // fruits1 loop console.log(difFruits); // [ 'orange', 'grapes' ] We live in exciting times for sure.

Create arrays and initiate data in a single statement. Traditionally you would do the below to initiate the array and fill it with values - let planets = ["mercury", "venus", "earth"]; This is a-ok if you know the values, but what if you want array to have fixed elements with pre-defaulted values? This is where fill (an ES6 feature) steps in. let planets = new Array(3).fill(""); console.log("planets: ", planets); // [ '', '', '' ] You could also instantiate only certain elements of the array as well. ...

Is emptying objects akin to destroying them? Is destroying of objects easier than creating them? Let’s find out. Initiate an object. let apple = { name: "apple", color: "red" }; console.log("apple: ", apple); // { name: 'apple', color: 'red' } Reset value // the easy way to reset apple apple = {}; console.log("apple: ", apple); // {} The above piece of code will reset apple object. Upon initiation memory was allocated to the defined object. Then, the variable apple was made to refer to the specific memory location where the object was stored. ...

Sleep holds off your function execution for specified time. This is super useful whenever you want to hold off something for ‘x’ time. Here are two ways in which you can get your program to sleep for a while. setTimeOut function sleep() { console.log("trying to sleep.."); setTimeout(() => { console.log(".. woke up after 3s"); }, 3000); } /* output trying to sleep.. .. woke up after 3s */ sleep(); Promise / async-await You could async the whole function to make it cleaner but there is no visible change to how your program executes :) ...

Template literals provide an easily readable way to embed expressions within string literals. For example - const thirdSmartPlanet = "earth"; const fact = `${thirdSmartPlanet} is flat`; console.log("fact: ", fact); // fact: earth is flat Earlier, you had to combine strings and variable like so - const fact = thirdSmartPlanet + " is flat"; Hope you observed the backtick (’`’)? Not only that - You can output on multiple lines without breaking a sweat const statement = `dogs are our best friends`; console.log(statement); /* output dogs are our best friends */ Evaluate expressions ...

Destructuring assignment feature provides an easy, readable way to handle object and array assignments. ES6 introduced assignment destructuring, which provides a clean and more readable way to assign variables. The old way - const fruits = { apple: { color: "red" }, orange: { color: "orange" } }; const appleTheFruit = fruits["apple"]; console.log("color of apple: ", appleTheFruit.color); // red The new way.. const fruits = { apple: { color: "red" }, orange: { color: "orange" } }; const { apple } = fruits; // or also include orange: const { apple, orange } = fruits; console.log("color of apple: ", apple.color); // red The new syntax gives us a quick and easy way to get named props within an object. ...

Arrow functions have made our life much much easier. You can now refer to this without fearing the bogeyman. How did we write functions in the dark ages? Here’s a typical function. function getSum(i, j) { // or const getSum = function(i,j) { return i + j; } console.log(getSum(3, 2)); // 5 The same functionality as arrow function - const getSum = (i, j) => i + j; console.log(getSum(3, 2)); // 5 Right off the bat you will see that arrow functions are assigned to variables, have an implicit return and structure wise do not different all that much from normal functions. ...