Overview of ECMAScript 6, the next version of JavaScript

To begin with, an educational program and a few facts:

• ECMAScript is the official standard of the JavaScript language (The JavaScript word could not be used because the word Java was a trademark of Sun) Ie. JavaScript is an implementation of the ECMAScript standard.
• TC39 is a committee that develops the ECMAScript standard and makes decisions on incorporating features into it.
• ECMAScript standards a lot. The most popular of them is ECMA-262.
• ECMAScript 5 is the latest revision of ECMA-262 (approved in 2009).
• Previous versions of the ECMA-262 standard were (I don’t mention the old ones):
  
  • ECMAScript 3 - supported by most browsers (approved in 1999).
  • ECMAScript 4 - not adopted due to too radical changes in the standard. Later in July 2008, in a trimmed version (but still much richer than ECMAScript 3), it turned into a new ECMAScript Harmony project.
  
  
• ECMAScript 6 (codename ECMAScript.next) must be established by the end of 2013 .

So, what awaits us in the new version of JavaScript?


')

Block scope

JavaScript . , , c var, ( ):

function f(a) {
   if (a < 0) {
      var i = 3;
   }

  console.log(i); // 3
}

f(-1)

let, :

function f(a) {
   if (a < 0) {
      let i = 3;
   }

   console.log(i); // ReferenceError: i is not defined
}

f(-1)

:

function setLevel(newLevel = 0) {
   ...
}

setLevel(); // newLevel = 0
setLevel(5); // newLevel = 5
setLevel(undefined); // newLevel = 0

:

function foo({ from, to = 10 }) {
   ...
}

foo({ from: 1, to: 5 });
foo({ to: 5, from: 1 });
foo({ from: 1 });

( ):

function foo(positional, { named1, named2 }) {
   ...
}

foo(123, { named1: 'abc', named2: 'def' })
foo(123, { named2: 'def', named1: 'abc' })

Destructuring assignment

ECMAScript 6 :

let { first: f, last: l } = { first: 'Jane', last: 'Doe' };
console.log(f); // 'Jane'
console.log(l); // 'Doe'

, ( ) .

refutable ( , ). .. - , :

let { first: f, last: l } = { first: 'Jane' };  // 

, , irrefutable ?:

let { first: f, last?: l } = { first: 'Jane' };  // ok
console.log(l);  // undefined

:

let { first: f, last: l = 'Unknown' } = { first: 'Jane' };  // ok
console.log(l);  // 'Unknown'

, - undefined:

let { a: x = 1 } = { a: undefined }
console.log(x);  // 1

, , irrefutable,  ? :

let { foo: f }? = anything;  //  ok

f undefined, anything undefined, null foo.

( tmp):

{ foo: foo, bar: bar } = { foo: bar, bar: foo};

:

[ foo, bar ] = [ bar, foo ];

ECMAScript 6 :

// Supertype
class Person {
   constructor(name) {
      this.name = name;
   }

   describe() {
      return "Person called " + this.name;
   }
}

// Subtype
class Employee extends Person {
   constructor(name, title) {
      super.constructor(name);
      this.title = title;
   }

   describe() {
      return super.describe() + " (" + this.title + ")";
   }
}

:

let jane = new Employee("Jane", "CTO");
jane instanceof Person; // true
jane instanceof Employee; // true
jane.describe(); // 'Person called Jane (CTO)'

:

// Supertype
function Person(name) {
   this.name = name;
}

Person.prototype.describe = function () {
   return "Person called " + this.name;
};

// Subtype
function Employee(name, title) {
   Person.call(this, name);
   this.title = title;
}

Employee.prototype = Object.create(Person.prototype);
Employee.prototype.constructor = Employee;
Employee.prototype.describe = function () {
   return Person.prototype.describe.call(this) + " (" + this.title + ")";
};

, ECMAScript 6 — .

:

class Point {
   constructor(x, y) {
      this.x = x;
      this.y = y;
   }
   
   static zero() {
      return new Point(0, 0);
   }
}

( , ECMAScript 6). . .

JavaScript - :

module Math {
   export function sum(x, y) {
      return x + y;
   }

   export var pi = 3.141593;

   //   
   function internal() {
      ...
   }
}

:

import Math.{sum, pi}; 
alert("2π = " + sum(pi, pi));

*, :

import Math.*; 
alert("2π = " + sum(pi, pi));

:

module Widgets {
   module Button { ... }
   module Alert { ... }
   module TextArea { ... }
   ...
}

import Widgets.Alert.{messageBox, confirmDialog};
...

:

module JSON = require('http://json.org/modules/json2.js'); // web
import JSON.*;

module File = require('io/File'); // file system

import require("bar.js").y; // file system

.

.

for-of

, for-in JavaScript ( ). .. , :

let arr = [ "blue", "green" ];
arr.notAnIndex = 123;
Array.prototype.protoProp = 456;

for(var x in arr) {
   console.log(x); //  blue, green, notAnIndex, protoProp
}

ECMAScript 6 for-of, :

for(var x of arr) {
   console.log(x); //   blue, green
}

, , yield, .

Arrow-

ECMAScript 6 arrow functions:

let squares = [ 1, 2, 3 ].map(x => x * x);

:

let squares = [ 1, 2, 3 ].map(function (x) { return x * x });

Arrow- . , arrow- this . ..

let jane = {
   name: "Jane",
        
   sayHello: function (friends) {
      friends.forEach(friend => { console.log(this.name + " says hello to " + friend) });
   }
}

jane.sayHello([ 'Mark', 'John' ]);

Jane says hello to Mark
Jane says hello to John

.

let jane = {
   name: "Jane",
        
   sayHello: function (friends) {
      friends.forEach(function(friend) { console.log(this.name + " says hello to " + friend) });
   }
}

:

 says hello to Mark
 says hello to John

, this function(friend) { ... }) this . , , var self = this bind:

var jane = {
   name: "Jane",
        
   sayHello: function (friends) {
      friends.forEach(function (friend) {
         console.log(this.name + " says hello to " + friend)
       }.bind(this));
   }
}

.. arrow functions — :

(x, y) => x + y + this.z

:

function (x, y) { return x + y + this.z }.bind(this)

arrow- :

• arrow- (new (() => {}) )
• Arrow- arguments ( )

arrow- . , , typeof instanceof:

typeof () => {}; // 'function'
() => {} instanceof Function; // true

, ECMAScript 6. , - , , . , , , — . , TC39. (2013) .

Axel' Rauschmayer'a, CodeFest .

PS. 2GIS !