Must-Know JS Syntax For React.Js Developer Part — 2
Arrow Function in ES6
Arrow functions hold all the features of a regular JS functions with some additional advantages. Arrow function allows the developer to shorten the code and write more elegant code. One of the features of the arrow function is that you would not need to use return keyword most of the time. For example:
You can clearly see how an arrow function simplifies the code. Arrow function removes function keyword from code. There is also no need for adding return keyword as arrow points to what should be returned.
Another feature of the Arrow function is that for one parameter or argument you wouldn’t need to add parenthesis. For example:
Transpiling in ES6
Transpiling is not a compiler which compiles your code to binary. The purpose of Transpiling is to convert the latest JS syntaxes to syntaxes that could be easily interpreted by wider range of browsers. Now, one might ask why Transpiling was added to ES6?
Previously, the only way to make sure that the latest features of ES6 you used in your code would work on wider range of browser, you would have to convert your code to ES5 or previous versions. This was a tedious process. You won't need to worry about this any more as react does this for you out of the box using “Babel”.
Objects And Array in ES6
ES6 introduced some new features in array and objects. For example, destructuring, object literal enhancement and spread operators are added. We discuss all of these features elaborately.
1.Destructuring Assignments
Object destructuring allows us to use or scope out any values declared within that object. For example:
Destructuring allows us to scope out the user name and his/her phone number from the person object. We can also overwrite the values we have destructured. We can also destructure any incoming function argument. For example:
Similarly, we can also use destructuring in an array. For example, in an array of length 3, we wish to get only the 1st and 3rd value. We can do so like:
Here, val1 takes value from the first occurrence in the array and val3 passes the first two value and takes vale from the 3rd occurrence.
2. Object Literal Enhancement
Object literal enhancement is quite the opposite of destructuring. In this process, 2 or more values are compiled into one object. For example:
3. Spread Operator
The spread operator is three dots (…) that perform several different tasks. First, the spread operator allows us to combine the contents of arrays. For example, if we had two arrays, we could make a third array that combines the two arrays into one:
All of the items from peaks and canyons are pushed into a new array called tahoe. Let’s take a look at how the spread operator can help us deal with a problem. Using the peaks array from the previous sample, let’s imagine that we wanted to grab the last item from the array rather than the first. We could use the Array.reverse method to reverse the array in combination with array destructuring:
See what happened? The reverse function has actually altered or mutated the array. In a world with the spread operator, we don’t have to mutate the original array; we can create a copy of the array and then reverse it:
Since we used the spread operator to copy the array, the peaks array is still intact and can be used later in its original form. The spread operator can also be used to get some, or the rest, of the items in the array:
We can also use the spread operator to collect function arguments as an array. Here, we build a function that takes in n number of arguments using the spread operator, and then uses those arguments to print some console messages:
The directions function takes in the arguments using the spread operator. The first argument is assigned to the start variable. The last argument is assigned to a finish variable using Array.reverse. We then use the length of the arguments array to display how many towns we’re going through. The number of stops is the length of the arguments array minus the finish stop. This provides incredible flexibility because we could use the directions function to handle any number of stops. The spread operator can also be used for objects.2 Using the spread operator with objects is similar to using it with arrays. In this example, we’ll use it the same way we combined two arrays into a third array, but instead of arrays, we’ll use objects:
Promises
Promises in ES6 helps us to deal with asynchronous behaviour. While making an asynchronous request we may get data or an error. Sometimes we may get multiple segments of data and error. To deal with this problem promise was introduced. Promise helps us to deal with data and error as a simple pass or fail. We will learn more about promises and how to use them as we move along.
Class In ES6
Prior to ES6, there wasn’t any use of the class keyword or the concept of object-oriented programming was not introduced in JavaScript. In order to mimic the function of a class, the developers had to define a function and add method via prototype. To a developer from object-oriented background, this was a nightmare. The class was added to ES6 in order to make the life of a developer easier.
Modular Programming
Every programming language lets the developer import code from other files. But JS developer had to use 3rd party libraries which could interpret code import and export. To solve this issue, ES6 added a keyword called export to make modular code. This means that the developer would be able to export code and import it in another file without using any 3rd part libraries.
CommonJS
CommonJS is quite similar to modules. But, instead of using import keyword to import functions from another file, it uses module.exports keyword to import code from another file. This process is widely used in NodeJS.
