ES6 from the beginner’s point of view

Tram Ho

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:

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:

But what about const is an array or object

Arrow Function

Through the following example we will see how it changes:

The new syntax is basically 2 parts:

  1. var newOne = () The var 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.
  2. => {} 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:

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:

For of loop

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

What we pass when calling SumElements must be an array, then we can write it differently as follows:

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:

Some of the most commonly used available methods of Maps are:

Because above I said that each element of Maps will be stored as [key, value] so when we loop, we can try the following:

Sets

Store an array of unique values

Even though "a" added twice, in sets there is only 1 value of "a" .
Some of the most useful Sets methods:

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.

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:

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

Share the news now

Source : Viblo