Overview of ES6 at 350 points. Part one
My series of notes ES6 in Depth , consisting of 24 entries, describes most of the syntax changes and innovations in ES6. In this publication, I will summarize everything stated in previous articles in order to give an opportunity to look again at everything together. I also added links to my blog, so that if necessary, you can immediately see more details.
I heard you like bulleted lists, so here’s an article with a list of several hundred items.
To begin with, I will provide a table of contents so that it is clear what is being discussed. Obviously, the table of contents is also an unnumbered list. Please note: if you want to delve deeper into this topic, read the entire cycle of articles and independently “pick” the ES6 code.
')
Content
● Introduction
● Toolkit
● Assignment Destructing
● Spread Operator and Rest Parameters
● Arrow functions
● Pattern lines
● Object Literals
● Classes
● Let and Const
● Characters
● iterators
● Generators
● Promises
● Maps
● WeakMaps
● Sets
● WeakSets
● Proxy
● Reflection
● Number
● Math
● Array
● Object
● Strings and Unicode
● Modules
Sorry for such a long table of contents. Getting started.
Introduction
● ES6 (also known as Harmony, es-next, ES2015) is the latest and final language specification.
● The final specification of ES6 was approved in June 2015 (therefore, ES2015).
● Future versions of the language will be named according to the ES [YYYY] pattern, for example ES2016 for ES7.
o Annual release cycle, irreversible changes begin to take effect from the next release.
o Since ES6 appeared earlier than this solution, most of us still call it ES6.
o Starting with ES2016 (ES7), we must use the ES [YYYY] template to refer to newer versions.
o The main reason for using this naming pattern is to put pressure on browser manufacturers to implement the latest updates as quickly as possible.
Tools
● To use ES6 today, you need a JavaScript-to-JavaScript transpiler.
● Transporters came and will remain, because:
o they provide the ability to compile the code of the new language version into the code of the old version;
o we will transfer ES2016 and ES2017 to ES6, etc., when browser support gets better;
o we need improved source mapping;
o today it is the most reliable way to run ES6 code in production (despite the fact that browsers support ES5).
● Babel (transpiler) has a killer feature: human-readable output.
● Use babel to transfer ES6 to ES5 for static builds.
● Use babelify to embed a babel into your grunt, gulp or npm run build process.
● Use nodejs version 4.xx or higher - there is a very decent support for ES6 (thanks to v8).
● Use babel-node with any version of node.js - it will transfer modules to ES5.
● Babel has an expanding ecosystem that already supports ES2016 and some plugins.
● Read A Brief History of ES6 Tooling.
Assignment Destructuring
● var {foo} = pony is the same as var foo = pony.foo.
● var {foo: baz} = pony is the same as var baz = pony.foo
● You can set default values, var {foo = 'bar'} = baz will return foo: 'bar' if baz.foo is undefined.
● You can drag as many properties as you like, with or without pseudonyms:
o var {foo, bar: baz} = {foo: 0, bar: 1} will give foo: 0 and baz: 1.
● You can go further: var {foo: {bar}} = {foo: {bar: 'baz'}} will give bar: 'baz'.
● You can also assign an alias to this: var {foo: {bar: deep}} = {foo: {bar: 'baz'}} will give you deep: 'baz'.
● Properties that were not found still return undefined var {foo} = {}.
● Nested properties that were not found return the error var {foo: {bar}} = {}.
● This also works for arrays, [a, b] = [0, 1] returns a: 0 and b: 1.
● You can skip elements in the array, [a ,, b] = [0, 1, 2], we obtain a: 0 and b: 2.
● Variables can be swapped without resorting to the third “aux” variable, [a, b] = [b, a].
● You can also use destructuring in the function parameters:
o assignment of default values function foo (bar = 2) {};
o these values can also be function foo objects (bar = {a: 1, b: 2}) {};
o it is possible to destructurize bar completely: function foo ({a = 1, b = 2}) {};
o if nothing was transmitted, by default we get an empty array: function foo ({a = 1, b = 2} = {}) {}.
Read ES6 JavaScript Destructuring in Depth.
Spread Operator and Rest Parameters
● Rest parameters are like arguments, only better.
o method signature is declared as function foo (... everything) {};
o everything is an array with all the parameters passed to foo;
o You can give a name to several parameters before ... everything, for example: function foo (bar, ... rest) {};
o these parameters will be excluded from ... rest;
o ... rest should be the last parameter in the list.
● Spread operator is even better than magic, it is also denoted using ... syntax:
o cancels the need to apply when calling methods, fn (... [1, 2, 3]) is the same as fn (1, 2, 3);
o simplified concatenation: [1, 2, ... [3, 4, 5], 6, 7];
o allows you to cast a mass-like elements or collections into arrays [... document.querySelectorAll ('img')];
o is also useful when destructing [a ,, ... rest] = [1, 2, 3, 4, 5] returns a: 1 and rest: [3, 4, 5];
o makes new + .apply simple, new Date (... [2015, 31, 8]).
● Read ES6 Spread and Butter in Depth.
Arrow functions
● A concise way to declare the function param => returnValue.
● Useful for functional programming, [1, 2] .map (x => x * 2).
● There are several different uses (it will take some time to develop a habit):
○ p1 => expr is great if the parameter is one;
○ p1 => expr has an implicit return statement for the expr expression;
○ To implicitly return an object, you need to wrap it in parentheses () => ({foo: 'bar'}), otherwise you will get an error;
○ Parentheses are necessary when you have 0, 2 or more parameters () => expr or (p1, p2) => expr;
○ The curly brackets in the right part represent a block of code that can contain several instructions () => {};
○ when using such syntax there is no implicit return, you need to write it () => {return 'foo'}.
● You cannot statically give the arrow function a name, but performance tests are much better for most methods without a name.
● The switch functions are bound to the lexical environment:
○ this is the same this context as in the parent lexical environment;
○ this cannot be changed using .call, .apply, or similar “reflection” -type methods.
● Read ES6 Arrow Functions in Depth.
Pattern lines
● Strings can be declared using back quotes (`) in addition to single and double quotes.
● Strings with backquotes are pattern strings.
● Pattern lines can be multi-line.
● Pattern lines allow intermediate calculations to be `ponyfoo.com is $ {rating}`, where rating is a variable.
● You can use any valid js expression to evaluate, for example: `$ {2 * 3}` or `$ {foo ()}`.
● You can use labeled patterns to change the logic for calculating intermediate values:
○ add fn prefix to fn`foo, $ {bar} and $ {baz} `;
○ fn is called once with template, ... expressions;
○ template is ['foo,', 'and', ''], and expressions is [bar, baz];
○ the result fn becomes the value of the template string;
○ Possible examples of use: clearing input expressions from unnecessary data, parsing parameters, etc.
● Pattern strings are almost everywhere better than strings wrapped in single or double quotes.
● Read the ES6 Template Literals in Depth.
Object Literals
● Instead of {foo: foo}, you can simply write {foo} - the abbreviated form of the property-value pair.
● Calculated property names: {[prefix + 'Foo']: 'bar'}, where prefix: 'moz' returns {mozFoo: 'bar'}.
● It is impossible to simultaneously try to use the two previous features, the {[foo]} entry is invalid.
● Method definitions can be made more concise with the following syntax: {foo () {}}.
● See also the Object section .
● Read ES6 Object Literal Features in Depth.
Classes
● Not “traditional” classes, but syntactic sugar on top of the prototype inheritance mechanism.
● Syntax is similar to the declaration of class Foo {} objects.
● The instance methods new Foo (). Bar are declared using the simplified syntax of the class object literals Foo {bar () {}}.
● Static methods - Foo.isPonyFoo () - need the prefix, the keyword static class Foo {staticisPonyFoo () {}}.
● Class Foo {constructor () {/ * initialize instance * /} constructor method.
● Prototype inheritance with simplified syntax class PonyFoo extends Foo {}.
● Read ES6 Classes in Depth.
Let and Const
● let and const are alternatives to var when declaring variables.
● let has a block scope, rather than lexical, with respect to the parent function.
● let rises to the top of the block, while var rises to the top of the function.
● “Temporary dead zone” or simply VSW:
○ starts at the beginning of the block where let foo is declared;
○ ends at the place of the code where the let foo declaration occurs (here, “lifting” does not matter);
○ attempts to access or define foo inside the VMP (before the let foo instruction is executed) will result in an error;
○ It helps to reduce the number of mysterious bugs in which the value of a variable undergoes changes before it is announced.
● const also has a block scope, “elevation,” and follows the VLM semantics.
● Const variables must be declared using the initializer const foo = 'bar'.
● The definition of const after initialization causes a silent error (or not a quiet one - in strict mode).
● The const variables do not make the variable unchangeable:
○ const foo = {bar: 'baz'} means that foo will always refer to the object in the right side of the expression;
○ const foo = {bar: 'baz'}; foo.bar = 'boo' will not throw an exception.
● Defining a variable with the same name will throw.
● Designed to correct errors when you override a variable and lose the reference to the original object.
● In ES6, functions have a block scope:
○ prevent data leakage through the ascent mechanism {let _foo = 'secret', bar = () => _foo; };
○ Do not break user code in most situations and, as a rule, are what you need.
● Read the ES6 Let, Const and the “Temporal Dead Zone” (TDZ) in Depth.
I heard you like bulleted lists, so here’s an article with a list of several hundred items.
To begin with, I will provide a table of contents so that it is clear what is being discussed. Obviously, the table of contents is also an unnumbered list. Please note: if you want to delve deeper into this topic, read the entire cycle of articles and independently “pick” the ES6 code.
')
Content
● Introduction
● Toolkit
● Assignment Destructing
● Spread Operator and Rest Parameters
● Arrow functions
● Pattern lines
● Object Literals
● Classes
● Let and Const
● Characters
● iterators
● Generators
● Promises
● Maps
● WeakMaps
● Sets
● WeakSets
● Proxy
● Reflection
● Number
● Math
● Array
● Object
● Strings and Unicode
● Modules
Sorry for such a long table of contents. Getting started.
Introduction
● ES6 (also known as Harmony, es-next, ES2015) is the latest and final language specification.
● The final specification of ES6 was approved in June 2015 (therefore, ES2015).
● Future versions of the language will be named according to the ES [YYYY] pattern, for example ES2016 for ES7.
o Annual release cycle, irreversible changes begin to take effect from the next release.
o Since ES6 appeared earlier than this solution, most of us still call it ES6.
o Starting with ES2016 (ES7), we must use the ES [YYYY] template to refer to newer versions.
o The main reason for using this naming pattern is to put pressure on browser manufacturers to implement the latest updates as quickly as possible.
Tools
● To use ES6 today, you need a JavaScript-to-JavaScript transpiler.
● Transporters came and will remain, because:
o they provide the ability to compile the code of the new language version into the code of the old version;
o we will transfer ES2016 and ES2017 to ES6, etc., when browser support gets better;
o we need improved source mapping;
o today it is the most reliable way to run ES6 code in production (despite the fact that browsers support ES5).
● Babel (transpiler) has a killer feature: human-readable output.
● Use babel to transfer ES6 to ES5 for static builds.
● Use babelify to embed a babel into your grunt, gulp or npm run build process.
● Use nodejs version 4.xx or higher - there is a very decent support for ES6 (thanks to v8).
● Use babel-node with any version of node.js - it will transfer modules to ES5.
● Babel has an expanding ecosystem that already supports ES2016 and some plugins.
● Read A Brief History of ES6 Tooling.
Assignment Destructuring
● var {foo} = pony is the same as var foo = pony.foo.
● var {foo: baz} = pony is the same as var baz = pony.foo
● You can set default values, var {foo = 'bar'} = baz will return foo: 'bar' if baz.foo is undefined.
● You can drag as many properties as you like, with or without pseudonyms:
o var {foo, bar: baz} = {foo: 0, bar: 1} will give foo: 0 and baz: 1.
● You can go further: var {foo: {bar}} = {foo: {bar: 'baz'}} will give bar: 'baz'.
● You can also assign an alias to this: var {foo: {bar: deep}} = {foo: {bar: 'baz'}} will give you deep: 'baz'.
● Properties that were not found still return undefined var {foo} = {}.
● Nested properties that were not found return the error var {foo: {bar}} = {}.
● This also works for arrays, [a, b] = [0, 1] returns a: 0 and b: 1.
● You can skip elements in the array, [a ,, b] = [0, 1, 2], we obtain a: 0 and b: 2.
● Variables can be swapped without resorting to the third “aux” variable, [a, b] = [b, a].
● You can also use destructuring in the function parameters:
o assignment of default values function foo (bar = 2) {};
o these values can also be function foo objects (bar = {a: 1, b: 2}) {};
o it is possible to destructurize bar completely: function foo ({a = 1, b = 2}) {};
o if nothing was transmitted, by default we get an empty array: function foo ({a = 1, b = 2} = {}) {}.
Read ES6 JavaScript Destructuring in Depth.
Spread Operator and Rest Parameters
● Rest parameters are like arguments, only better.
o method signature is declared as function foo (... everything) {};
o everything is an array with all the parameters passed to foo;
o You can give a name to several parameters before ... everything, for example: function foo (bar, ... rest) {};
o these parameters will be excluded from ... rest;
o ... rest should be the last parameter in the list.
● Spread operator is even better than magic, it is also denoted using ... syntax:
o cancels the need to apply when calling methods, fn (... [1, 2, 3]) is the same as fn (1, 2, 3);
o simplified concatenation: [1, 2, ... [3, 4, 5], 6, 7];
o allows you to cast a mass-like elements or collections into arrays [... document.querySelectorAll ('img')];
o is also useful when destructing [a ,, ... rest] = [1, 2, 3, 4, 5] returns a: 1 and rest: [3, 4, 5];
o makes new + .apply simple, new Date (... [2015, 31, 8]).
● Read ES6 Spread and Butter in Depth.
Arrow functions
● A concise way to declare the function param => returnValue.
● Useful for functional programming, [1, 2] .map (x => x * 2).
● There are several different uses (it will take some time to develop a habit):
○ p1 => expr is great if the parameter is one;
○ p1 => expr has an implicit return statement for the expr expression;
○ To implicitly return an object, you need to wrap it in parentheses () => ({foo: 'bar'}), otherwise you will get an error;
○ Parentheses are necessary when you have 0, 2 or more parameters () => expr or (p1, p2) => expr;
○ The curly brackets in the right part represent a block of code that can contain several instructions () => {};
○ when using such syntax there is no implicit return, you need to write it () => {return 'foo'}.
● You cannot statically give the arrow function a name, but performance tests are much better for most methods without a name.
● The switch functions are bound to the lexical environment:
○ this is the same this context as in the parent lexical environment;
○ this cannot be changed using .call, .apply, or similar “reflection” -type methods.
● Read ES6 Arrow Functions in Depth.
Pattern lines
● Strings can be declared using back quotes (`) in addition to single and double quotes.
● Strings with backquotes are pattern strings.
● Pattern lines can be multi-line.
● Pattern lines allow intermediate calculations to be `ponyfoo.com is $ {rating}`, where rating is a variable.
● You can use any valid js expression to evaluate, for example: `$ {2 * 3}` or `$ {foo ()}`.
● You can use labeled patterns to change the logic for calculating intermediate values:
○ add fn prefix to fn`foo, $ {bar} and $ {baz} `;
○ fn is called once with template, ... expressions;
○ template is ['foo,', 'and', ''], and expressions is [bar, baz];
○ the result fn becomes the value of the template string;
○ Possible examples of use: clearing input expressions from unnecessary data, parsing parameters, etc.
● Pattern strings are almost everywhere better than strings wrapped in single or double quotes.
● Read the ES6 Template Literals in Depth.
Object Literals
● Instead of {foo: foo}, you can simply write {foo} - the abbreviated form of the property-value pair.
● Calculated property names: {[prefix + 'Foo']: 'bar'}, where prefix: 'moz' returns {mozFoo: 'bar'}.
● It is impossible to simultaneously try to use the two previous features, the {[foo]} entry is invalid.
● Method definitions can be made more concise with the following syntax: {foo () {}}.
● See also the Object section .
● Read ES6 Object Literal Features in Depth.
Classes
● Not “traditional” classes, but syntactic sugar on top of the prototype inheritance mechanism.
● Syntax is similar to the declaration of class Foo {} objects.
● The instance methods new Foo (). Bar are declared using the simplified syntax of the class object literals Foo {bar () {}}.
● Static methods - Foo.isPonyFoo () - need the prefix, the keyword static class Foo {staticisPonyFoo () {}}.
● Class Foo {constructor () {/ * initialize instance * /} constructor method.
● Prototype inheritance with simplified syntax class PonyFoo extends Foo {}.
● Read ES6 Classes in Depth.
Let and Const
● let and const are alternatives to var when declaring variables.
● let has a block scope, rather than lexical, with respect to the parent function.
● let rises to the top of the block, while var rises to the top of the function.
● “Temporary dead zone” or simply VSW:
○ starts at the beginning of the block where let foo is declared;
○ ends at the place of the code where the let foo declaration occurs (here, “lifting” does not matter);
○ attempts to access or define foo inside the VMP (before the let foo instruction is executed) will result in an error;
○ It helps to reduce the number of mysterious bugs in which the value of a variable undergoes changes before it is announced.
● const also has a block scope, “elevation,” and follows the VLM semantics.
● Const variables must be declared using the initializer const foo = 'bar'.
● The definition of const after initialization causes a silent error (or not a quiet one - in strict mode).
● The const variables do not make the variable unchangeable:
○ const foo = {bar: 'baz'} means that foo will always refer to the object in the right side of the expression;
○ const foo = {bar: 'baz'}; foo.bar = 'boo' will not throw an exception.
● Defining a variable with the same name will throw.
● Designed to correct errors when you override a variable and lose the reference to the original object.
● In ES6, functions have a block scope:
○ prevent data leakage through the ascent mechanism {let _foo = 'secret', bar = () => _foo; };
○ Do not break user code in most situations and, as a rule, are what you need.
● Read the ES6 Let, Const and the “Temporal Dead Zone” (TDZ) in Depth.
Source: https://habr.com/ru/post/270353/
All Articles