Section 1.1 Efficient String Matching with Array.includes

When developing in JavaScript, you may often need to verify if a specific string is among a set of accepted values. Traditionally, this is done with a series of logical operators, but this approach can lead to cumbersome code. Instead, leveraging Array.includes simplifies this task significantly.

Before Optimization:

const isConform = (letter) => {

if (

letter === "a" ||

letter === "b" ||

letter === "c" ||

letter === "d" ||

letter === "e"

) {

return true;

}

return false;

};

After Optimization:

const isConform = (letter) => ["a", "b", "c", "d", "e"].includes(letter);

Section 1.2 Simplified Looping with for-of and for-in

Streamline your iterations with for-of for arrays and for-in for objects. This enhances readability and reduces the amount of boilerplate code.

Using for-of:

const arr = ['a', 'b', 'c'];

for (const element of arr) {

console.log(element);

}

Using for-in:

const obj = { a: 1, b: 2, c: 3 };

for (const key in obj) {

const value = obj[key];

// ...

}

Section 1.3 Simplifying Falsy Value Evaluations

To determine if a variable holds a falsy value (like null, undefined, 0, false, NaN, or ''), you can utilize the logical NOT operator (!) for a more concise check.

Before Optimization:

const isFalsey = (value) => {

if (

value === null ||

value === undefined ||

value === 0 ||

value === false ||

value === NaN ||

value === ""

) {

return true;

}

return false;

};

After Optimization:

const isFalsey = (value) => !value;

Section 1.4 Efficient Function Calls Using Ternary Operators

Utilize the ternary operator to streamline your function calls based on conditions, enhancing code brevity.

Before Optimization:

if (condition) {

f1();

} else {

f2();

}

After Optimization:

(condition ? f1 : f2)();

Section 1.5 Replacing Switch/Case with Object Mapping

Instead of using a switch-case structure, consider using an object for more straightforward and maintainable code.

Before Optimization:

const dayNumber = new Date().getDay();

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"; break;

}

After Optimization:

const days = {

0: "Sunday",

1: "Monday",

2: "Tuesday",

3: "Wednesday",

4: "Thursday",

5: "Friday",

6: "Saturday",

};

const day = days[dayNumber];

Section 1.6 Leveraging Logical OR for Default Values

When accessing potentially undefined values, you can utilize the logical OR operator (||) to provide a fallback value efficiently.

Before Optimization:

let name;

if (user?.name) {

name = user.name;

} else {

name = "Anonymous";

}

After Optimization:

const name = user?.name || "Anonymous";

By implementing these JavaScript optimization techniques, your code will not only execute more efficiently but will also be easier to read and maintain. Perfect for those who appreciate elegant syntax!