Learn About ES6 in JavaScript

This guide covers learn about es6 in JavaScript with practical context and easy-to-follow details. Use it to understand the subject and apply the information confidently.

ECMAScript, or ES6, was published in June 2015. It was later renamed to ECMAScript 2015. Full web browser support for the language is still incomplete, although support for the main sections was conducted. The main web browsers support a number of ES6 features. However, software called converters can be used to convert ES6 code into ES5, because ES5 is better supported on most browsers.

Now, let's look at some of the big changes that ES6 brings to JavaScript.

To finish, the concept of constants has been included in JavaScript! Constants are values that can only be specified once (in each range explained below). Two values for a constant in the same range will produce an error.

 const JOE = 4.0 
 JOE = 3.5 
 // results in: Uncaught TypeError: Assignment to constant variable.

You can use constants anywhere you use a variable (var).

 console.log ("Value is:" + joe * 2) 
 // prints: 8

With ES6, declared variables use Let (and the constants described above), follow the block range rules like in Java, C ++, etc.

Variables keep the value until the end of the block. Then, the value in the external block (if any) is restored.

 { 
 let x = "hello"; 
 { 
 let x = "world"; 
 console.log ("inner block, x =" + x); 
 } 
 console.log ("outer block, x =" + x); 
 } 
 // prints 
 inner block, x = world 
 outer block, x = hello

You can also redefine constants in such blocks.

 { 
 let x = "hello"; 
 { 
 const x = 4.0; 
 console.log ("inner block, x =" + x); 
 try { 
 x = 3.5 
 } catch (err) { 
 console.error ("inner block:" + err); 
 } 
 } 
 x = "world"; 
 console.log ("outer block, x =" + x); 
 } 
 // prints 
 inner block, x = 4 
 inner block: TypeError: Assignment ?? k�ch c? constant. 
 outer block, x = world

ES6 offers a new syntax for defining functions using an arrow. In the following example, x Is a function that accepts a parameter called a And returns its value:

 var x = a => a + 1; 
 x (4) // returns 5

Using this syntax, you can easily define and pass arguments in functions. Please use ForEach ():

 [1, 2, 3, 4] .forEach (a => console.log (a + "=>" + a * a)) 
 // prints 
 1 => 1 
 2 => 4 
 3 => 9 
 4 => 16

Define functions that accept multiple arguments by placing them in parentheses:

 [22, 98, 3, 44, 67] .sort ((a, b) => a - b) 
 // returns 
 [3, 22, 44, 67, 98]

Function parameters can be declared with default values. In the following example, x Is a function that has two parameters a And b . The second parameter - b Is assigned a default value of 1 .

 var x = (a, b = 1) => a * b 
 x (2) 
 // returns 2 
 x (2, 2) 
 // returns 4

Unlike other languages such as C ++ or Python, parameters with default values may appear before parameters without default values. Note that this function is defined as a block with Return Value as follows:

 var x = (a = 2, b) => {return a * b}

However, the argument is combined from left to right. After being first called as the example below, b Has an unknown value, although it has been declared with a default value. The passed argument will match a Instead of b . The function returns NaN.

 x (2) 
 // returns NaN 
 x (1, 3) 
 // returns 3

When you convert Undefined As an argument, the default value is used if available.

 x (undefined, 3) 
 // returns 6

When calling a function, sometimes there is a need to pass, to pass an arbitrary number of arguments and handle these arguments in the function. This need is handled by the remaining function parameters. This is the way to capture the rest of the arguments, followed by other arguments defined using the syntax shown below. These arguments are recorded in an array.

 var x = function (a, b, . args) {console.log ("a =" + a + ", b =" + b + "," + args.length + "args left"); } } 
 x (2, 3) 
 // prints 
 a = 2, b = 3, 0 args left 
 x (2, 3, 4, 5) 
 // prints 
 a = 2, b = 3, 2 args left

 var name = "joe"; 
 var x = `hello $ {name}` 
 // returns "hello joe"

Of course, you can use an arbitrary expression to evaluate.

 // define an arrow function 
 var f = a => a * 4 

 // ??t m?t gi� tr? tham s? 
 var v = 5 

 // v� x? l� c�c function trong m?u chu?i 
 var x = `hello $ {f (v)}` 
 // returns "hello 20"

The syntax for defining this string can also be used to identify multiple lines.

 var x = `hello world 
 next line` 
 // returns 
 hello world 
 next line

ES6 provides a simple object creation syntax. See the example below:

 var x = "hello world", y = 25 
 var a = {x, y} 
 // is equivalent to the ES5: 
 {x: x, y: y}

Attribute names Computed Quite conveniently. For ES5 and earlier versions, to set the object attribute to a computed name, you must do this:

 var x = "hello world", y = 25 
 var a = {x: x, y: y} 
 a ["joe" + y] = 4 
 // a is now: 
 {x: "hello world", y: 25, joe25: 4}

Now you can do it all in a single determination step:

 var a = {x, y, ["joe" + y]: 4} 
 // returns 
 {x: "hello world", y: 25, joe25: 4}

And of course, to define methods, you can only specify it by name:

 var a = {x, y, ["joe" + y]: 4, foo (v) {return v + 4}} 
 a.foo (2) 
 // returns 
 6

And finally, JavaScript provides a formal class definition syntax. While it is merely a syntax created from classes based on the existing prototype, it serves to enhance code clarity. That means it doesn't add a new object or anything like that.

 class Circle { 
 constructor (radius) { 
 this.radius = radius 
 } 
 } 
 // use it 
 var c = new Circle (4) 
 // returns: Circle {radius: 4}

Determining a method is also straightforward.

 class Circle { 
 constructor (radius) { 
 this.radius = radius 
 } 
 computeArea () {return Math.PI * this.radius * this.radius} 
 } 
 var c = new Circle (4) 
 c.computeArea () 
 // returns: 50.26548245743669

 class Circle { 
 constructor (radius) { 
 this.radius = radius 
 } 
 get area () {return Math.PI * this.radius * this.radius} 
 } 
 var c = new Circle (4) 
 // returns: Circle {radius: 4} 
 c.area 
 // returns: 50.26548245743669

Now, add a setter. To be able to define a Radius As a preset attribute, we will redefine the actual field to _radius Or something that will not conflict with the setter. If not, we will see ' Stack overflow error '.

This is the redefined class:

 class Circle { 
 constructor (radius) { 
 this._radius = radius 
 } 
 get area () {return Math.PI * this._radius * this._radius} 
 radius (r) set {this._radius = r} 
 } 
 var c = new Circle (4) 
 // returns: Circle {_radius: 4} 
 c.area 
 // returns: 50.26548245743669 
 c.radius = 6 
 c.area 
 // returns: 113.09733552923255

Overall, this is a pretty good addition to object-oriented JavaScript.

 class Ellipse { 
 constructor (width, height) { 
 this._width = width; 
 this._height = height; 
 } 
 get area () {return Math.PI * this._width * this._height; } } 
 set width (w) {this._width = w; } } 
 set height (h) {this._height = h; } } 
 } 

 class Circle extends Ellipse { 
 constructor (radius) { 
 super (radius, radius); 
 } 
 set radius (r) {super.width = r; super.height = r; super.height = r; } } 
 } 

 // create a circle 
 var c = new Circle (4) 
 // returns: Circle {_width: 4, _height: 4} 
 c.radius = 2 
 // c is now: Circle {_width: 2, _height: 2} 
 c.area 
 // returns: 12.566370614359172 
 c.radius = 5 
 c.area 
 // returns: 78.53981633974483

Above is a brief introduction to some of the features of JavaScript ES6.

Are you using ES6 in your projects? How is your experience? Please let us know in the comment section below!