Lately I have tinkered to learn Reactjs. I was about to start reading React documents, but I couldn’t realize it because the syntax was really new compared to the familiar Javascript.
So I decided to learn from the most basic of ES6.
Here is what I am trying to find out if there is any wrong, or incorrect understanding, everyone comments.
Let and Const
Let is basically the same as var but it has scope, you also see the following example:
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token number">50</span> <span class="token punctuation">;</span> <span class="token keyword">let</span> b <span class="token operator">=</span> <span class="token number">100</span> <span class="token punctuation">;</span> <span class="token keyword">var</span> c <span class="token operator">=</span> <span class="token number">20</span> <span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> <span class="token boolean">true</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token number">60</span> <span class="token punctuation">;</span> <span class="token keyword">var</span> c <span class="token operator">=</span> <span class="token number">10</span> <span class="token punctuation">;</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> a <span class="token operator">/</span> c <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// 6</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> b <span class="token operator">/</span> c <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// 10</span> <span class="token punctuation">}</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> c <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// 10</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> a <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// 50</span> |
Through the above example, we notice the following points:
- The value of
a
declared in if cannot overwrite the non-if value at all b
can still be used in if- the value of
c
has been changed after passing if
Const does not change much to declare a constant. But let’s still take a few examples:
1 2 3 4 5 6 7 8 | <span class="token keyword">const</span> a <span class="token operator">=</span> <span class="token number">50</span> <span class="token punctuation">;</span> a <span class="token operator">=</span> <span class="token number">60</span> <span class="token punctuation">;</span> <span class="token operator">=></span> sẽ thông báo lỗi thì hằng không được thay đổi giá trị <span class="token keyword">const</span> a <span class="token operator">=</span> <span class="token number">20</span> <span class="token punctuation">;</span> <span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token number">20</span> <span class="token punctuation">;</span> <span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token number">20</span> <span class="token punctuation">;</span> <span class="token constant">C</span> ả <span class="token number">3</span> câu lệnh trên đều xảy ra lỗi vì hằng số a đã được định nghĩa |
But what about const is an array or object
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <span class="token keyword">const</span> <span class="token constant">MY_OBJECT</span> <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token string">"key_obj"</span> <span class="token operator">:</span> <span class="token string">"value_obj"</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> Việc gán <span class="token constant">MY_OBJECT</span> bằng <span class="token number">1</span> giá trị khác như sau <span class="token operator">:</span> <span class="token constant">MY_OBJECT</span> <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token string">"abc"</span> <span class="token punctuation">,</span> <span class="token string">"def"</span> <span class="token punctuation">}</span> <span class="token operator">=></span> Thông báo lỗi Nhưng chúng ta hoàn toàn có thể cập nhật giá trị cho <span class="token constant">MY_OBJECT</span> <span class="token constant">MY_OBJECT</span> <span class="token punctuation">.</span> key_obj <span class="token operator">=</span> <span class="token string">"value_changed"</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token string">"key_obj"</span> <span class="token operator">:</span> <span class="token string">"value_changed"</span> <span class="token punctuation">}</span> <span class="token constant">MY_OBJECT</span> <span class="token punctuation">[</span> <span class="token string">"new_key"</span> <span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">"new value"</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token string">"key_obj"</span> <span class="token operator">:</span> <span class="token string">"value_changed"</span> <span class="token punctuation">,</span> <span class="token string">"new_key"</span> <span class="token operator">:</span> <span class="token string">"new value"</span> <span class="token punctuation">}</span> <span class="token constant">T</span> ương tự với array <span class="token keyword">const</span> <span class="token constant">MY_ARRAY</span> <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 constant">MY_ARRAY</span> <span class="token operator">=</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 operator">=></span> Thông báo lỗi My_ARRAY <span class="token punctuation">.</span> <span class="token function">push</span> <span class="token punctuation">(</span> <span class="token parameter"><span class="token number">6</span></span> <span class="token punctuation">)</span> <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">6</span> <span class="token punctuation">]</span> |
Arrow Function
Through the following example we will see how it changes:
1 2 3 4 5 6 7 8 9 10 | <span class="token comment">// Old Syntax</span> <span class="token keyword">function</span> <span class="token function">oldOne</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 string">"Hello World..!"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">// New Syntax</span> <span class="token keyword">var</span> <span class="token function-variable function">newOne</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> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">"Hello World..!"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
The new syntax is basically 2 parts:
var newOne = ()
Thevar newOne
part is like a birth certificate, the way to tell everyone “I was born, my name is newOne”. And what does it do, this= ()
part says it is a function, not a doctor or an engineer.=> {}
And in this part, the type of story about life as its function, what to do, how to return the result then write in here.
Default Parameters
This one I think is actually too familiar, especially with Ruby classmates like me.
Basic understanding is that the params if not passed in, it will take the default value, for example:
1 2 3 4 5 6 | <span class="token keyword">let</span> <span class="token function-variable function">Func</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 operator">=</span> <span class="token number">10</span></span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">return</span> a <span class="token operator">+</span> b <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">Func</span> <span class="token punctuation">(</span> <span class="token number">20</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// 20 + 10 = 30</span> <span class="token function">Func</span> <span class="token punctuation">(</span> <span class="token number">20</span> <span class="token punctuation">,</span> <span class="token number">20</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// 20 + 20 = 40</span> |
Ah, but everyone’s paying attention to the default parameters so they should be at the end because if left like this, it won’t work:
1 2 3 4 5 | <span class="token keyword">let</span> <span class="token function-variable function">Func</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token parameter">b <span class="token operator">=</span> <span class="token number">10</span> <span class="token punctuation">,</span> a</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">return</span> a <span class="token operator">+</span> b <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">Func</span> <span class="token punctuation">(</span> <span class="token number">20</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token operator">=></span> <span class="token number">NaN</span> |
For of loop
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <span class="token keyword">let</span> string <span class="token operator">=</span> <span class="token string">"Javascript"</span> <span class="token punctuation">;</span> <span class="token keyword">for</span> <span class="token punctuation">(</span> <span class="token keyword">let</span> char <span class="token keyword">of</span> string <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> char <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> Output <span class="token operator">:</span> <span class="token constant">J</span> a v a s c r i p t |
A quick look at the above example we immediately see that the string[index]
will be the output of each loop, not the index
. Just like with Ruby.
Spread attributes
As far as I understand, it will turn a list of elements into an array of elements.
Let’s see the following example to understand better: Usually we will write
1 2 3 4 5 6 7 8 9 10 | <span class="token keyword">let</span> <span class="token function-variable function">SumElements</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token parameter">arr</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> arr <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// [10, 20, 40, 60, 90]</span> <span class="token keyword">let</span> sum <span class="token operator">=</span> <span class="token number">0</span> <span class="token punctuation">;</span> <span class="token keyword">for</span> <span class="token punctuation">(</span> <span class="token keyword">let</span> element <span class="token keyword">of</span> arr <span class="token punctuation">)</span> <span class="token punctuation">{</span> sum <span class="token operator">+=</span> element <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> sum <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// 220. </span> <span class="token punctuation">}</span> <span class="token function">SumElements</span> <span class="token punctuation">(</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 number">40</span> <span class="token punctuation">,</span> <span class="token number">60</span> <span class="token punctuation">,</span> <span class="token number">90</span> <span class="token punctuation">]</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
What we pass when calling SumElements must be an array, then we can write it differently as follows:
1 2 3 4 5 6 7 8 9 10 | <span class="token keyword">let</span> <span class="token function-variable function">SumElements</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token parameter"><span class="token operator">...</span> arr</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> arr <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// [10, 20, 40, 60, 90]</span> <span class="token keyword">let</span> sum <span class="token operator">=</span> <span class="token number">0</span> <span class="token punctuation">;</span> <span class="token keyword">for</span> <span class="token punctuation">(</span> <span class="token keyword">let</span> element <span class="token keyword">of</span> arr <span class="token punctuation">)</span> <span class="token punctuation">{</span> sum <span class="token operator">+=</span> element <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> sum <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// 220. </span> <span class="token punctuation">}</span> <span class="token function">SumElements</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 number">40</span> <span class="token punctuation">,</span> <span class="token number">60</span> <span class="token punctuation">,</span> <span class="token number">90</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
Then we don’t need to pass in an array anymore, but a list of elements.
Maps
Quite similar to Ruby’s hash but we have to use the set
and get
methods to add an element and get the element and each element in Maps is associated with a pair of [key, value]
, not {key: value}
, and The keys in a Maps are unique, meaning that if you set two values with the same key, the value set later will overwrite the previous one. Let’s see an example:
1 2 3 4 5 6 7 8 9 | <span class="token keyword">var</span> map <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Map</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> map <span class="token punctuation">.</span> <span class="token function">set</span> <span class="token punctuation">(</span> <span class="token string">'name'</span> <span class="token punctuation">,</span> <span class="token string">'John'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> map <span class="token punctuation">.</span> <span class="token function">set</span> <span class="token punctuation">(</span> <span class="token string">'name'</span> <span class="token punctuation">,</span> <span class="token string">'Andy'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> map <span class="token punctuation">.</span> <span class="token function">set</span> <span class="token punctuation">(</span> <span class="token number">1</span> <span class="token punctuation">,</span> <span class="token string">'number one'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> map <span class="token punctuation">.</span> <span class="token function">set</span> <span class="token punctuation">(</span> <span class="token number">NaN</span> <span class="token punctuation">,</span> <span class="token string">'No value'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> map <span class="token punctuation">.</span> <span class="token function">get</span> <span class="token punctuation">(</span> <span class="token string">'name'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Andy. Note John is replaced by Andy.</span> map <span class="token punctuation">.</span> <span class="token function">get</span> <span class="token punctuation">(</span> <span class="token number">1</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// number one</span> map <span class="token punctuation">.</span> <span class="token function">get</span> <span class="token punctuation">(</span> <span class="token number">NaN</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// No value</span> |
Some of the most commonly used available methods of Maps are:
1 2 3 4 | map <span class="token punctuation">.</span> size <span class="token punctuation">;</span> <span class="token comment">// Trả về số phần tử</span> map <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">// Lấy ra danh sách keys </span> map <span class="token punctuation">.</span> <span class="token function">values</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Lấy ra danh sách values.</span> |
Because above I said that each element of Maps will be stored as [key, value]
so when we loop, we can try the following:
1 2 3 4 5 6 7 8 | <span class="token keyword">var</span> map <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Map</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">for</span> <span class="token punctuation">(</span> <span class="token keyword">let</span> <span class="token punctuation">[</span> key <span class="token punctuation">,</span> value <span class="token punctuation">]</span> <span class="token keyword">of</span> map <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> key <span class="token operator">+</span> <span class="token string">" - "</span> <span class="token operator">+</span> value <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> Output <span class="token operator">:</span> name <span class="token operator">-</span> John id <span class="token operator">-</span> <span class="token number">10</span> |
Sets
Store an array of unique values
1 2 3 4 5 6 7 | <span class="token keyword">var</span> sets <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Set</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> sets <span class="token punctuation">.</span> <span class="token function">add</span> <span class="token punctuation">(</span> <span class="token string">'a'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> sets <span class="token punctuation">.</span> <span class="token function">add</span> <span class="token punctuation">(</span> <span class="token string">'b'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> sets <span class="token punctuation">.</span> <span class="token function">add</span> <span class="token punctuation">(</span> <span class="token string">'a'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token parameter">sets</span> <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> |
Even though "a"
added twice, in sets there is only 1 value of "a"
.
Some of the most useful Sets methods:
1 2 3 4 5 | <span class="token keyword">var</span> sets <span class="token operator">=</span> New <span class="token function">Set</span> <span class="token punctuation">(</span> <span class="token punctuation">[</span> <span class="token number">1</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">8</span> <span class="token punctuation">,</span> <span class="token number">9</span> <span class="token punctuation">]</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> sets <span class="token punctuation">.</span> size <span class="token punctuation">;</span> <span class="token comment">// returns 5. Size of the size.</span> sets <span class="token punctuation">.</span> <span class="token function">has</span> <span class="token punctuation">(</span> <span class="token number">1</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// returns true. </span> sets <span class="token punctuation">.</span> <span class="token function">has</span> <span class="token punctuation">(</span> <span class="token number">10</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// returns false.</span> |
Static methods
I don’t know if it is true, but I think it looks like a class method similar to Ruby: The definition is inside the class and is only called directly through the class.
1 2 3 4 5 6 7 8 9 | <span class="token keyword">class</span> <span class="token class-name">Example</span> <span class="token punctuation">{</span> <span class="token keyword">static</span> <span class="token function">Callme</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 string">"Static method"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> Example <span class="token punctuation">.</span> <span class="token function">Callme</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> Output <span class="token operator">:</span> Static method |
Getters and Setters
Too familiar with programmers, if you have learned about Java programming, Asp.NET in school, it is not strange that the syntax is like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <span class="token keyword">class</span> <span class="token class-name">People</span> <span class="token punctuation">{</span> <span class="token function">constructor</span> <span class="token punctuation">(</span> <span class="token parameter">name</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> name <span class="token operator">=</span> name <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">getName</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 keyword">this</span> <span class="token punctuation">.</span> name <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">setName</span> <span class="token punctuation">(</span> <span class="token parameter">name</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> name <span class="token operator">=</span> name <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">let</span> person <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">People</span> <span class="token punctuation">(</span> <span class="token string">"Jon Snow"</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> person <span class="token punctuation">.</span> <span class="token function">getName</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> person <span class="token punctuation">.</span> <span class="token function">setName</span> <span class="token punctuation">(</span> <span class="token string">"Dany"</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> person <span class="token punctuation">.</span> <span class="token function">getName</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> Output <span class="token operator">:</span> Jon Snow Dany |
If everyone forgot or did not know, I would like to briefly explain as follows:
Contructor is the constructor when you let person = new People("Jon Snow");
So, roughly speaking, you are actually calling this constructor function and this
in this
function is the person
object that has just been created. And it will assign the object’s name property person
= the value we pass in new People("Jon Snow");
. When you call person.setName("Dany");
then this
in this
function is also the object that calls the function (is person
), everyone should understand it here
References
https://codeburst.io/es6-tutorial-for-beginners-5f3c4e7960be https://github.com/lukehoban/es6features#let–const