DEV Community

Gloria Tejuosho
Gloria Tejuosho

Posted on • Updated on • Originally published at Medium

Essential ES6 JavaScript Features Every JavaScript Developer Should Know

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, arrow function, 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:
*

  1. Arrow function
  2. Template literals
  3. Object
  4. Array destructuring
  5. Set
  6. Spread operator
  7. 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:

Image description

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:

Image description

Arrow function:

Image description

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:

Image description

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:

Image description

But Array destructuring offers a straightforward approach to accessing values, requiring only a few simple steps.

Image description

-> 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:

Image description

With object destructuring, accessing them becomes easier using the following method:

Image description

-> 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:

Image description

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.

Image description

Example 2: We can use the spread operator in an array too:

Image description

-> 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:

Image description

Note!
You can't place the rest operator at the beginning like this:

Image description

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

Top comments (15)

Collapse
 
miketalbot profile image
Mike Talbot ⭐

Pictures of code are not accessible to users that require assistive technology, it's much better to embed code directly in the post using the markup tags to syntax highlight it.

Collapse
 
gloriasilver profile image
Gloria Tejuosho

Alright, I'll take note.
Thanks for the feedback.

Collapse
 
efpage profile image
Eckehard • Edited

If you are unsure about the post editor, you will find a great explanation here. Code examples are introduced using three backticks followed by a language identifier, in this case JS or Javascript.

Collapse
 
tony_m_26104982fd5177227d profile image
Tony M

@gloriasilver I wouldn't bother. So few programmers use assistive technology that it's not worth the effort. They can always do the reverse image thing.

Collapse
 
jonrandy profile image
Info Comment hidden by post author - thread only accessible via permalink
Jon Randy 🎖️ • Edited

The array methods map, reduce, and filter were introduced in ES5.

Collapse
 
gloriasilver profile image
Gloria Tejuosho

Nope.
Array methods like map, reduce, and Filter were introduced in Es6.
Check for confirmation.

Collapse
 
jonrandy profile image
Thread Thread
 
gloriasilver profile image
Gloria Tejuosho

Alright.
I have checked.
Thank you for the clarification.🤙
I'll adjust the post.

Collapse
 
citronbrick profile image
CitronBrick

They even work in Internet Explorer 9.

Collapse
 
skitzdev profile image
Justin Praßl

"Notice the two methods perform the same function, but the arrow function provides a simpler way of declaring the function"
Important to mention is, that Arrow Functions doesnt have their own context. So when you do something like:

function fn() {
  console.log('parent', this)

  function x() {
    console.log(this)
  }

  const y = () => {
    console.log(this)
  }

  console.log(x(), y())
}
Enter fullscreen mode Exit fullscreen mode

the console log of y will point at the this of the parent but x would have its own context

Collapse
 
zalithka profile image
Andre Greeff

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.

please be super careful with this one... spreading an array only creates a shallow copy, so presenting this as a way to "quickly copy them" is misleading and downright dangerous, especially to people who are still learning JS.

usually, I recommend that people only use the spread operator for changing data structures on-the-fly while passing arguments to a function, never for trying to make copies of existing data structures. in my mind, this is nothing but a fast track to impure functions that could create runtime issues that are ridiculously difficult to locate later on.. unit tests don't always help catch this either, especially since most unit tests will not have an environment that persists between runs.

the MDN docs do a very good job of explaining this behaviour, definitely worth taking the time to read. I'll include their sample code snippet here for easier reference:

const a = [[1], [2], [3]];
const b = [...a];

b.shift().shift();
// 1

// Oh no! Now array 'a' is affected as well:
console.log(a);
// [[], [2], [3]]
Enter fullscreen mode Exit fullscreen mode
Collapse
 
suzukistumpy profile image
Info Comment hidden by post author - thread only accessible via permalink
Mark Edwards • Edited

You're missing some pretty fundamental differences with arrow functions over traditional functions that, I feel, your article would have benefitted enormously from including. Namely (and this from the first paragraph of the MDN article on arrow functions):

  • Arrow functions don't have their own bindings to this, arguments, or super, and should not be used as methods.
  • Arrow functions cannot be used as constructors. Calling them with new throws a TypeError. They also don't have access to the new.target keyword.
  • Arrow functions cannot use yield within their body and cannot be created as generator functions.

To my mind, the first bullet there is the most important to bear in mind since misunderstanding this binding is often a cause of unpredictable code.

Collapse
 
noman318 profile image
Shaikh Mohd Noman

The difference between the normal traditional function and the arrow could have been provided by a more precise example like the case of "this" in the normal function and arrow function.
BTW the blog is very helpful.

Collapse
 
xavierdev23 profile image
Xavierdev23

super on fire, this aricle

Collapse
 
citronbrick profile image
CitronBrick

ES6 (ES2015) came out in 2015. Currently we are using ES14 (ES 2023).
Nevertheless, an useful article as I've heard of colleges that hadn't updated their curriculum.

Some comments have been hidden by the post's author - find out more