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 || conditionsif (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 && conditionsif(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 checksif (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 caseswitch (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 linefunction doubleOf(value) {
 return 2 * value;
}

Use the arrow function to shorten it.const doubleOf = (value) => 2 * value

6. Shorthand for calling functions conditionallyfunction 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 valueif(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…elselet value;
if (num > 0) {
   value = 'positive';
} else {
   value = 'negative';
}

If the ifelse 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 arrayconst 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 numberconst 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!