tag: Javascript

There is this myth that assigning array elements is better performant than push. I believe this originated from Javascript of yore, but is not relevant anymore. In fact, today push may be almost equal to or edge out assignment of array elements using keys (depending on runtime engine that is). A quick test Let us do a really quick test - create an array of 1000 elements, assign each element with key compare the performance against just pushing a 1000 elements to a blank array Code below - ...

It is common advise to nullify a prop value within an object rather than deleting the prop. Should you prefer one over the other? Especially, in performance intensive applications. Delete object prop What do you do when you do not need a key-value pair in an object? Why, we simply delete it, of course. const earth = { name: "earth", position: 3, life: true }; console.log(earth); // { name: 'earth', position: 3, life: true } delete earth["life"]; console.log(earth); // { name: 'earth', position: 3 } This is clean and just works. ...

Use values with same types in any array. Changing types (even for scenarios that you think are totally valid for the day) can rain down hell. Homogeneity of an array refers to using the same types of variables within an array. The following arrays are homogenous - const fruits = ['apple', 'orange]; const nums = [0,1,2] const answers= [true, false]; The following arrays are not - const planets = [earth, 3]; const answers = [true, 42]; You may think you have good reasons to include multiple types. For example group together different attributes of earth - ...

It is a commonly recommended practice to cache array lengths while doing for loops and get better performance. Seriously, is that a thing though? Typical for loop In a typical for, you calculate length, iterate and you are done. const arr = new Array(1e7).fill(1); let j = 0; console.time("for-test"); for (let i = 0; i < arr.length; i++) { j += i; } console.timeEnd("for-test"); // 17.850ms 25.295ms 20.860ms Cache for loop Rather than use a typical array length condition, you first find the length and use that variable in all comparisons. This should save time to call the length method each and every time. ...

You don’t have to see assigning values to variables as a chore. There are exciting ways to do those assignments - here are some shorthand ways. Initialize to same value You can initialize variables like so - let i = 0; let j = 0; let k = 0; Or, you can instead do - // prettier-ignore let i = j = k = 0; Initialize variables to different values It is quite common to assign different values during initialization.. let i = 0; let j = 1; let k = 2; .. so why not have a shorthand for that? Just do assignment using the previous way of combining declarations. ...

‘use strict’ is a rather useful statement to have at the beginning of all Javascript modules or functions. It ensures that all code in the module is executed in strict mode. The usage is simple enough. "use strict"; // lot of code You can also enable strict mode to specific functions. function getSum(x, y) { "use strict"; return x + y; } Strict mode has to be at the beginning of files or modules - will not have the desired effect if used anywhere else. ...

It is quite easy to pollute global scope by defining variables or functions that impact core functions. const parseInt = val => console.log("int parsed: ", val); parseInt(1); // int parsed: 1 parseInt has transformed into a printer, thanks to the above code. The practice of “overriding” global scope is not useful and should be avoided like the plague (If you are born in the wrong century - “plague is to be avoided at all costs”). Using such declarations - ...

Map on an array is simple enough - const ran = ["1", "3", "5"].map(val => Number(val)); console.log("ran: ", ran); // ran: [ '1', '3', '5' ] map will specify one element at a time, which is passed to the callback function as val. Let’s say, we ignore the val. const ranToo = ["1", "3", "5"].map(Number); console.log("ranToo: ", ranToo); // [ 1, 3, 5 ] The above code works too. map takes a callback function and runs it on every element, so no problem with the above code. ...

Let us see how we could use a reusable function that can ‘memoize’ any given function. Memoization is a technique that can be used in long, recursive code to cache results from previous executions and speed up the overall process. Previously we have seen an overview memoization in JS with an example of generating Fibonacci series using such techniques. But, what if you want to apply that for multiple operations? Say, you are building a super-calculator that outputs Fibonacci series, factorial of a number, sum-product of repeat combinations, etc. ...

Let’s say you have to write a function that doubles a given number. You also find out that you may get one number (in which case double that number), or multiple numbers (double all numbers). The first thought that comes to mind is to - use different functions (or) check type of input and process differently Consider the below code - const double = x => { if (typeof x == "object") return x.map(val => val * 2); else return x * 2; }; console.log(double(2)); // 4 console.log(double([2, 3])); // [ 4, 6 ] The given option is workable, but there is a shortcut way to do the same. ...