1. Arrow functions
JS ES6 release Arrow functions that let you write functions more clearly and quickly! Instead of having to declare the function like this:
1 2 3 4 |
<span class="token keyword">const</span> <span class="token function-variable function">multiply</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token parameter">x <span class="token punctuation">,</span> y</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> x <span class="token operator">*</span> y <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> |
Then you can declare the same with less code:
1 2 3 4 |
<span class="token keyword">const</span> <span class="token function-variable function">multiply</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token parameter">x <span class="token punctuation">,</span> y</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">return</span> x <span class="token operator">*</span> y <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> |
It can be even simplified if your function only has one expression:
1 2 |
<span class="token keyword">const</span> <span class="token function-variable function">multiply</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token parameter">x <span class="token punctuation">,</span> y</span> <span class="token punctuation">)</span> <span class="token operator">=></span> x <span class="token operator">*</span> y <span class="token punctuation">;</span> |
2. Spread Operator
Spread syntax allows iterable objects such as Array or String to be declared extensively in function cll or in elements of array literals or Object . (If the reader does not understand, the example will understand immediately)
2.1. Creates a new array that has an element of an array
1 2 3 4 5 |
<span class="token keyword">const</span> parts <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token string">'shoulders'</span> <span class="token punctuation">,</span> <span class="token string">'knees'</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> lyrics <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token string">'head'</span> <span class="token punctuation">,</span> <span class="token operator">...</span> parts <span class="token punctuation">,</span> <span class="token string">'and'</span> <span class="token punctuation">,</span> <span class="token string">'toes'</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> lyrics <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Result: ["head", "shoulders", "knees", "and", "toes"]</span> |
2.2. A better way to join arrays
1 2 3 4 5 6 |
<span class="token keyword">let</span> arr1 <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 punctuation">;</span> <span class="token keyword">let</span> arr2 <span class="token operator">=</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 punctuation">;</span> arr1 <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token operator">...</span> arr1 <span class="token punctuation">,</span> <span class="token operator">...</span> arr2 <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> arr1 <span class="token punctuation">)</span> <span class="token comment">// Result: [0, 1, 2, 3, 4, 5]</span> |
2.3. Use as parameter passed to the function
1 2 3 4 |
<span class="token keyword">const</span> <span class="token function-variable function">add</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token parameter">a <span class="token punctuation">,</span> b <span class="token punctuation">,</span> c</span> <span class="token punctuation">)</span> <span class="token operator">=></span> a <span class="token operator">+</span> b <span class="token operator">+</span> c <span class="token punctuation">;</span> <span class="token keyword">let</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">2</span> <span class="token punctuation">,</span> <span class="token number">3</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> <span class="token function">add</span> <span class="token punctuation">(</span> <span class="token operator">...</span> array <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Result: 6</span> |
3. Rest Operator
Rest syntax looks exactly like the spread syntax , except that rest syntax is used to combine arrays and objects. In other words, rest syntax is the opposite syntax of spread syntax . Spread syntax allows to expand an array into its own element, while rest syntax aggregates everything into a single element.
P / s: If you still do not understand, you can understand in the way of the translator as follows:
- Spread syntax is for passing into a function=> Use by function call, declare object, declare array, …
- Rest syntax is for fetching all elements passed in with a single variable=> Use inside the function
1 2 3 4 5 6 7 |
<span class="token keyword">const</span> <span class="token function-variable function">blend</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token parameter">ice <span class="token punctuation">,</span> liquid <span class="token punctuation">,</span> <span class="token operator">...</span> theRest</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> theRest <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token function">blend</span> <span class="token punctuation">(</span> <span class="token string">'ice'</span> <span class="token punctuation">,</span> <span class="token string">'milk'</span> <span class="token punctuation">,</span> <span class="token string">'banana'</span> <span class="token punctuation">,</span> <span class="token string">'strawberry'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Result: ['banana', 'strawberry']</span> |
The last parameter of the above function is prefixed ...
causing all remaining parameters to be placed in the same array.
4. Fill arrays
Create a simple array with one line of code.
4.1. Array with 5 elements is empty string
1 2 |
<span class="token keyword">let</span> array <span class="token operator">=</span> <span class="token function">Array</span> <span class="token punctuation">(</span> <span class="token number">5</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">fill</span> <span class="token punctuation">(</span> <span class="token string">''</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Result: ['', '', '', '', '']</span> |
4.2. Array with numbers from 0
to 4
1 2 3 4 5 |
<span class="token keyword">let</span> array <span class="token operator">=</span> Array <span class="token punctuation">.</span> <span class="token function">from</span> <span class="token punctuation">(</span> <span class="token function">Array</span> <span class="token punctuation">(</span> <span class="token number">5</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">keys</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Result: [0, 1, 2, 3, 4]</span> <span class="token comment">// Using the spread operator</span> <span class="token keyword">let</span> array <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token operator">...</span> <span class="token function">Array</span> <span class="token punctuation">(</span> <span class="token number">5</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">keys</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">]</span> <span class="token comment">// Result: [0, 1, 2, 3, 4]</span> |
5. Computed property names
ES6 supports a new syntax called computed property names that allows you to enclose the expression in square brackets []
, the expression in it will be used as a key in that object .
1 2 3 4 5 6 7 8 |
<span class="token keyword">let</span> key <span class="token operator">=</span> <span class="token string">'A_DYNAMIC_KEY'</span> <span class="token punctuation">;</span> <span class="token keyword">let</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">[</span> key <span class="token punctuation">]</span> <span class="token operator">:</span> <span class="token string">'A_VALUE'</span> <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> obj <span class="token punctuation">)</span> <span class="token comment">// Result: { A_DYNAMIC_KEY: 'A_VALUE' }</span> |
6. Good ways to console.log()
6.1. Use console.table()
when you have an array of objects .
1 2 3 4 5 6 |
<span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token punctuation">{</span> name <span class="token operator">:</span> <span class="token string">'Suibin'</span> <span class="token punctuation">,</span> age <span class="token operator">:</span> <span class="token number">30</span> <span class="token punctuation">,</span> coder <span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> bar <span class="token operator">=</span> <span class="token punctuation">{</span> name <span class="token operator">:</span> <span class="token string">'Borja'</span> <span class="token punctuation">,</span> age <span class="token operator">:</span> <span class="token number">40</span> <span class="token punctuation">,</span> coder <span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> baz <span class="token operator">=</span> <span class="token punctuation">{</span> name <span class="token operator">:</span> <span class="token string">'Paul'</span> <span class="token punctuation">,</span> age <span class="token operator">:</span> <span class="token number">50</span> <span class="token punctuation">,</span> coder <span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> console <span class="token punctuation">.</span> <span class="token function">table</span> <span class="token punctuation">(</span> <span class="token punctuation">[</span> foo <span class="token punctuation">,</span> bar <span class="token punctuation">,</span> baz <span class="token punctuation">]</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
=> Result:
6.2. Make print results stand out more with CSS and the %
sign
1 2 3 |
console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">'%cStyled log'</span> <span class="token punctuation">,</span> <span class="token string">'color: orange; font-weight: bold;'</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> <span class="token string">'Normal log'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
=> Result:
6.3. Log multiple objects at once to save space and also make it easier to read.
1 2 3 4 5 6 |
<span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token punctuation">{</span> name <span class="token operator">:</span> <span class="token string">'Suibin'</span> <span class="token punctuation">,</span> age <span class="token operator">:</span> <span class="token number">30</span> <span class="token punctuation">,</span> coder <span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> bar <span class="token operator">=</span> <span class="token punctuation">{</span> name <span class="token operator">:</span> <span class="token string">'Borja'</span> <span class="token punctuation">,</span> age <span class="token operator">:</span> <span class="token number">40</span> <span class="token punctuation">,</span> coder <span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> baz <span class="token operator">=</span> <span class="token punctuation">{</span> name <span class="token operator">:</span> <span class="token string">'Paul'</span> <span class="token punctuation">,</span> age <span class="token operator">:</span> <span class="token number">50</span> <span class="token punctuation">,</span> coder <span class="token operator">:</span> <span class="token boolean">false</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> <span class="token punctuation">{</span> foo <span class="token punctuation">,</span> bar <span class="token punctuation">,</span> baz <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
=> Result:
7. Object destructuring
Get rid of the duplicate code by destructuring the properties of the object you need.
1 2 3 4 5 6 |
<span class="token keyword">const</span> dog <span class="token operator">=</span> <span class="token punctuation">{</span> name <span class="token operator">:</span> <span class="token string">'Nala'</span> <span class="token punctuation">,</span> gender <span class="token operator">:</span> <span class="token string">'female'</span> <span class="token punctuation">,</span> age <span class="token operator">:</span> <span class="token number">10</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> |
Destructure inside the function syntax by wrapping the property name in curly braces {}
1 2 3 4 5 6 |
<span class="token keyword">const</span> <span class="token function-variable function">func</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token parameter"><span class="token punctuation">{</span> name <span class="token punctuation">,</span> age <span class="token punctuation">}</span></span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> name <span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> is </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> age <span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> years old.</span> <span class="token template-punctuation string">`</span></span> <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> <span class="token function">func</span> <span class="token punctuation">(</span> dog <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Result: Nala is 10 years old.</span> |
Or pass an object and declare the variable name matching the property name of that object . This way will be better if there are many destructure objects in the function.
1 2 3 4 5 6 7 |
<span class="token keyword">const</span> <span class="token function-variable function">func</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token parameter">animal</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">{</span> name <span class="token punctuation">,</span> age <span class="token punctuation">}</span> <span class="token operator">=</span> animal <span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> name <span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> is </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> age <span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> years old.</span> <span class="token template-punctuation string">`</span></span> <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> <span class="token function">func</span> <span class="token punctuation">(</span> dog <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Result: Nala is 10 years old.</span> |
8. Use reduce()
, map()
and filter()
instead of regular loops.
8.1. Use reduce()
to calculate the value of the array.
1 2 3 4 5 6 |
<span class="token keyword">let</span> orders <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">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 punctuation">;</span> <span class="token keyword">const</span> total <span class="token operator">=</span> orders <span class="token punctuation">.</span> <span class="token function">reduce</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token parameter">acc <span class="token punctuation">,</span> cur</span> <span class="token punctuation">)</span> <span class="token operator">=></span> acc <span class="token operator">+</span> cur <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> total <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Result: 15</span> |
8.2. Use map()
to create a new array, along with calling a function for each element.
1 2 3 4 5 6 |
<span class="token keyword">let</span> orders <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">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 punctuation">;</span> <span class="token keyword">const</span> total <span class="token operator">=</span> orders <span class="token punctuation">.</span> <span class="token function">map</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token parameter">item</span> <span class="token punctuation">)</span> <span class="token operator">=></span> item <span class="token operator">*</span> <span class="token number">2</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> total <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Result: [2, 4, 6, 8, 10]</span> |
8.3. Use filter()
to filter the array with a function .
1 2 3 4 5 6 |
<span class="token keyword">let</span> orders <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">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 punctuation">;</span> <span class="token keyword">const</span> total <span class="token operator">=</span> orders <span class="token punctuation">.</span> <span class="token function">filter</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token parameter">item</span> <span class="token punctuation">)</span> <span class="token operator">=></span> item <span class="token operator">></span> <span class="token number">3</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> total <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Result: [4, 5]</span> |