As a developer, it’s crucial to stay updated with recent technologies to remain relevant and streamline development processes. The newer the technology, the less work is required. That’s why we’ll be discussing the essential features of ES6 that you need to master.
In this article, we will examine the ES6 key features such as template literals, Array methods, Object and Array destructuring, and other related concepts within the context of functional programming paradigms in JavaScript ES6.
Before proceeding with this article, it’s important to have a basic understanding of JavaScript, including variables, data types, control flow, and functions. If you’re not familiar with these concepts or need a refresher, check out this article by MDN web docs.
ECMASCRIPT6
ES6, short for ECMAScript 6, was developed to standardize JavaScript further, representing the sixth iteration of ECMAScript.
JavaScript ES6 introduces new syntax, enabling us to write less code for accomplishing complex tasks. Understanding ES6 features facilitates efficient coding.
*Key Features we will be looking at in this article:
*
Arrow function
Template literals
Object & Array destructuring
Array Method e.g Map, Filter, Find, Reduce
Set
Spread operator
Rest operator
-> Arrow function: Arrow functions provide a simpler and more straightforward method for creating functions compared to the traditional approach of using the ‘function’ keyword for declaration.
Arrow function syntax:
Traditional vs Arrow function
The example below shows how traditional functions and arrow functions differ in their syntax.
The traditional way of declaring a function:
Arrow function:
Notice the two methods perform the same function, but the arrow function provides a simpler way of declaring the function
-> Template literals: Template literals are a feature that allows you to embed expressions within string literals. Instead of concatenating strings using the ‘+’ operator, template literals enclose the strings in backticks () and utilize ${} to serve as placeholders.
Example:
NB: We no longer need to concatenate strings when accessing the values of firstName and lastName. Instead, we can directly use ${} placeholders to access them.
-> Array Destructuring: In ES6, array destructuring involves extracting values from an array and assigning them to separate variables.
Take a look at the example below:
Previously, accessing the values in the ‘studentName’ array was achieved using the following method:
But Array destructuring offers a straightforward approach to accessing values, requiring only a few simple steps.
-> Object Destructuring: This works like array destructuring, but instead of arrays, it’s about pulling out values from objects.
An example of object Destructuring
Previously, if we wanted to extract data from ‘StudentDetail’, we would have done so by:
With object destructuring, accessing them becomes easier using the following method:
->Array Method:Array methods are built-in functions utilized for manipulating and transforming array data. Among the commonly used ones are Map, Filter, Reduce, Find, and several others.
• Map: The Map method iterates over the original array and then returns a new array. It uses the values from the original array to create a new array without changing the size of the original array.
Map syntax:
Example: We use the map method to iterate over the “number” variable and then return a new array that multiplies the original array by 2.
Output:
• Filter: The Filter method creates a new array based on specified conditions. Unlike the Map method, it can change the size of the new array.
Filter syntax:
Example: In the example below, we use the Filter method to remove any age that is less than 18.
Output:
• Find: The Find method iterates over an array and then searches for the first element that meets the condition specified. It returns the matching element, and if no match is found, it returns undefined.
Example: In the example below, we used the Find method to search for the name ‘Mike’.
Note!
If the condition specified in the callback function does not match any elements in the array, the find() method will return undefined.
• Reduce: The reduce() method, just like every other array method mentioned earlier, iterates over an array and reduces it to a single value. The callback function in the reduce() method takes two parameters: the total of all calculations and the current value of the iteration.
We will explain this better in the example below:
Explanation: The callback function takes two parameters, namely ‘total’ and ‘currentValue’. Initially, the ‘total’ value is set to ‘0’, and the ‘currentValue’ parameter takes the value of each element in the array sequentially (i.e., 1, 2, 3, 4, 5).
Then, within the callback function, we use these two parameters to calculate the total by adding the ‘total’ and ‘currentValue’ together.
-> Set: The Set method is used to retrieve only unique values from an array. It ensures that each value occurs only once within the set.
Set Syntax:
Example: The “games” variable holds value for different kinds of games played; the new Set method can be used to return unique values ensuring no game appears more than once.
-> Spread operator: The ‘Spread’ operator iterates over an iterable element, such as a string, array, or object, and then spreads each value into individual items. This allows us to quickly copy them.
Spread syntax: (…)
Example: Spread operator allows us to split the elements in ‘hobby’ variables into a single item.
Example 2: We can use the spread operator in an array too:
-> Rest operator: The Rest operator has a similar syntax as the Spread operator. However, the Rest operator is used to gather the rest of the item into an array. It allows you to access the rest of the values in an element easily.
Rest Syntax: (…) Followed by the name of the parameter.
Example: We can access the first name of the students and use the rest operator to collect the remaining names of the students:
Note!
You can’t place the rest operator at the beginning like this:
It will return an error if you try to use the rest operator this way!
Conclusion
In this article, we have talked about essential features of ES6 you need to know as a developer. We started with the Arrow function, then we moved to template literals, array and object destructuring, and other related concepts. If you’ve reached this section, then you should be able to implement the following topics we talked about in your next project.
See you at the top!
References
MDN web docs
w3Schools
