7 Shorthand Optimization Tricks every JavaScript Developer Should Know 😎
Tags: javascript, webdev, programming, productivity
Published: 2022-10-30 06:04:28

Every language has its own quirks and **JavaScript**, the most used programming language, is no exception. This article will cover a plethora of **JavaScript Shorthand Optimization tricks** that can help you write better code, and also make sure this is **NOT** your reaction when you encounter them:

![confused-face](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cvpfvy1k69g7x241qntc.gif)

## 1. Multiple string checks

Often you might need to check if a `string` is equal to one of the multiple values, and can become tiring extremely quickly. Luckily, **JavaScript** has a built-in method to help you with this.

```js
// Long-hand
const isVowel = (letter) => {
  if (
    letter === "a" ||
    letter === "e" ||
    letter === "i" ||
    letter === "o" ||
    letter === "u"
  ) {
    return true;
  }
  return false;
};

// Short-hand
const isVowel = (letter) =>
  ["a", "e", "i", "o", "u"].includes(letter);
```

## 2. `For-of` and `For-in` loops

`For-of` and `For-in` loops are a great way to iterate over an `array` or `object` without having to manually keep track of the **index** of the `keys` of the `object`.

### `For-of`

```js
const arr = [1, 2, 3, 4, 5];

// Long-hand
for (let i = 0; i < arr.length; i++) {
  const element = arr[i];
  // ...
}

// Short-hand
for (const element of arr) {
  // ...
}
```

### `For-in`

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

// Long-hand
const keys = Object.keys(obj);
for (let i = 0; i < keys.length; i++) {
  const key = keys[i];
  const value = obj[key];
  // ...
}

// Short-hand
for (const key in obj) {
  const value = obj[key];
  // ...
}
```

## 3. Falsey checks

If you want to check if a variable is `null`, `undefined`, `0`, `false`, `NaN`, or an empty `string`, you can use the **Logical Not** (`!`) operator to check for all of them at once, without having to write multiple conditions. This makes it easy to check if a variable contains valid data.

```js
// Long-hand
const isFalsey = (value) => {
  if (
    value === null ||
    value === undefined ||
    value === 0 ||
    value === false ||
    value === NaN ||
    value === ""
  ) {
    return true;
  }
  return false;
};

// Short-hand
const isFalsey = (value) => !value;
```

## 4. Ternary operator

As a **JavaScript** developer, you must have encountered the `ternary operator`. It is a great way to write concise `if-else` statements. However, you can also use it to **write concise code** and even **chain them to check for multiple conditions**.

```js
// Long-hand
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";
}

// Short-hand
const info =
  value < minValue
    ? "Value is too small"
    : value > maxValue ? "Value is too large" : "Value is in range";
```

## 5. Function calls

With the help of the `ternary operator`, you can also determine which **function** to call based on conditions.

**IMPORTANT SIDE-NOTE:** The `call signature` of the **functions** must be the same, else you risk running into an errors

```js
function f1() {
  // ...
}
function f2() {
  // ...
}

// Long-hand
if (condition) {
  f1();
} else {
  f2();
}

// Short-hand
(condition ? f1 : f2)();
```

## 6. Switch shorthand

Long **switch cases** can often be optimized by using an object with the **keys** as the **switches** and the **values** as the **return values**.

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

// Long-hand
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";
}

// Short-hand
const days = {
  0: "Sunday",
  1: "Monday",
  2: "Tuesday",
  3: "Wednesday",
  4: "Thursday",
  5: "Friday",
  6: "Saturday",
};
const day = days[dayNumber];
```

## 7. Fallback values

The `||` operator can set a **fallback value** for a variable.

```js
// Long-hand
let name;
if (user?.name) {
  name = user.name;
} else {
  name = "Anonymous";
}

// Short-hand
const name = user?.name || "Anonymous";
```

**That's all folks! 🎉**

Finding **personal finance** too intimidating? Checkout my **Instagram** to become a [**Dollar Ninja**](https://www.instagram.com/the.dollar.ninja/)

# Thanks for reading

Need a **Top Rated Front-End Development Freelancer** to chop away your development woes? Contact me on [Upwork](https://www.upwork.com/o/profiles/users/~01c12e516ee1d35044/)

Want to see what I am working on? Check out my [Personal Website](https://tapajyoti-bose.vercel.app) and [GitHub](https://github.com/ruppysuppy)

Want to connect? Reach out to me on [LinkedIn](https://www.linkedin.com/in/tapajyoti-bose/)

I am a Digital Nomad and occasionally travel. Follow me on [Instagram](https://www.instagram.com/tapajyotib/) to check out what I am up to.

Follow my blogs for **bi-weekly new tidbits** on [Dev](https://dev.to/ruppysuppy)

**FAQ**

These are a few commonly asked questions I get. So, I hope this **FAQ** section solves your issues.

1. **I am a beginner, how should I learn Front-End Web Dev?**
   Look into the following articles:

    1. [Front End Development Roadmap](https://dev.to/ruppysuppy/front-end-developer-roadmap-zero-to-hero-4pkf)
    2. [Front End Project Ideas](https://dev.to/ruppysuppy/5-projects-to-master-front-end-development-57p)

2. **Would you mentor me?**
   Sorry, I am already under a lot of workload and would not have the time to mentor anyone.