Every language has its own personality, and JavaScript, the most frequently used computer language, is no exception.

This blog article will go through several JavaScript Generic Optimization methods to help you create better code and ensure that the following is not your reaction when you come across 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";

2. 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];

3. 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();

4. 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];
  // ...
}

6. 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;

7. 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!