17 Javascript optimization tips to know in 2021 🚀
Tags: react, webdev, javascript, codenewbie
Published: 2021-01-25 16:32:43

You might be using `Javascript` development for a long time but sometimes you might not be updated with newest beautiful features that it offers which can solve your issues without writing extra codes. These techniques can help you write clean and optimized JavaScript Code. Moreover, these topics can help you to prepare yourself for JavaScript interviews in 2021.

After one of my articles about [8 neat javascript skills you didn't know in 4 minutes](https://dev.to/blessingartcreator/8-useful-javascript-tricks-you-didn-t-know-in-4-minutes-3npb), here I am coming with a new series to cover shorthand techniques that help you to write more clean and optimized JavaScript Code.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.This is a Cheat list for JavaScript Coding you **must** know in `2021`.

**1. If with multiple conditions**

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

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

**2. 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.

```javascript
// 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:

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



**3. Null, Undefined, Empty Checks**

When we do create new variables sometimes we want to check if the variable we are referencing for its value is not `null` or `undefined`. JavaScript does have a really good shorthand to achieve these functions.

```javascript
// Longhand
if (first !== null || first !== undefined || first !== '') {
    let second = first;
}
// Shorthand
let second = first|| '';
```

**4. Null Value checks and Assigning Default Value**

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

**5. Undefined Value checks and Assigning Default Value**
 
```javascript
let first= undefined,
let second = first || '';
console.log("undefined check", test2); // output will be ""
```

**6.foreach Loop Shorthand**

This is a useful short hand for iteration

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

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

Array for each variable

```javascript
function testData(element, index, array) {
  console.log('test[' + index + '] = ' + element);
}

[11, 24, 32].forEach(testData);
// prints: test[0] = 11, test[1] = 24, test[2] = 32
```


**7. Comparison returns**

Using the comparison in the `return` statement will avoid our 5 lines of code and reduced them to 1 line.

```javascript
// Longhand
let test;
function checkReturn() {
    if (!(test === undefined)) {
        return test;
    } else {
        return callMe('test');
    }
}
var data = checkReturn();
console.log(data); //output test
function callMe(val) {
    console.log(val);
}
// Shorthand
function checkReturn() {
    return test || callMe('test');
}
```

**8. Short function calling**
We can achieve these types of functions using `ternary operator`.

```javascript
// Longhand
function test1() {
  console.log('test1');
};
function test2() {
  console.log('test2');
};
var test3 = 1;
if (test3 == 1) {
  test1();
} else {
  test2();
}
// Shorthand
(test3 === 1? test1:test2)();
```

**9. Switch shorthand**

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

```javascript
// 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]();
```

**10. Multi-line String Shorthand**
When we are dealing with a multi-line string in code we can do it this way:

```javascript
//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`
```

**11.Implicit Return Shorthand**

With the use of `arrow functions`, we can return the value directly without having to write a `return` statement.

```javascript
Longhand:
//longhand
function getArea(diameter) {
  return Math.PI * diameter
}
//shorthand
getArea = diameter => (
  Math.PI * diameter;
)
```

**12.Lookup Conditions Shorthand**

If we have code to check the type and based on the type need to call different methods we either have the option to use multiple `else ifs` or go for the `switch`, but what if we have better shorthand than that?

```javascript
// Longhand
if (type === 'test1') {
  test1();
}
else if (type === 'test2') {
  test2();
}
else if (type === 'test3') {
  test3();
}
else if (type === 'test4') {
  test4();
} else {
  throw new Error('Invalid value ' + type);
}
// Shorthand
var types = {
  test1: test1,
  test2: test2,
  test3: test3,
  test4: test4
};
 
var func = types[type];
(!func) && throw new Error('Invalid value ' + type); func();
```

**13.Object.entries()**

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

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

**14. Object.values()**
This is also a new feature introduced in `ES8` that performs a similar function to `Object.entries()`, but without the key part:

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

**15. Repeat a string multiple times**

To repeat the same characters again and again we can use the `for loop` and add them in the same `loop` but what if we have a shorthand for this?

```javascript
//longhand 
let test = ''; 
for(let i = 0; i < 5; i ++) { 
  test += 'test '; 
} 
console.log(str); // test test test test test 
//shorthand 
'test '.repeat(5);
```

**16. Power Shorthand**

Shorthand for a Math exponent power function:

```javascript
//longhand
Math.pow(2,3); // 8
//shorthand
2**3 // 8
```

**17. Numeric Separators**

You can now easily separate numbers with just an `_` . This will make life of developers working with large numbers more easier.

```javascript
//old syntax
let number = 98234567

//new syntax
let number = 98_234_567
```

**If you would like to get update yourself with the latest features of JavaScript newest version`(ES2021/ES12)` check below:**

**1. replaceAll():** returns a new string with all matches of a pattern replaced by the new replacement word.

**2.Promise.any():** It takes an iterable of Promise objects and as one promise fulfills, return a single promise with the value.

**3. weakref:** This object holds a weak reference to another object without preventing that object from getting garbage-collected.

**4. FinalizationRegistry:** Lets you request a callback when an object is garbage collected.

**5. Private visibility:** modifier for methods and accessors: `Private methods` can be declared with `#`.

**6. Logical Operators:** && and || operators.

**7. Intl.ListFormat:** This object enables language-sensitive list formatting.

**8. Intl.DateTimeFormat:** This object enables language-sensitive date and time formatting.


**Conclusion**
What's more, there we have it. 17 ways to optimize your code with modern JavaScript techniques.

👋**Let's be friends!** Follow me on [Twitter](https://twitter.com/graphicblessing) and [instagram](https://instagram.com/blessingartcreator) for more related content. Don't forget to follow me also here on [Dev](https://dev.to/blessingartcreator) as well to get updated for new content. 

**Stay safe 🏠**