7 JavaScript Powerful Optimization Tricks You Need To Know

Every language has uniqueness, and JavaScript, the most widely used programming language, is no different.

This blog post will discuss some JavaScript Generic Optimization tricks that will help you write better code and make sure that the following is just not your response when you come all over them:

1. Fallback Values The fallback place to display some adjusting.

If the value is [] or 0, using logical OR || does not give you the expected results.

The bullish symbiosis would be a better solution?? If the defined value is null or undefined, only use the fallback values.

// Lengthy
let name;
if (user?.name) {
name = user.name;
} else {
name = "Anonymous";
}
// Shortly
const name = user?.name ?? "Anonymous";

1. Shortly For Switching Long switch cases are commonly maximized by using an object with the keys acting as switches and the values trying to act as return values.

const dayNumber = new Date().getDay();
// Lengthy
let day;
switch (dayNumber) {
case 0:
day = "Sunday";
break;
case 1:
day = "Monday";
break;
case 2:
day = "Tuesday";
break;
case 3:
day = "Wednesday";
break;
case 4:
day = "Thursday";
break;
case 5:
day = "Friday";
break;
case 6:
day = "Saturday";
}
// Shortly
const days = [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
];
// Or
const days = Sunday,Monday,Tuesday,Wednesday,Thursday,Friday,Saturday.split(
","
);
const day = days[dateNumber];

1. Calls To Functions You can also use the binary operator to decide which function to call based on conditions.

The call patterns of the functions must be the same or you will end up facing errors.

// Lengthy
function f1() {
// ...
}
function f2() {
// ...
}
// Shorter
condition ? f1() : f2();

1. Multiple String Checks It is popular to need to check if a string is equal to one of the multiple values, which can quickly become irritating.

Luckily, JavaScript has a way to help you with this.

// Lenghty
const isVowel = (letter) => {
return (
letter === "a" ||
letter === "e" ||
letter === "i" ||
letter === "o" ||
letter === "u"
);
};
// Shortly
const isVowel = letter => /[aeiou]/i.test(letter);
For-of and For-in loops are beneficial for repeating over an array or object without having to manually keep track of the index of the object’s keys.

For-of

const arr = [1, 2, 3, 4, 5];
// Lengthy
for (let i = 0; i < arr.length; i++) {
const element = arr[i];
// ...
}
// Shortly
for (const element of arr) {
// ...
}
For-in

const obj = {
a: 1,
b: 2,
c: 3,
};
// Lengthy
const keys = Object.keys(obj);
for (let i = 0; i < keys.length; i++) {
const key = keys[i];
const value = obj[key];
// ...
}
// Shortly
for (const key in obj) {
const value = obj[key];
// ...
}

1. False Checks If you want to check if a variable is null, undefined, 0, false, NaN, or a blank string, you can use the Logical Not (!) operator to do so without the need for multiple effects.

This makes it simple to verify if a variable contains valid data.

// Lengthy
const isFalsey = (value) => {
if (
value === null ||
value === undefined ||
value === 0 ||
value === false ||
value === NaN ||
value === ""
) {
return true;
}
return false;
};
// Shortly
const isFalsey = (value) => !value;

1. Secondary Operator You must have come across the ternary operator as a JavaScript developer.

It is an excellent method for writing concise if-else statements.

You can, however, use it to write concise code and even chain it to check for multiple conditions.

// Lengthy
let info;
if (value < minValue) {
info = "Value is too small";
} else if (value > maxValue) {
info = "Value is too large";
} else {
info = "Value is in range";
}
// Shortly
const info =
value < minValue
? "Value is too small"
: value > maxValue ? "Value is too large" : "Value is in range";
That’s all there is to it, folks!

Thank you for taking the time to read this.

It is completely free to follow!