tag: Learn

Use workers when doing lot of work that can be spawned off in another “thread”. How do you open parallel work threads today? Possibly using async functions? Async functions do not block the main thread but allow processing to take place in parallel. Well, almost in parallel - see how event loops work. Although async functions are non-blocking, the call back functions included therein do block the thread. One of the ways of managing truly async functions is through “workers”. ...

Cloning objects is easier than ever before, but you have to remember a few nuances. We will discuss about two ways to clone/copy an object - Deep copy: copy object so that any subsequent changes to new object does not reflect in older object Shallow copy: copy props and child objects of an object, but the new object keeps pointing to the original Both have their uses. Spread operator The quickest way to deep copy is using the spread ... operator. ...

Why is my function returning undefined when I have not mentioned that anywhere. The crux of the issue is in the topic header. All functions have to return something. If nothing is specified, they return undefined. function doSomething() { // do something } const something = doSomething(); console.log("something: ", something); // undefined You may however chose to ignore receiving something from the function. function doSomething() { // do something } doSomething(); Typically, I like to return at least a true or false - just for the heck of it. That’s overengineering to some, but that’s ok. ...

Does JSON.stringify() have anything to do in debugging statements today? There were many Javascript-like systems that did not have the same tooling or debugging methods. I do not quite remember having browsers or ’node’ print out the entire object back in the day - I may be wrong. So it was that I had to use console quite a bit, and what better way to print objects other than converting them to strings? I used JSON.stringify() a lot. ...

You should use strict mode everywhere, but what about inherited code? Typically, you designate strict mode at the beginning of the module - "use strict"; But the module and its friends may have millions of lines of code that you did not write and do not have time to fix. If you introduce "use strict" globally (i.e., at the beginning of the module), you start seeing all those errors here and now. ...

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. ...