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.

Recommended Posts

View All

What is currying function in JavaScript ?

Currying function in JavaScript allows you to transform a function that takes multiple arguments into a series of functions that each take one arg.

Essential Bootstrap 4 Components for Web App

Bootstrap 4 offers a selection of reusable and customizable Bootstrap 4 components that speed up and simplify development.

What is the purpose of the array splice method

The array splice method in JavaScript can be used to add or remove elements from an array. Learn how to use it and what its purpose is in this guide.

Learn JavaScript Closures with Code Examples

Master JavaScript closures with code examples! Our comprehensive guide explains how closures work and how to use them in your code. Start learning now...

What is the Temporal Dead Zone in JavaScript?

The time frame in which access to the let and const declarations is prohibited is known as the Temporal Dead Zone.