This article is intended to be helpful for beginners on 11 concise ways to write more concise and efficient JavaScript code. Let's begin to learn the 11 ways to write it!
Filter Unique Values
ARRAYS
The Set
object type was introduced in ES6 and, together with …, the spread
operator, we can use it to create a new array with only unique values.
This trick works for arrays that contain primitive types: undefined
, null
, boolean
, string
and number
. (If you have an array containing additional objects, functions, or arrays, you'll need a different approach!).
1 2 3 4 | <span class="token keyword">const</span> array <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token number">1</span> <span class="token punctuation">,</span> <span class="token number">1</span> <span class="token punctuation">,</span> <span class="token number">2</span> <span class="token punctuation">,</span> <span class="token number">3</span> <span class="token punctuation">,</span> <span class="token number">5</span> <span class="token punctuation">,</span> <span class="token number">5</span> <span class="token punctuation">,</span> <span class="token number">1</span> <span class="token punctuation">]</span> <span class="token keyword">const</span> uniqueArray <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token operator">...</span> <span class="token keyword">new</span> <span class="token class-name">Set</span> <span class="token punctuation">(</span> array <span class="token punctuation">)</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> uniqueArray <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Result: [1, 2, 3, 5]</span> |
Short-Circuit Evaluation
CONDITIONALS
The ternary
operator is a quick way to write simple (and sometimes not simple) conditional statements, like so:
1 2 3 | x <span class="token operator">></span> <span class="token number">100</span> <span class="token operator">?</span> <span class="token string">'Above 100'</span> <span class="token punctuation">:</span> <span class="token string">'Below 100'</span> <span class="token punctuation">;</span> x <span class="token operator">></span> <span class="token number">100</span> <span class="token operator">?</span> <span class="token punctuation">(</span> x <span class="token operator">></span> <span class="token number">200</span> <span class="token operator">?</span> <span class="token string">'Above 200'</span> <span class="token punctuation">:</span> <span class="token string">'Between 100-200'</span> <span class="token punctuation">)</span> <span class="token punctuation">:</span> <span class="token string">'Below 100'</span> <span class="token punctuation">;</span> |
But sometimes even the ternary
operator is more complicated than necessary. Instead, we can use &&
, and ||
logical operators to evaluate certain expressions in an even more concise manner. This is often referred to as short-circuiting
or short-circuit evaluation
.
How It Works
Now you want to return only one or two options.
Using &&
will return the first false
or falsy
. If all the evaluated operands are true
, the last evaluated expression will be returned.
1 2 3 4 | <span class="token keyword">let</span> one <span class="token operator">=</span> <span class="token number">1</span> <span class="token punctuation">,</span> two <span class="token operator">=</span> <span class="token number">2</span> <span class="token punctuation">,</span> three <span class="token operator">=</span> <span class="token number">3</span> <span class="token punctuation">;</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> one <span class="token operator">&&</span> two <span class="token operator">&&</span> three <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Result: 3</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token number">0</span> <span class="token operator">&&</span> <span class="token keyword">null</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Result: 0</span> |
Use ||
will return true
or truthy
first. If all the operands evaluate to false
, the last evaluated expression will be returned.
1 2 3 4 | <span class="token keyword">let</span> one <span class="token operator">=</span> <span class="token number">1</span> <span class="token punctuation">,</span> two <span class="token operator">=</span> <span class="token number">2</span> <span class="token punctuation">,</span> three <span class="token operator">=</span> <span class="token number">3</span> <span class="token punctuation">;</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> one <span class="token operator">||</span> two <span class="token operator">||</span> three <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Result: 1</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token number">0</span> <span class="token operator">||</span> <span class="token keyword">null</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Result: null</span> |
Example 1
Next you want to return độ dài
of a variable, but you don't know the type of variable.
We can use the if/else
to check if foo
is an acceptable type, but this can be quite long. Short circuit evaluation
allows you to do this instead:
1 2 | <span class="token keyword">return</span> <span class="token punctuation">(</span> foo <span class="token operator">||</span> <span class="token punctuation">[</span> <span class="token punctuation">]</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> length <span class="token punctuation">;</span> |
If the variable foo
is truthy, it will be returned. Otherwise, the length of the empty array will be returned as 0
.
Example 2
Have you ever had problems accessing a nested object attribute? You may not know whether the object or one of the extra properties exists and this can cause annoying errors.
Now you want to access an attribute called data
in this.state
, but the data is not defined until your program returns the fetch request successfully.
Depending on where you use it, calling this.state.data
may prevent your application from running. To solve this problem, we can package it in one condition:
1 2 3 4 5 6 | <span class="token keyword">if</span> <span class="token punctuation">(</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token punctuation">.</span> data <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token punctuation">.</span> data <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token string">'Fetching Data'</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
But that seems quite repetitive. Operator ||
Provide a more concise solution:
1 2 | <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token punctuation">.</span> data <span class="token operator">||</span> <span class="token string">'Fetching Data'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
You can refactor the code above to use &&
. Statement Fetching Data && this.state.data
returns this.state.data
whether it undefined
or not. This is because Fetching Data
is truthy, and so &&
will always pass it when listed first.
Convert to Boolean
TYPE CONVERSION
Besides the usual boolean values of true
and false
, JavaScript also treats all other values as truthy
or falsy
.
Unless otherwise specified, all values in JavaScript are truthy
except for 0
, ""
, null
, undefined
, NaN
and of course false
, that is falsy
.
We can easily switch between true and false using the negative operator !
, will also convert the type to "boolean"
.
1 2 3 4 5 6 | <span class="token keyword">const</span> isTrue <span class="token operator">=</span> <span class="token operator">!</span> <span class="token number">0</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> isFalse <span class="token operator">=</span> <span class="token operator">!</span> <span class="token number">1</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> alsoFalse <span class="token operator">=</span> <span class="token operator">!</span> <span class="token operator">!</span> <span class="token number">0</span> <span class="token punctuation">;</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> isTrue <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Result: true</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token keyword">typeof</span> <span class="token boolean">true</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Result: "boolean"</span> |
This type of conversion can be useful in conditional statements.
Convert to String
TYPE CONVERSION
To quickly convert a number into a string, we can use the +
concatenation operator followed by a set of ""
blank quotes.
1 2 3 4 | <span class="token keyword">const</span> val <span class="token operator">=</span> <span class="token number">1</span> <span class="token operator">+</span> <span class="token string">""</span> <span class="token punctuation">;</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> val <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Result: "1"</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token keyword">typeof</span> val <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Result: "string"</span> |
Convert to Number
TYPE CONVERSION
The opposite can be quickly achieved using the plus +
operator.
1 2 3 4 5 | <span class="token keyword">let</span> int <span class="token operator">=</span> <span class="token string">"15"</span> <span class="token punctuation">;</span> int <span class="token operator">=</span> <span class="token operator">+</span> int <span class="token punctuation">;</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> int <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Result: 15</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token keyword">typeof</span> int <span class="token punctuation">)</span> <span class="token punctuation">;</span> Result <span class="token punctuation">:</span> <span class="token string">"number"</span> |
This can also be used to convert booleans
into số
, as follows:
1 2 3 | console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token operator">+</span> <span class="token boolean">true</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Return: 1</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token operator">+</span> <span class="token boolean">false</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Return: 0</span> |
There may be contexts where the +
sign will be interpreted as a concatenation operator instead of a plus operator. When that happens (and you want to return an integer, not a float), you can instead use two tildes: ~~
.
The tilde, called bitwise NOT operator
, is the bitwise NOT operator
equivalent to -n-1
. So for example: ~15
equals -16
.
Using two consecutive tildes will effectively remove the operation, because -(-n - 1) - 1 = n + 1 - 1 = n
. In other words, ~-16
equals 15
.
1 2 3 4 | <span class="token keyword">const</span> int <span class="token operator">=</span> <span class="token operator">~</span> <span class="token operator">~</span> <span class="token string">"15"</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> int <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Result: 15</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token keyword">typeof</span> int <span class="token punctuation">)</span> <span class="token punctuation">;</span> Result <span class="token punctuation">:</span> <span class="token string">"number"</span> |
The bitwise NOT operator can also be used on booleans: ~true = -2
and ~false = -1
.
Quick Powers
OPERATIONS
Since ES7, it is possible to use the power operator **
, faster than writing Math.pow (2, 3)
. This is a simple tool, but it doesn't have a lot of updated instructions to include this operator!
1 2 | console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token number">2</span> <span class="token operator">**</span> <span class="token number">3</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Result: 8</span> |
This should not be confused with the ^
symbol, which is often used to denote exponents, but in JavaScript is the bitwise XOR operator.
Before ES7, when working with exponents, the left shift operator <<
would be used:
1 2 3 4 5 6 | <span class="token comment">// The following expressions are equivalent:</span> Math <span class="token punctuation">.</span> <span class="token function">pow</span> <span class="token punctuation">(</span> <span class="token number">2</span> <span class="token punctuation">,</span> n <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token number">2</span> <span class="token operator"><<</span> <span class="token punctuation">(</span> n <span class="token operator">-</span> <span class="token number">1</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token number">2</span> <span class="token operator">**</span> n <span class="token punctuation">;</span> |
Example 2 << 3 = 16
will be equivalent to 2 ** 4 = 16
.
Quick Float to Integer
OPERATIONS / TYPE CONVERSION
If you want to convert a float
to an integer, you can use Math.floor()
, Math.ceil()
or Math.round()
. But there is also a faster way to truncate a float
into an integer using |
, the bitwise OR operators.
1 2 3 | console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token number">23.9</span> <span class="token operator">|</span> <span class="token number">0</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Result: 23</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token operator">-</span> <span class="token number">23.9</span> <span class="token operator">|</span> <span class="token number">0</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Result: -23</span> |
Use |
will work differently depending on whether you're working with positive or negative numbers, so it's only best to use this shortcut if you're sure.
If n
positive, n | 0
will round the result down. If n
negative, it rounds the result up. More precisely, this will remove anything after the decimal point, truncating a float to an integer.
You can get the same rounding effect by using ~~
, as above and in fact, any bitwise operator will force a float to an integer. The reason these specific operations work is: Once forced into an integer – The value will be preserved.
Delete the last digits
The bitwise OR operator can also be used to remove any number of digits from the end of an integer. This means you don't have to use like this to switch between types:
1 2 3 | <span class="token keyword">let</span> str <span class="token operator">=</span> <span class="token string">"1553"</span> <span class="token punctuation">;</span> <span class="token function">Number</span> <span class="token punctuation">(</span> str <span class="token punctuation">.</span> <span class="token function">substring</span> <span class="token punctuation">(</span> <span class="token number">0</span> <span class="token punctuation">,</span> str <span class="token punctuation">.</span> length <span class="token operator">-</span> <span class="token number">1</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
Instead, the bitwise OR operator allows us to write:
1 2 3 4 | console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token number">1553</span> <span class="token operator">/</span> <span class="token number">10</span> <span class="token operator">|</span> <span class="token number">0</span> <span class="token punctuation">)</span> <span class="token comment">// Result: 155</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token number">1553</span> <span class="token operator">/</span> <span class="token number">100</span> <span class="token operator">|</span> <span class="token number">0</span> <span class="token punctuation">)</span> <span class="token comment">// Result: 15</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token number">1553</span> <span class="token operator">/</span> <span class="token number">1000</span> <span class="token operator">|</span> <span class="token number">0</span> <span class="token punctuation">)</span> <span class="token comment">// Result: 1</span> |
Automatic Binding in Classes
CLASSES
We can use the ES6 arrow notation in Class methods and that way the implications are implied. This will usually save a few lines of code in the Class constructor and we can happily say goodbye to repeated expressions like this.myMethod = this.myMethod.bind(this)
!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <span class="token keyword">import</span> React <span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> React <span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">Compononent</span> <span class="token punctuation">{</span> <span class="token function">constructor</span> <span class="token punctuation">(</span> props <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">super</span> <span class="token punctuation">(</span> props <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function-variable function">myMethod</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token comment">// This method is bound implicitly!</span> <span class="token punctuation">}</span> <span class="token function">render</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span> <span class="token operator">></span> <span class="token operator"><</span> div <span class="token operator">></span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">myMethod</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> |
Truncate an Array
ARRAYS
If you want to remove the values from the end of an array thoroughly, there are faster alternatives than using splice()
.
For example, if you know the size of the original array, you can redefine its length attribute, like so:
1 2 3 4 | <span class="token keyword">let</span> array <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token number">0</span> <span class="token punctuation">,</span> <span class="token number">1</span> <span class="token punctuation">,</span> <span class="token number">2</span> <span class="token punctuation">,</span> <span class="token number">3</span> <span class="token punctuation">,</span> <span class="token number">4</span> <span class="token punctuation">,</span> <span class="token number">5</span> <span class="token punctuation">,</span> <span class="token number">6</span> <span class="token punctuation">,</span> <span class="token number">7</span> <span class="token punctuation">,</span> <span class="token number">8</span> <span class="token punctuation">,</span> <span class="token number">9</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span> array <span class="token punctuation">.</span> length <span class="token operator">=</span> <span class="token number">4</span> <span class="token punctuation">;</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> array <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Result: [0, 1, 2, 3]</span> |
This is a particularly concise solution. However, the run time of the slice()
even faster. If speed is your main goal, consider using something like this:
1 2 3 4 | <span class="token keyword">let</span> array <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token number">0</span> <span class="token punctuation">,</span> <span class="token number">1</span> <span class="token punctuation">,</span> <span class="token number">2</span> <span class="token punctuation">,</span> <span class="token number">3</span> <span class="token punctuation">,</span> <span class="token number">4</span> <span class="token punctuation">,</span> <span class="token number">5</span> <span class="token punctuation">,</span> <span class="token number">6</span> <span class="token punctuation">,</span> <span class="token number">7</span> <span class="token punctuation">,</span> <span class="token number">8</span> <span class="token punctuation">,</span> <span class="token number">9</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span> array <span class="token operator">=</span> array <span class="token punctuation">.</span> <span class="token function">slice</span> <span class="token punctuation">(</span> <span class="token number">0</span> <span class="token punctuation">,</span> <span class="token number">4</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> array <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Result: [0, 1, 2, 3]</span> |
Get the Last Item (s) in an Array
ARRAYS
The slice()
can take negative integers and if provided, it will take the values from the end of the array instead of starting.
1 2 3 4 5 | <span class="token keyword">let</span> array <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token number">0</span> <span class="token punctuation">,</span> <span class="token number">1</span> <span class="token punctuation">,</span> <span class="token number">2</span> <span class="token punctuation">,</span> <span class="token number">3</span> <span class="token punctuation">,</span> <span class="token number">4</span> <span class="token punctuation">,</span> <span class="token number">5</span> <span class="token punctuation">,</span> <span class="token number">6</span> <span class="token punctuation">,</span> <span class="token number">7</span> <span class="token punctuation">,</span> <span class="token number">8</span> <span class="token punctuation">,</span> <span class="token number">9</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> array <span class="token punctuation">.</span> <span class="token function">slice</span> <span class="token punctuation">(</span> <span class="token operator">-</span> <span class="token number">1</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Result: [9]</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> array <span class="token punctuation">.</span> <span class="token function">slice</span> <span class="token punctuation">(</span> <span class="token operator">-</span> <span class="token number">2</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Result: [8, 9]</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> array <span class="token punctuation">.</span> <span class="token function">slice</span> <span class="token punctuation">(</span> <span class="token operator">-</span> <span class="token number">3</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Result: [7, 8, 9]</span> |
JSON Code Format
JSON
Lastly, you may have used JSON.opesify()
before, but did you realize that it can also help you indent JSON?
The stringify()
has two optional parameters: an alternative function you can use to filter displayed JSON and space values.
The space value takes an integer for the number of spaces you want or a string (such as ' t'
to insert tabs) and it can make reading JSON data a lot easier.
1 2 3 4 5 6 7 | console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token constant">JSON</span> <span class="token punctuation">.</span> <span class="token function">stringify</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> alpha <span class="token punctuation">:</span> <span class="token string">'A'</span> <span class="token punctuation">,</span> beta <span class="token punctuation">:</span> <span class="token string">'B'</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token keyword">null</span> <span class="token punctuation">,</span> <span class="token string">'t'</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Result:</span> <span class="token comment">// '{</span> <span class="token comment">// "alpha": A,</span> <span class="token comment">// "beta": B</span> <span class="token comment">// }'</span> |
Conclude
Hopefully this article will help you somewhere when working with JavaScript, thank you for reading the article
The article is referenced from https://medium.com/@bretcameron/12-javascript-tricks-you-wont-find-in-most-tutorials-a9c9331f169d