What is ES6?
ES6 is an abbreviation of ECMAScript 6, this is considered a set of advanced techniques of Javascript and is the latest version of the ECMAScript standard. According to wikipedia, ECMAScript is a brand specification scripting language standardized by Ecma International
through ECMA-262
and ISO/IEC 16262
. It was created to standardize JavaScript, to promote many independent implementations. JavaScript remains the most famous ECMAScript implementation since this standard was published, with other well known implementations including JScript and ActionScript. ECMAScript is commonly used for client-side scripting on the World Wide Web, and it is increasingly used to write server applications and services using Node.js.
In this article, I would like to introduce you to some of the functions in ES6 that we should apply to daily programming because it can save you time from shorter syntaxes. and many other benefits …
1, The keyword “let”
In javascript, the most common way to declare a variable is to use the var
keyword, but in ES6, a variable declared let
is supported. Why was the let
keyword born? This is simply because if we want to use a variable in a word block, use this keyword.
For example :
Usually if you use the var
keyword
1 2 3 4 5 6 7 8 9 10 11 | <span class="token keyword">function</span> <span class="token function">foo</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> x <span class="token operator">=</span> <span class="token number">1</span> <span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> x <span class="token operator">==</span> <span class="token number">1</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> y <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> y <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Trả về 2</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> x <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Trả về 1</span> <span class="token punctuation">}</span> <span class="token function">foo</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
but with the keyword let
1 2 3 4 5 6 7 8 9 10 11 | <span class="token keyword">function</span> <span class="token function">foo</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">let</span> x <span class="token operator">=</span> <span class="token number">1</span> <span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> x <span class="token operator">==</span> <span class="token number">1</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">let</span> y <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> y <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Lỗi</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> x <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// 1</span> <span class="token punctuation">}</span> <span class="token function">foo</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
Furthermore let
does not allow reassigning the value of a variable. For example :
with var
1 2 3 4 | <span class="token keyword">var</span> x <span class="token operator">=</span> <span class="token number">10</span> <span class="token punctuation">;</span> <span class="token keyword">var</span> x <span class="token operator">=</span> <span class="token number">20</span> <span class="token punctuation">;</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> x <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// 20</span> |
also let
1 2 3 | <span class="token keyword">let</span> x <span class="token operator">=</span> <span class="token number">10</span> <span class="token punctuation">;</span> <span class="token keyword">let</span> x <span class="token operator">=</span> <span class="token number">20</span> <span class="token punctuation">;</span> <span class="token comment">// Lỗi vì x đã được định nghĩa</span> |
2, Keyword const
This const
keyword to declare a read-only variable. For example :
1 2 | <span class="token keyword">const</span> message <span class="token operator">=</span> <span class="token string">"Xin chào tất cả mọi người"</span> <span class="token punctuation">;</span> |
Once the const variable has been declared, it cannot be reassigned. The assignment must take place at the same time as the variable declaration
3, Define the default parameter
We can declare default parameters when knowing a function
1 2 3 4 5 6 | <span class="token keyword">function</span> <span class="token function">foo</span> <span class="token punctuation">(</span> x <span class="token punctuation">,</span> y <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> x <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// undefined</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> y <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// 2</span> <span class="token punctuation">}</span> <span class="token function">foo</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
We can also overwrite (rewrite) the value of the parameter. For example
1 2 3 4 5 6 | <span class="token keyword">function</span> <span class="token function">foo</span> <span class="token punctuation">(</span> x <span class="token punctuation">,</span> y <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> x <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> y <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">foo</span> <span class="token punctuation">(</span> <span class="token number">1</span> <span class="token punctuation">,</span> <span class="token number">3</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// 1, 3</span> |
We can also use expressions within default parameters. For example :
1 2 3 4 5 6 | <span class="token keyword">function</span> <span class="token function">foo</span> <span class="token punctuation">(</span> x <span class="token operator">=</span> <span class="token number">0</span> <span class="token punctuation">,</span> y <span class="token operator">=</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> <span class="token number">2</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> x <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// 0</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> y <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// 4</span> <span class="token punctuation">}</span> <span class="token function">foo</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
4, Spread and Rest Operators
Spread Operator
allows converting a string into multiple arguments (in case of calling with the function) or into multiple elements (for arrays). The syntax it uses is ...
For example:
1 2 3 | <span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span> x <span class="token punctuation">:</span> <span class="token number">12</span> <span class="token punctuation">,</span> y <span class="token punctuation">:</span> <span class="token number">10</span> <span class="token punctuation">}</span> <span class="token keyword">const</span> obj2 <span class="token operator">=</span> <span class="token punctuation">{</span> z <span class="token punctuation">:</span> <span class="token number">3</span> <span class="token punctuation">,</span> <span class="token operator">...</span> obj <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token comment">// obj2 = {x: 12, y:10 , z:3}</span> |
Or rather, we can pass the value of an array instead of parameters in a function. For example :
1 2 3 4 5 6 | <span class="token keyword">const</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token number">10</span> <span class="token punctuation">,</span> <span class="token number">12</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">foo</span> <span class="token punctuation">(</span> x <span class="token punctuation">,</span> y <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> x <span class="token punctuation">,</span> y <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">foo</span> <span class="token punctuation">(</span> <span class="token operator">...</span> arr <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Kết quả là 10, 12</span> |
Rest operators
use it as its name, temporarily translated in Vietnamese as các tham số còn lại
. The meaning is as follows.
1 2 3 4 5 | <span class="token keyword">function</span> <span class="token function">foo</span> <span class="token punctuation">(</span> x <span class="token punctuation">,</span> y <span class="token punctuation">,</span> <span class="token operator">...</span> arguments <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> arguments <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">foo</span> <span class="token punctuation">(</span> <span class="token number">10</span> <span class="token punctuation">,</span> <span class="token number">20</span> <span class="token punctuation">,</span> <span class="token string">'Hello'</span> <span class="token punctuation">,</span> <span class="token string">'World'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Kết quả ['Hello', 'World']</span> |
5, Declare multiple values at the same time
1 2 3 4 5 6 7 | // Không dùng ES6 var x = 1; var y = 2; var z = 3; // Sử dụng ES6 let [x, y, z] = [1,2,3] |
6, Arrow Functions
This is a fairly new syntax for using a function declaration
1 2 3 4 5 6 7 8 9 | <span class="token comment">// ES5</span> <span class="token keyword">function</span> <span class="token function">multiply</span> <span class="token punctuation">(</span> x <span class="token punctuation">,</span> y <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 comment">// ES6</span> <span class="token keyword">const</span> <span class="token function-variable function">multiply</span> <span class="token operator">=</span> <span class="token punctuation">(</span> x <span class="token punctuation">,</span> y <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> |
Even in cases where the function only uses a single statement, we can shorten it as follows
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> x <span class="token punctuation">,</span> y <span class="token punctuation">)</span> <span class="token operator">=></span> x <span class="token operator">*</span> y <span class="token punctuation">;</span> |
7, Template literals
The way of concatenating strings in ES6 is quite simple. With syntax es5.
1 2 | <span class="token keyword">var</span> str <span class="token operator">=</span> <span class="token string">'Release date: '</span> <span class="token operator">+</span> date |
in es6 will be more optimal
1 2 | <span class="token keyword">let</span> str <span class="token operator">=</span> <span class="token template-string"><span class="token string">`Release Date: </span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> date <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">`</span></span> |
How to write a paragraph of text on multiple lines
1 2 3 4 | <span class="token keyword">let</span> str <span class="token operator">=</span> <span class="token template-string"><span class="token string">`This text is on multiple lines`</span></span> |
8, Short method definition (Method definition shorthand)
The function
keyword may be ignored when assigning methods on an object.
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token comment">// với es5</span> <span class="token keyword">var</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span> a <span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> c <span class="token punctuation">,</span> d <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> b <span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> e <span class="token punctuation">,</span> f <span class="token punctuation">)</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">// trong es6</span> <span class="token keyword">let</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token function">a</span> <span class="token punctuation">(</span> c <span class="token punctuation">,</span> d <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token function">b</span> <span class="token punctuation">(</span> e <span class="token punctuation">,</span> f <span class="token punctuation">)</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">// để gọi method a chỉ cần obj.a();</span> |
9, Loop
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token keyword">var</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token string">'a'</span> <span class="token punctuation">,</span> <span class="token string">'b'</span> <span class="token punctuation">,</span> <span class="token string">'c'</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span> <span class="token comment">// bình thường để lặp ta thường làm ntn</span> <span class="token keyword">for</span> <span class="token punctuation">(</span> <span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span> <span class="token punctuation">;</span> i <span class="token operator"><</span> arr <span class="token punctuation">.</span> length <span class="token punctuation">;</span> i <span class="token operator">++</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> arr <span class="token punctuation">[</span> i <span class="token punctuation">]</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> nhưng nếu dùng es6 cú pháp sẽ ngắn hơn kha khá <span class="token keyword">for</span> <span class="token punctuation">(</span> <span class="token keyword">let</span> i <span class="token keyword">of</span> arr <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> i <span class="token punctuation">)</span> <span class="token punctuation">}</span> |
References