Code shortening technique

Tram Ho

Introduce

Hello everyone, today I would like to introduce to you a few small notes to gradually improve in writing javascript code.
Making javascript code easier and neatly presenting the code with shortened syntax and most of the features of ES6 provide us.

1. The tri-operator

There are many languages ​​that support this syntax, such as java, c ++, c #, php, ruby, … This is simply a more neat way of if...else on just one line of code.

Longhand:

Shorthand:

2. Define the variable

It will be faster and more compact if we declare multiple variables at the same time.

Longhand:

Shorthand:

3. Compare to boolean values

In case the comparative value is compared with the true value, we can ignore that comparison operator.

Longhand:

Shorthand:

Note: Actually, the 2 syntaxes are not exactly the same. With a shortened syntax, just likeJavascript is truthy value , it will be true because I recommend that you only use it in case of comparing boolean type conditions.

There is also a case that is KHÔNG PHẢI true

Longhand:

Shorthand:

4. For loop

This tip is really helpful for those who want to write pure JS and don’t want to rely on external libraries like JQuery or Lodash.

Longhand:

Shorthand:

If you want to loop through the index, you can use the syntax:

5. Arrow functions

One of the extremely useful features of ES6 that you should not ignore. Instead of having to use fumbling syntax to define a funtion, we can now use the => look more intuitive and concise.
Instead of you writing:

Then write in:

For example:

6. Implicit Return

If you use the arrow function syntax, you will not need to use the return keyword to return the results you want:

Longhand

Shorthand

7. Default Parameter Values

Also a feature of ES6, this helps you avoid the value of the parameter being undefined . It is also important to initialize the default parameters in the function.

Longhand

Shorthand

8. Template Literals

Have you had trouble getting a string that has both variables and strings? To solve this problem, ES6 has a syntax of ${} makes string manipulation simpler.

9. Multi-line String

Have you ever written a string on multiple lines, I think there are still many of you still writing the following:

Instead, write the following:

10. Spread Operator Shorthand (…)

This syntax is quite new and probably many of you have never known and this syntax. In the article, the methods on handling arrays have also been introduced. Basically, the Spread Operator allows us to convert an array into a single element, a string into multiple characters, and then we can manipulate it individually.

Longhand

Shorthand

Note: Unlike concat() you can use the spread operator to insert any position you want, not necessarily at the end of an array.

11. Double Bitwise NOT (~~)

Double bitwise NOT (~~) can be used instead of the Math.floor () rounding function.

12. Exponent Power (**)

This is an abbreviation for the pow () function.

Shorthand

13. Switch back and forth between string and number

This conversion does not seem to be very complicated.

But you can use the following syntax that is both simple and easy to remember:

Conclude

The above is just a way to help you reduce the code more and not necessarily apply in all cases, because maybe the code you cut too much leads to re-reading the code will become difficult so be cautious. and flexibility in presenting code.

Refer

https://www.sitepoint.com/shorthand-javascript-techniques/

Share the news now

Source : Viblo