First, it is necessary to familiarize yourself with the concept of ECMA to better understand the ES6 script. EcmaScript is not a new language and is just a standard set for the JavaScript programming language.
ECMA is an international organization that defines the standards of computer systems and communication systems. This organization started its work in Europe in 1961 and is in charge of defining standards, and since 1994 it has been known by its current title, ECMA.
If you pay attention, different browsers each have their engine that analyzes and executes JavaScript codes. If there is no single standard for identifying the JavaScript language, each engine executes JavaScript codes in its way, in which case a disaster occurs.
JavaScript is developed based on the ECMA-262 standard, and companies support JavaScript language through this standard from different browsers.
Oracle has trademarked JavaScript, so the actual standard that modern JavaScript implements is called the ECMAScript standard, or ES for short. The initial JavaScript standard was called ECMAScript 5 or ES5, which was released in 2009. It was pure JavaScript without any extra functionality which is supported everywhere even in IE9.
ES6 is a relatively new standard, released in 2015, and it supports many new features. The standard is technically called ES2015, and each subsequent annual version is also identified by the year of release. But in any case, most people call it ES6, and that’s why we use the same title.
ES6 is particularly important because it marks the beginning of JavaScript standardization. Today, ECMA presents a new edition every year. But ES6 was released six years ago and after ES5, which was 10 years after ES3, and thus is considered an important milestone in this direction.
Table of Contents
How to use ES6 structure?
ES6 has practically been supported in many places and the only major problem is in Internet Explorer. So although you can start writing ES6 style, you can’t be sure that it will behave the same way on everyone’s browser.
Today, ES6 is typically compiled to the ES5 framework using a tool like Babel. Babel is a compiler that converts the development code (the code written in ES6 with all its features) into the code that runs on the production site, and in most cases, it is bundled and minified with the help of webpack.
The way it works is that you have some js files in your development environment. You write you are free to use any nice ES6 framework you like. But instead of running this code directly, you configure Webpack to load JS files with Babel. In most cases, you need to run webpack-dev-server so that this conversion is done automatically when you make changes.
New features of ES6
- let in JavaScript
- const in JavaScript
- Reflection (**)
- default values
- find()
- ()Array.findIndex
Safari 10 and Edge 14 are the first browsers to fully support ES6.
Let in JavaScript
The let command allows you to define a block scope variable.
const in JavaScript
The const directive allows you to declare a constant (a JavaScript variable with a fixed value). Constants are similar to variables, except that the value of constants cannot be changed.
Exponentiation operator
The exponentiation operator (**) raises the first operator to the size of the second operator.
Default parameter values
ES6 allows function parameters to have default values.
()Array. find
The find() method returns the value of the first array element that a test function puts.
() Array.findIndex
The findIndex() method returns the index of the first array element that passes a test.
New numerical properties
ES6 has added the following properties for the number object:
- EPSILON
- MIN_SAFE_INTEGER
- MAX_SAFE_INTEGER
New numerical methods
ES6 adds two new methods to the numeric object:
- ()Number.isInteger
- isSafeInteger()
- isInteger() method
Number.isInteger() method
If the argument is an integer, true is returned.
Number.isSafeInteger() method
A safe integer is an integer that represents double precision. If the argument is a safe integer, the Number.isSafeInteger() method returns true. Safe integers are all integers from – (1 – 253) to + (1 – 253). This is safe: 9007199254740991. This is not safe: 9007199254740992.
New public methods
ES6 also introduced two new public methods:
- () isFinite
- isNan
isFinite() method
If the argument is NaN or infinity, this method will return false and otherwise, the result will be true:
isNaN() method
If the argument is NaN then this method returns true, otherwise false.
Arrow functions
Arrow functions allow a short syntax for writing function statements. You don’t need function keywords, return keywords, and curly brackets. Arrow functions do not have this functionality. They are not suitable for defining object methods. Arrow functions are not incremented. They must be defined before they can be used. Using const is safer than using var because a function expression is always a constant value. You can only remove return words and curly brackets if the function is a single statement. For this reason, it may be a good habit to always keep them.