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:
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.
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.
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"]
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"
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.
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.
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.
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!