JavaScript is a tremendously powerful language, yet understanding its behavior can be difficult. Today I'll show you several JavaScript tricks for optimizing your JavaScript code. It will also assist you in writing clean code and optimizing your programming time.
Use these JavaScript tricks to optimize your JavaScript code.
1. Resize or Empty an Array Using array.length
When we wish to resize an array, we basically overwrite its length:
let array = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'];
console.log(array.length); // returns the length as 10
array.length = 4;
console.log(array.length); // returns the length as 4
console.log(array); // returns ['a', 'b', 'c', 'd']
2. Flatten the multidimensional array
Using the spread operator, we may flatten a multidimensional array.
var entries = [1, [2, 5], [6, 7], 9];
var flat_entries = [].concat(...entries);
// [1, 2, 5, 6, 7, 9]
3. Getting the last item in the array
Using a negative number as the parameter allows us to retrieve the last piece from the array, which is another clever JavaScript tricks.
var array = [1, 2, 3, 4, 5, 6];
console.log(array.slice(-1)); // [6]
console.log(array.slice(-2)); // [5,6]
console.log(array.slice(-3)); // [4,5,6]
4. Swap two variables without the third variable
Using the third variable, we can easily swap two variables. However, adding a variable requires adding memory. Additionally, memory can be optimized with just two variables.
let x = 1;
let y = 2;
[x, y] = [y, x]; // x = 2, y = 1
5. Merging two arrays by optimizing memory
Using the array.concat() function, we can simply combine two arrays if necessary.
var array1 = [1, 2, 3];
var array2 = [4, 5, 6];
console.log(array1.concat(array2)); // [1,2,3,4,5,6];
The best option for tiny arrays is this. However, if we need to merge big arrays, this strategy is completely inadequate. Why so? The array is the cause. concat() function on large arrays will consume a lot of memory while creating the new merged array.
There is no need for additional memory in this situation because we can use the array.push.apply(array1, array2) function to merge the second array into the first one. By doing this, we may use less memory.
var array1 = [1, 2, 3];
var array2 = [4, 5, 6];
console.log(array1.push.apply(array1, array2)); // [1,2,3,4,5,6];
6. Instead of plain delete use splice
This could be the most effective JavaScript trick for simplifying JavaScript code. It also accelerates your code. Why shouldn't we use delete? Because it only deletes the object property and does not reindex or update the length of the array, leaving undefined values. Basically, it takes a very long time to execute.
Splicing rather than deleting is a smart technique because it removes some null/undefined space from your code.
Array = ["a", "b", "c", "d"]
Array.splice(0, 2) ["a", "b"]
Result: myArray ["c", "d"]
7. We should use a switch?case instead of if/else
The switch?case is always overlooked. The switch?case and if/else statements accomplish nearly identical tasks, however the switch?case statement executes faster than the if/else statement! Why is this the case? The if/else statement compares on average to get to the proper clause, but the switch statement is essentially a lookup table with known options.
8. Break the loop as soon as possible
Look for situations in which it is not necessary to complete every iteration of a loop. For example, if we are looking for a specific value and find it, future rounds are superfluous. As a result, we need use a break statement to end the loop's execution:
9. Reduce the chance of memory leaks
JavaScript relies heavily on memory management. If you do not correctly manage memory, memory will leak and cause your software to crash. A memory leak can occur for a variety of reasons. Some of the reasons are: unintentionally using global variables, forgetting about timers or callbacks, unneeded cache, and so on.
10. Understanding Big O notation
This is a fundamental yet underappreciated topic. If you master the Big O notation, you will quickly understand why some of your functions run faster and others use less memory. So, before getting into frameworks and other advanced topics, master this essential concept.
Thank you for your time. If you found this helpful, don't forget to share your JavaScript tricks with us.