Javascript tips
Remove unused JavaScript
This step will not only reduce transmission time, but also the time it takes for the browser to analyze and compile the code. To do this, you must take into account the following points:
- If you detect a functionality that is not being used by users, it’s a good practice to remove it with all its associated JavaScript code, so the website will load faster and users will have a better experience.
- It is also possible that a library was included by mistake and is not necessary, or that you have dependencies that offer some functionality that is already natively available in all browsers, without the need to use additional code
Define the execution context
In order to effectively measure any improvements that you’re incorporating into your program, you must establish a set of well-defined environments where is possible to test the performance of the code. Trying to do performance tests and optimizations for all versions of all Javascript engines is not feasible in practice. But, it is not a good practice to do testing in a single environment, as this can give you partial results. So, it’s important to establish multiple well-defined environments and test that the code works on them.
Cache in the browser
There are two options for doing this. The first is to use the JavaScript Cache API, which we can use by installing a service worker. The second is to use the HTTP protocol cache. Scripts are often used to access a certain object. By storing a repeated access object inside a user-defined variable, as well as using a variable in subsequent references to that object, performance improvement can be achieved immediately.
.
Why was 6 afraid of 7? Because 7 ate 9.
Bonus trick
If we want to add a new item to an array without mutation (which we usually want to avoid), we can create a new array using the ES6 spread operator and slice.
const insert = (arr, index, newItem) => [
...arr.slice(0, index), // first half of array
newItem, // new item
...arr.slice(index) // rest of array
];
const items = ['S', 'L', 'C', 'E']
const result = insert(items, 2, 'I');
console.log(result); // ["S", "L", "I", "C", "E"]
Dynamic property names
ES6 brought us computed property names that allow property keys of object literals to use expressions. By surrounding the key with brackets [], we can use variables as property keys:
const type = "fruit";
const item = {
[type]: "kiwi"
};
console.log(item); // {fruit: "kiwi"}
This is useful in a situation where you want the key to be created on the fly. We can access the value with bracket notation:
item[type]; // "kiwi"
item["fruit"] // "kiwi"
Or with dot notation:
item.fruit; // "kiwi"
Remove array duplicates
The Set object type introduced in ES6 lets you store unique values. Together with the spread operator (...), we can use it to create a new array with only the unique values:
const uniqueArray = [...new Set(array)]
We create a Set from an array and because each value in the Set has to be unique we remove all duplicates. We then convert the Set back to a new array using the spread operator.
Random number from interval
There are times when we need a random number to be generated within a range. The Math.random() function helps us generate a random number, and then we can transform it to the range we want:
const randomIntFromInterval = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);
There's another trick baked into this one if you look at how the function is constructed.
Setting defaults
We have all seen them. The endless if statements checking if the values have been set. What if I said there was a better way? Well, that's exactly what I'm saying, default values.
Swapping two variables
Using what we learned in the last trick makes swapping variables as easy as:
let me = 'happy', you = 'sad';
[me, you] = [you, me];
// me = 'sad', you = 'happy'
The above code creates an array of [you, me] and immediately destructures them into the opposite variables. No need for temp variables anymore!