10 Ways To Write Better JavaScript Code

Photo by Christopher Gower on Unsplash

Most of us are used to writing JavaScript code for a long time. But we might not have updated ourselves with new features which can solve your issues with minimal code. These techniques can help you write clean and optimized JavaScript Code. Today, I’ll be summarizing some optimized JavaScript code snippets which can help you develop your skills.

1. Shorthand for if with multiple || conditions

if (fruit === 'apple' || fruit === 'orange' || fruit === 'banana' || fruit ==='grapes') {
    //code
}

Instead of using multiple || (OR) conditions, we can use an array with the values and use the includes() method.

if (['apple', 'orange', 'banana', 'grapes'].includes(fruit)) {
   //code
}

2. Shorthand for if with multiple && conditions

if(obj && obj.address && obj.address.postalCode) {
    console.log(obj.address.postalCode)
}

Use optional chaining (?.) to replace this snippet.

console.log(obj?.address?.postalCode);

3. Shorthand for null, undefined, and empty if checks

if (first !== null || first !== undefined || first !== '') {
    let second = first;
}

Instead of writing so many checks, we can write it better this way using || (OR) operator.

const second = first || '';

4. Shorthand for switch case

switch (number) {
  case 1:
     return 'one';

  case 2:
     return 'two';

  default:
     return;
}

Use a map/ object to write it in a cleaner way.

const data = {
  1: 'one',
  2: 'two'
};

//Access it using
data[num]

5. Shorthand for functions with a single line

function doubleOf(value) {
  return 2 * value;
}

Use the arrow function to shorten it.

const doubleOf = (value) => 2 * value

6. Shorthand for calling functions conditionally

function area() {
    console.log('area');
}
function volume() {
    console.log('volume');
}

if(type === 'square') {
    area();
} else {
    volume();
}

Instead of using if to conditionally call the function you can write it this way.

(type === 'square' ? area : volume)()

7. Shorthand for using if to set a default value

if(amount === null) {
    amount = 0;
}

if(value === undefined) {
    value = 0;
}

console.log(amount); //0
console.log(value); //0

You can simply write the same using || (OR) operator.

console.log(amount || 0); //0
console.log(value || 0); //0

8. Shorthand for if…else

let value;
if (num > 0) {
    value = 'positive';
} else {
    value = 'negative';
}

If the if…else condition isn’t that complex then we can replace it with a ternary operator.

const value = num > 0 ? 'positive' : 'negative';

9. Shorthand for traditional for loop while looping through an array

const arr = [11, 22, 33];
for(let i=0; i<arr.length; i++) {
    console.log(arr[i]);
}

Replace this normal for with forEach .

const arr = [11, 22, 33];
arr.forEach((val) => console.log(val));

10. Shorthand for converting string number to number

const num1 = parseInt("100");
const num2 =  parseFloat("11.11");

Instead of using parseInt and parseFloat and other similar methods, we can use a simple + operator.

const num1 = +"100";
const num2 =  +"11.11";

Conclusion

These are some of my top favorite JavaScript shorthand techniques. These really help developers improve their code standards, so please leave a comment if you know similar shorthand techniques. Thank you for reading, I hope you found this helpful!