We are kicking off from where we left off in Part 1 of the new features of ES6.
String and Number Methods
There are quite a few new features of strings and string methods available in ES6. These are used to target expressions inside of a string. We are going to be dealing with the following:
startsWith()
endsWith()
includes()
Let us have an example of how it works.
https://cdn-images-1.medium.com/max/800/1*Ks7GD_2-GsMPzohZEhpxRQ.png
In the snippet above, we have made use of one of the three new methods ES6 provides – startsWith(). What this method does is that it checks if the string value supplied starts with a matching string which is usually a string inside of the brackets. So, we are checking if the fullString variable starts with Hello. This method returns a Boolean so if it is the same, it returns true else, returns false.
Note: It is case sensitive. This means that ‘hello’ is different from ‘Hello’.
https://cdn-images-1.medium.com/max/800/1*jGQlSk6LLVZQxbki1f3xEQ.png
In the second example above, we can see that while using the second method – endsWith(), we are checking if the value of the string ends with a particle text or value. You should already know that even if our argument was Games, it returned false. This is because like I said earlier, they are case sensitive so we expect our result to be false.
https://cdn-images-1.medium.com/max/800/1*-kk9g6F6_TUT8xYD6W-Cmw.png
In the third example above, we can see that while using the third method – includes(), we are checking if the value of the string passed is in the main string at any position. Since our string William can be found in the fullString, we get a true value returned.
We can also do some number manipulations in ES6 such as binary, octal etc.
https://cdn-images-1.medium.com/max/800/1*5YyiSyH98PwWN-pGSSyGWg.png
Output:
https://cdn-images-1.medium.com/max/800/1*VcdZfXuLcSS3iWu5hXScVw.png
Let us take a look at Number functions.
https://cdn-images-1.medium.com/max/800/1*pS6UKbhJ7AaORVz9UKu29Q.png
Output:
https://cdn-images-1.medium.com/max/800/1*7azhYk5O0PfQBOqdFJw-rg.png
There are quite some more number methods which you could check up on your own and practice more.
Default Parameters and Spread Operators.
Default parameters in ES6 works pretty much the same way as in PHP and all. When we want a default value to be used say when we run a function or something, all we have to do is assign it in the parameter where we passed it in. Here is a look at an example.
https://cdn-images-1.medium.com/max/800/1*YZH6F3uzTasuvI1Q41RHFw.png
Output:
https://cdn-images-1.medium.com/max/800/1*ASo9LwwiLDIoXvW1CoUccA.png
Rather than having an undefined as the output, we can set it to hold or have a default parameter which makes it look nicer rather than the default undefined we get. Here is a look at that.
https://cdn-images-1.medium.com/max/800/1*fk3dPRjCnR4ErD-1HCfXew.png
Output:
https://cdn-images-1.medium.com/max/800/1*rrq7tHhaYvyNNQR4xHVvow.png
All we did to get that output was to set a default parameter inside of our function. If we were to that from ES5, we would probably have something like this.
https://cdn-images-1.medium.com/max/800/1*uhMhQDaTzwRSXyhbuN2Teg.png
You can confirm that with ES6, it is pretty much lesser code to write.
Let us take a look at the Spread Operators.
The spread operator is represented with three dots (…) and it is used to allow an expression to be expanded in places where multiple arguments are expected. Let us take a quick look at that. In ES5, if we want to have an array passed in as a parameter to the function, we would be making use of the apply method as shown below.
https://cdn-images-1.medium.com/max/800/1*cqecDH6L_lo8hPHk0aWPLw.png
However, in ES6, we do not need to make use of the apply method. All we need is to make use of the three dots as shown below.
https://cdn-images-1.medium.com/max/800/1*WctNS0f9H8AMOeZcmF9T8w.png
This gives the same output as the earlier one but with much lesser code to write. Nice yeah?
Let us look at having two variables and using our arguments passed in.
https://cdn-images-1.medium.com/max/800/1*Gk-lZQCRb1ugP0ArB0180w.png
Output:
https://cdn-images-1.medium.com/max/800/1*Tfxkb-Hdk8m_HyILR3GvmQ.png
Enjoying the new features I guess.
Map and Set Data Structure.
The set objects allow us to store unique values of any type. Can be primitive values or object references.
Let us take a look at how this works.
https://cdn-images-1.medium.com/max/800/1*Ynb_uz1bQGCl119jKIbqIw.png
Output:
https://cdn-images-1.medium.com/max/800/1*G07ihQdO21RyiWcKA2677g.png
Consider the snippet above. We created an array called myArr. We then created an object of the Set method and passed in the array we created and finally logged the object to the console. We can see that in the output section, the set even tells us what kind of element is contained within which happens to be the array we passed in. Let us try to do some manipulation to the Set object created.
https://cdn-images-1.medium.com/max/800/1*sV8x_cmMTGOtZIvPCcNRLA.png
Output:
https://cdn-images-1.medium.com/max/800/1*Mgs4xAn5SfBn5jeUcvqeoA.png
https://cdn-images-1.medium.com/max/800/1*fy7m55ouD_OKgPuZyfuDIA.png
If we take a good look at what we tried to achieve, we added a string value to the set and also an object to the set. We also removed an element from the set. You can see that from the two outputs generated above, we see what type of value is stored in the set – Array, String and Object.
You can also tryout methods like this on your own:
mySet.clear(); // This clears the entire set
mySet.size; // This returns the size of the set object.
There are other methods you can check up to familiarize yourself with set.
Let us try to perform looping with the set object.
https://cdn-images-1.medium.com/max/800/1*ihqm3Jv2VZkTkeM8URzWqQ.png
Output:
https://cdn-images-1.medium.com/max/800/1*DOA57YuNbl6zm6OvDUOItQ.png
We can see that in our output, our set object looped through each element in the set list and logged the result to our console.
Let us dive into Maps.
Maps are key value pairs as opposed to Set which are individual values. Let us take a look at an example.
https://cdn-images-1.medium.com/max/800/1*h7EWugxH2W1TJrh9kU48nA.png
Output:
https://cdn-images-1.medium.com/max/800/1*xpzbKtCXBE3WffABaUlPCw.png
In the example above, we created a simple map object with an array and each key (a1, b1) having its own value (Hello, How are you) respectively. We can also add elements or other key value pairs to the object. Let us take a look at that.
https://cdn-images-1.medium.com/max/800/1*1mdOEyyDaabjs0nrfs3RFw.png
Output:
https://cdn-images-1.medium.com/max/800/1*4Vq9cT0OFcob0l5PdHSN8g.png
There are also other methods that can be used with the map object.
Some include: Clear, delete, forEach, has, size etc.
To delete, we make use of the key. Let us take a look at that.
https://cdn-images-1.medium.com/max/800/1*J3OORVaGnsntQfkdOzQ_sg.png
Output:
https://cdn-images-1.medium.com/max/800/1*xpzbKtCXBE3WffABaUlPCw.png
In addition to Set and Map, we have WeakSet and WeakMap. These have to do with objects. Let us take a look at how that works.
https://cdn-images-1.medium.com/max/800/1*mt0Xlk6CWwHHtba9uzFP_w.png
Output:
https://cdn-images-1.medium.com/max/800/1*Qyr1fxxT8dQ79AdDu1w29A.png
We created an object of Weakset and called it carWeakSet. We then created an object called firstCar with its properties been make and model. We then used the add method to add the firstCar object to the carWeakSet object as seen above.
Let us try an example with the WeakMap.
https://cdn-images-1.medium.com/max/800/1*0y0zXb1G29YQQmodObY0CQ.png
Output:
https://cdn-images-1.medium.com/max/800/1*9oOTaXuf17E8aZjqzPtFBA.png
We can see that the key created also has a value assigned to it. The method from the Set and Map can be applied to the WeakSet and WeakMap respectively.
Stay tuned for the final part on the new features of ES6.
Thanks for reading.
Top comments (0)