Hasan Zohdy

Posted on Nov 16, 2022 • Updated on Nov 18, 2022

ES6++: 1-Introduction

#javascript #es6 #esnext

Introduction

This series of articles will cover all features of javascript ES6 and above, we will start from es6 features and go all the way to the latest features of javascript.

What is ECMAScript?

ECMAScript is a scripting language specification standardized by Ecma International in ECMA-262 and ISO/IEC 16262. It was created to standardize JavaScript, so as to foster multiple independent implementations. JavaScript has remained the best-known implementation of ECMAScript since the standard was first published, with other well-known implementations including JScript and ActionScript.

So ES stands for ECMAScript and the number after it is the version of the ECMAScript standard.

About versions

Before we getting started i want to say something about versions, i really suffered from getting know the features of each version, as there are conflicts in many websites about features of each version, i really don't know why and i can't find an official source for that, so i will try to make it clear here.

If you see any conflict in this article please let me know in the comments.

What is ES6?

ES6 is the 6th version of ECMAScript, it was released in 2015 and it is the first version of ECMAScript that is widely supported by all browsers and nodejs.

You can say that ES6 is the real next generation of Javascript since it was invented in 1995.

ES6 Features

Here are the main features of ES6:

let and const keywords
Arrow functions
Classes
Modules
Template literals
Destructuring
Default parameters
Rest parameters
Spread operator
Object literal enhancements
Array enhancements
Map and Set
Promises
Generators
Symbols
Iterators and for...of loop
Meta Programming
- Proxies
- Reflect
Binary and Octal literals
Unicode string and RegExp literals
New methods
Typed Arrays

We'll cover each point in a separate article so you can get a better understanding of each feature, and we'll cover it with plenty of examples as well.

ES7 Version

ES7 was released in 2016 and it added a few new features to ES6, let's see what they are:

ES7 Features

Here are the main features of ES7:

Array.prototype.includes()
Exponentiation operator

ES8 Version

ES8 was released in 2017 and it added a few new features to ES7, let's see what they are:

ES8 Features

Here are the main features of ES8:

Async functions
Object.values()
Object.entries()
Trailing commas in function parameter lists and calls
String.prototype.padStart()
String.prototype.padEnd()
Shared memory and atomics
Object.getOwnPropertyDescriptors()

ES9 Version

ES9 was released in 2018 and it added a few new features to ES8, let's see what they are:

ES9 Features

Here are the main features of ES9:

Rest/Spread Properties
Promise.prototype.finally()
Asynchronous Iteration
Regexp Lookbehind Assertions
Regexp Unicode Property Escapes
Lifting Template Literal Restriction
Symbol.prototype.description

ES10 Version

ES10 was released in 2019 and it added a few new features to ES9, let's see what they are:

ES10 Features

Here are the main features of ES10:

Object.fromEntries()
String.prototype.trimStart()
String.prototype.trimEnd()
Array.prototype.flat()
Array.prototype.flatMap()
Optional Catch Binding
Function.prototype.toString()
Array.prototype.sort() stability

ES11 Version

ES11 was released in 2020 and it added a few new features to ES10, let's see what they are:

ES11 Features

Here are the main features of ES11:

Optional Chaining
Nullish Coalescing
BigInt
Dynamic Import()
Promise.allSettled()
globalThis
String.prototype.matchAll()
Module namespace exports
import.meta

ES12 Version

ES12 was released in 2021 and it added a few new features to ES11, let's see what they are:

ES12 Features

Here are the main features of ES12:

Class fields
Private methods and accessors
Static class fields and private static methods
Top-level await
Promise.any()
AggregateError
WeakRefs
String.prototype.replaceAll()
Numeric separators
Logical assignment operators
FinalizationRegistry

ESNext

You might read that term in some compiler/transpiler the ESNext version, ESNext is the next version of ECMAScript that will be released in the future, it is not released yet but we can already use some of its features in our code.

What's next

What we'll do in our next articles, that we'll explain the features grouped by the feature category itself not version as versions really doesn't matter in this case, for example when we talk about Promises we'll cover all versions of Promises not just ES6 version.

☕♨️ Buy me a Coffee ♨️☕

If you like my articles and work, you can buy me a coffee, it will help me to keep going and keep creating more content.

😍 Join our community

Join our community on Discord to get help and support (Node Js 2023 Channel).

📚 Bonus Content 📚

You may have a look at these articles, it will definitely boost your knowledge and productivity.

General Topics

Packages & Libraries

React Js Packages

useFetcher: easiest way to fetch data in React Js

Courses (Articles)

DEV Community