Javascript optimization tips to know in 2021 🚀

Javascript can offer you as a developer new features that can improve your coding skills and can offer you solving some common issues without writing extra codes. Moreover, check out the post Javascript optimization tips to know in 2021 🚀.

My motive is to introduce all the JavaScript best practices such as shorthand and features which we must know as a frontend developer to make our life easier in 2021.

Object.entries()

This feature helps to convert the object to an array of objects.

const data = { test1: 'abc', test2: 'cde', test3: 'efg' };
const arr = Object.entries(data);
console.log(arr);
/** Output:
[ [ 'test1', 'abc' ],
  [ 'test2', 'cde' ],
  [ 'test3', 'efg' ]
]
**/

Object.values()

New feature introduced in ES8 that performs a similar function to Object.entries(), but without the key part.

const data = { test1: 'abc', test2: 'cde' };
const arr = Object.values(data);
console.log(arr);
/** Output:
[ 'abc', 'cde']
**/

If with multiple conditions

We can store multiple values in the array and we can use the array includes method.

//longhand
if (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl') {
    //logic
}
//shorthand
if (['abc', 'def', 'ghi', 'jkl'].includes(x)) {
   //logic
}

If true … else Shorthand

This is a greater shortcut for when we have if-else conditions that do not contain bigger logics inside. We can simply use the ternary operators to achieve this shorthand.

// Longhand
let test: boolean;
if (x > 100) {
    test = true;
} else {
    test = false;
}
// Shorthand
let test = (x > 10) ? true : false;
//or we can simply use
let test = x > 10;
console.log(test);

After nesting the condition we remain with something which looks like this:

let x = 300,
let test2 = (x > 100) ? 'greater 100' : (x < 50) ? 'less 50' : 'between 50 and 100';
console.log(test2); // "greater than 100"

Null Value checks and Assigning Default Value

let first = null,
let second = first || '';
console.log("null check", test2); // output will be ""

foreach Loop Shorthand

Useful short hand for iteration

// Longhand
for (var i = 0; i < testData.length; i++)

// Shorthand
for (let i in testData) or  for (let i of testData)

Switch shorthand

We can save the conditions in the key-value objects and can be used based on the conditions.

// Longhand
switch (data) {
  case 1:
    test1();
  break;

  case 2:
    test2();
  break;

  case 3:
    test();
  break;
  // And so on...
}

// Shorthand
var data = {
  1: test1,
  2: test2,
  3: test
};

data[anything] && data[anything]();

Multi-line String Shorthand

When we are dealing with a multi-line string in code we can do it this way.

//longhand
const data = 'abc abc abc abc abc abc\n\t'
    + 'test test,test test test test\n\t'
//shorthand
const data = `abc abc abc abc abc abc
         test test,test test test test`