SlideShare a Scribd company logo
1 of 58
Download to read offline
@falsyvalues



ECMAScript > Future

    Dmitry A. Soshnikov
http://dmitrysoshnikov.com
Future > ES6
let : block scope
Block scope
// ES3


if (false) {
   var logLevel = 10;
}

alert(logLevel); // ?
Block scope
// ES3
var logLevel; // = undefined;
                                                 All variables are
if (false) {                                      created before
                                               code execution – on
   logLevel = 10;                              entering the context.

}                                              A so-called “hoisting”
                                                    of variables.
alert(logLevel); // undefined
See: http://dmitrysoshnikov.com/notes/note-4-two-words-about-hoisting/
Block scope
// ES6 Harmony


if (false) {
   let logLevel = 10;
}

alert(logLevel); // ReferenceError
Block scope
// ES3, ES5


var handlers = [];              handlers[0](); // ?
                                handlers[1](); // ?
for (var k = 0; k < 3; k++) {   handlers[2](); // ?
  handlers[k] = function () {
     alert(k);
  };
}
Block scope
// ES3, ES5


var handlers = [];              handlers[0](); // 3
var k;                          handlers[1](); // 3
for (k = 0; k < 3; k++) {       handlers[2](); // 3
  handlers[k] = function () {
     alert(k);
  };
}
let : block scope
ES3, ES5                           ES6
for (var k = 0; k < 3; k++) {       for (let k = 0; k < 3; k++) {
                                      let x = k;
  (function (x) {
                                      handlers[x] = function () {
     handlers[x] = function () {
                                         alert(x);
        alert(x);
                                      };
     };                             }
  })(k);
}

handlers[0](); // 0                handlers[0](); // 0
let : definition, statement, expression
let x = 10;                            // let-definition
let y = 20;

let (x = x * 2, y = 30) {
   console.log(x + y); // 50           // let-statement

}

console.log(x + y); // 30

console.log(let (x = 100) x); // 100   // let-expression

console.log(x); // 10
const : constants
const : constants

const MAX_SIZE = 100;

// cannot be redeclared (let, var, etc.)
let MAX_SIZE = 100; // error
const : constant functions

const registerUser() {
  // implementation
}

// redeclaration error (function, let, var)
function registerUser() { ... }
Function parameter
  default values
Function parameter
            default values
function handleRequest(data, method) {
  method = method || “GET”;
  ...
}
Function parameter
            default values
function handleRequest(data, method) {
  method = method || “GET”;
  ...
}
function handleRequest(data, method = “GET”) {
  ...
}
Destructuring
or “non-strict pattern-matching”
Destructuring: arrays

// for arrays
let [x, y] = [10, 20, 30]; // non-strict matching

console.log(x, y); // 10, 20
Destructuring: objects

// for objects
let user = {name: “Ann”, location: {x: 10, y: 20}};

let {name: n, location: {x: x, y: y}} = user;

console.log(n, x, y); // “Ann”, 10, 20
Destructuring of
           function parameters

function Panel(config) {
  var title = config.title;
  var x = config.pos[0];        Too “noisy”
  var y = config.pos[1];
  return title + x + y;
}
new Panel({title: “Users”, pos: [10, 15]});
Destructuring of
            function parameters

function Panel({title: title, pos: [x, y]}) {
  return title + x + y;
}

let config = {title: “Users”, pos: [10, 15]};

new Panel(config);
Destructuring:
           exchange of variables

// exchange two variables without third?

let x = 10;
let y = 20;

[x, y] = [y, x]; // easy
Replacement of arguments:
   ”rest” and ”spread”
Object arguments
// ES3, ES5

function format(pattern /*, rest */) {
  var rest = [].slice.call(arguments, 1);
  var items = rest.filter(function (x) { return x > 1});
  return pattern.replace(“%v”, items);
}

format(“scores: %v”, 1, 5, 3); // scores: 5, 3
Good bye, arguments
// ES3, ES5

function format(pattern /*, rest */) {
  var rest = [].slice.call(arguments, 1); // complicated
  var items = rest.filter(function (x) { return x > 1});
  return pattern.replace(“%v”, items);
}

format(“scores: %v”, 1, 5, 3); // scores: 5, 3
Hello, ”rest”
// ES6 aka Harmony

function format(pattern, …rest) { // real array
  var items = rest.filter(function (x) { return x > 1});
  return pattern.replace(“%v”, items);
}

format(“scores: %v”, 1, 5, 3); // scores: 5, 3
And also ”spread”
// ES6 aka Harmony

function showUser(name, age, weight) {
  return name + “:” + age + weight;
}

let user = [“Alex”, 28, 130];

showUser(…user); // ok
showUser.apply(null, user); // desugared
”rest” of arrays with destructuring
// ES6 aka Harmony

let userInfo = [“John”, 14, 21, 3];
let [name, ...scores] = userInfo;

console.log(name); // “John”
console.log(scores); // [14, 21, 3]
Short notations
Short notation in
                 destructuring
let 3DPoint = {x: 20, y: 15, z: 1};

// full notation
let {x: x, y: y, z: z} = 3DPoint;

// short notation
let {x, y, z} = 3DPoint;
Short syntax of functions.
                -> functions
// casual functions
[1, 2, 3].map(function (x) { return x * x; }); // [1, 4, 9]

// -> functions
[1, 2, 3].map((x) -> x * x); // [1, 4, 9]

Syntactically:
  • optional return;
  • -> instead of function
  • No curly braces are required
-> functions: examples
// Empty arrow function is minimal-length
let empty = ->;

// Expression bodies needs no parentheses or braces
let square= (x) -> x * x;

// Without parameters
let getUser = -> users[current];

// Statement body needs braces
let users = [{name: “Mark”, age: 28}, {name: “Sarah”, age: 26}];
users.forEach((user, k) -> { if (k > 2) console.log(user.name, k) });
simple functions: dynamic this

function Account(customer, cart) {
  this.customer = customer;
  this.cart = cart;
  $(‘#shopping-cart').on('click', function (event) {
      this.customer.purchase(this.cart); // error on click
  });
}                                    Solutions:
                                    var that = this;
                                      .bind(this)
=> functions: lexical this

function Account(customer, cart) {
  this.customer = customer;
  this.cart = cart;
  $(‘#shopping-cart').on('click', (event) =>
     this.customer.purchase(this.cart); // ok
  );
}
But... Currently block
functions are on agenda!
Short syntax of functions.
              Block-functions
// casual functions
[1, 2, 3].map(function (x) { return x * x; }); // [1, 4, 9]

// block-functions, Ruby’s way
[1, 2, 3].map {|x| x * x} // [1, 4, 9]

Syntactically:
  • optional return;
  • |x| instead of function
  • No call parens
Proxy objects : meta level
Proxy-objects
/* handler –meta-level handler
 * proto – prototype of the proxy object */
Proxy.create(handler, [proto])

/* handler – meta-handler
 * call – call trap
 * construct – construction trap */
Proxy.createFunction(handler, [call, [construct]])

See: http://wiki.ecmascript.org/doku.php?id=harmony:proxies
Proxy-objects
 // original object       // proxied object
 let point = {            let loggedPoint = Proxy.create({
    x: 10,                   get: function (rcvr, name) {
    y: 20                       console.log(“get: ”, name);
 };                             return point[name];
                             },
                             set: function (rcvr, name, value) {
Trap of getting of              console.log(“set: ”, name, value);
   properties
                                point[name] = value;
                             }
Trap of setting the       }, Object.getPrototypeOf(point));
    properties
Proxy-objects
                                    // proxied object
    Meta-handler                    let loggedPoint = Proxy.create({
                                       get: function (rcvr, name) {
// reading trap                           console.log(“get: ”, name);
loggedPoint.x; // get: x, 10              return point[name];
                                       },
// writing trap                        set: function (rcvr, name, value) {
loggedPoint.x = 20; // set: x, 20         console.log(“set: ”, name, value);
                                          point[name] = value;
// reflected on the original object    }
point.x; // 20                      }, Object.getPrototypeOf(point));
Callable Proxy-objects
// original object            // proxied object
let point = {x: 10, y: 20};   let loggedPoint = Proxy.createFunction({
                                 get: function (rcvr, name) {
function callTrap() {               console.log(“get: ”, name);
  console.log(“call”);              return foo[name];
}                                },
                                 set: function (rcvr, name, value) {
function constructTrap() {
                                    console.log(“set: ”, name, value);
  console.log(“construct”);
                                    foo[name] = value;
}
                                 }
                              }, callTrap, constructTrap);
loggedPoint(10, 20);
new loggedPoint(100);
                                                         Catching of
                                 Catching of calling
                                                        construction
Proxy : simple generic read logger
function logged(object) {
  return Proxy.create({
     get: function (rcvr, name) {
       console.log(“get:”, name);
       return object[name];
     }
  }, Object.getPrototypeOf(object));
}

let connector = logged({
    join: function (node) { ... }
});

connector.join(“store@master-node”); // get: join
Proxy : examples
// loggers (on reading and writing)
Proxy.create(logHandler(object));

// multiple inheritance (delegation-based mixins)
Proxy.create(mixin(obj1, obj2));

// noSuchMethod
Proxy.create(object, noSuchMethod)

// Arrays with negative indices (as in Python)
let a = Array.new([1, 2, 3]);
console.log(a[-1]); // 3
a[-1] = 10; console.log(a); // [1, 2, 10]

See: https://github.com/DmitrySoshnikov/es-laboratory/tree/master/examples
Modules system
Modules in ES3, ES5
var DBLayer = (function (global) {
   /* save original */
   var originalDBLayer = global.DBLayer;
   function noConflict() {
      global.DBLayer = originalDBLayer;    1.   Create local scope
   }                                       2.   Restoring function
   /* implementation */                    3.   Implementation
                                           4.   Public API
   function query() { ... }
   /* exports, public API */
   return {
      noConflict: noConflict,
      query: query
   };
})(this);
Modules in ES3, ES5
var DBLayer = (function (global) {
   /* save original */
   var originalDBLayer = global.DBLayer;
   function noConflict() {
      global.DBLayer = originalDBLayer;    1.    Create local scope
   }                                       2.    Restoring function
   /* implementation */                    3.    Implementation
                                           4.    Public API
   function query() { ... }
   /* exports, public API */
                                                Too much of “noise”.
   return {                                     A “sugar” is needed.
      noConflict: noConflict,
      query: query
   };
})(this);
Modules in ES6
module DBLayer {
  export function query(s) { ... }
  export function connection(...args) { ... }
}

import DBLayer.*; // import all

import DBLayer.{query, connection: attachTo}; // import only needed exports

query(“SELECT * FROM books”).format(“escape | split”);

attachTo(“/books/store”, {
   onSuccess: function (response) { ... }
})
External modules in ES6
// on file system
module $ = require(“./library/selector.js”);

// globally, from the Net, we define the name of the module
module CanvasLib = require(“http:// ... /js-modules/canvas.js”);

// use either directly
let rect = new CanvasLib.Rectangle({width: 30, height: 40, shadow: true});

// or import needed exports
import CanvasLib.{Triangle, rotate};

rotate(-30, new Triangle($.query(...params)));
Require module and
        import with destructuring


// require the module and directly
// import via pattern-matching
let {read, format} = require(“fs.js”);

// use the imported binding
read(“storage/accounts.dat”). format(“%line: value”)
Generators : iterators,
coroutines/multi-tasks
Generators : yield
                      “infinite” streams
function fibonacci() {
  let [prev, curr] = [0, 1];
  while (true) {
    [prev, curr] = [curr, prev + curr];
    yield curr;
                                          Next
                                       entry point    Manual iteration:
    }
}                                                    let seq = fibonacci();
                                                     seq.next(); // 1
for (let n in fibonacci()) {                         seq.next(); // 2
                                                     seq.next(); // 3
  // truncate the sequence at 1000                   seq.next(); // 5
  if (n > 1000) break; // 1, 2, 3, 5, 8 ...          seq.next(); // 8
  console.log(n);
}
Generators : yield
                      custom iterators
function iterator(object) {
  for (let k in object) {
    yield [k, object[k]];               Proposed iterators of ES6:

  }                                     // by properties (key+value)
                                        for (let [k, v] in properties(foo))
}
                                        // by values
let foo = {x: 10, y: 20};               for (let v in values(foo))

for (let [k, v] in iterator(foo)) {     // by property names
  console.log(k, v); // x 10, y 20      for (let k in keys(foo))
}

See: http://wiki.ecmascript.org/doku.php?id=strawman:iterators
See: https://gist.github.com/865630
Generators : yield
            asynchronous programming
Callbacks                                   Coroutines
xhr("data.json", function (data) {          new Task(function () {
    xhr("user.dat", function (user) {        let data = yield xhr("data.json“);
      xhr("user/save/", function (save) {    let user = yield xhr(“user.dat“);
         /* code */                          let save = yield xhr(“/user/save“);
      }                                      /* code */
    }                                       });
});

/* other code */                            /* other code */
Generators : yield
     cooperative multitasks (threads)
let thread1 = new Thread(function (...args) {
   for (let k in values([1, 2, 3])) yield k + “ from thread 1”;
}).start();

let thread2 = new Thread(function (...args) {
   for (let k in values([1, 2, 3])) yield k + “ from thread 2”;
}).start();

// 1 from thread 1
// 2 from thread 1
// 1 from thread 2
// 3 from thread 1
// 2 from thread 2
// etc.
Array comprehensions
Array comprehensions
// map + filter way
let scores = [1, 7, 4, 9]
  .filter(function (x) { return x > 5 })
  .map(function (x) { return x * x }); // [49, 81]
Array comprehensions
// map + filter way
let scores = [1, 7, 4, 9]
  .filter(function (x) { return x > 5 })
  .map(function (x) { return x * x }); // [49, 81]


// array comprehensions
let scores = [x * x for (x in values([1, 7, 4, 9])) if (x > 5)];
Thanks for your attention


     Dmitry Soshnikov

dmitry.soshnikov@gmail.com
  http://dmitrysoshnikov.com

      @DmitrySoshnikov

More Related Content

What's hot

Compose Async with RxJS
Compose Async with RxJSCompose Async with RxJS
Compose Async with RxJSKyung Yeol Kim
 
Testing Backbone applications with Jasmine
Testing Backbone applications with JasmineTesting Backbone applications with Jasmine
Testing Backbone applications with JasmineLeon van der Grient
 
Explaining ES6: JavaScript History and What is to Come
Explaining ES6: JavaScript History and What is to ComeExplaining ES6: JavaScript History and What is to Come
Explaining ES6: JavaScript History and What is to ComeCory Forsyth
 
Workshop 5: JavaScript testing
Workshop 5: JavaScript testingWorkshop 5: JavaScript testing
Workshop 5: JavaScript testingVisual Engineering
 
Proxies are Awesome!
Proxies are Awesome!Proxies are Awesome!
Proxies are Awesome!Brendan Eich
 
ES6 - Next Generation Javascript
ES6 - Next Generation JavascriptES6 - Next Generation Javascript
ES6 - Next Generation JavascriptRamesh Nair
 
Rails-like JavaScript Using CoffeeScript, Backbone.js and Jasmine
Rails-like JavaScript Using CoffeeScript, Backbone.js and JasmineRails-like JavaScript Using CoffeeScript, Backbone.js and Jasmine
Rails-like JavaScript Using CoffeeScript, Backbone.js and JasmineRaimonds Simanovskis
 
Why Every Tester Should Learn Ruby
Why Every Tester Should Learn RubyWhy Every Tester Should Learn Ruby
Why Every Tester Should Learn RubyRaimonds Simanovskis
 
React, Redux and es6/7
React, Redux and es6/7React, Redux and es6/7
React, Redux and es6/7Dongho Cho
 
Reactive, component 그리고 angular2
Reactive, component 그리고  angular2Reactive, component 그리고  angular2
Reactive, component 그리고 angular2Jeado Ko
 
JavaScript - new features in ECMAScript 6
JavaScript - new features in ECMAScript 6JavaScript - new features in ECMAScript 6
JavaScript - new features in ECMAScript 6Solution4Future
 
Reactive Access to MongoDB from Scala
Reactive Access to MongoDB from ScalaReactive Access to MongoDB from Scala
Reactive Access to MongoDB from ScalaHermann Hueck
 
EcmaScript 6 - The future is here
EcmaScript 6 - The future is hereEcmaScript 6 - The future is here
EcmaScript 6 - The future is hereSebastiano Armeli
 
Introduction into ES6 JavaScript.
Introduction into ES6 JavaScript.Introduction into ES6 JavaScript.
Introduction into ES6 JavaScript.boyney123
 
An Intro To ES6
An Intro To ES6An Intro To ES6
An Intro To ES6FITC
 

What's hot (20)

Compose Async with RxJS
Compose Async with RxJSCompose Async with RxJS
Compose Async with RxJS
 
Testing Backbone applications with Jasmine
Testing Backbone applications with JasmineTesting Backbone applications with Jasmine
Testing Backbone applications with Jasmine
 
JavaScript ES6
JavaScript ES6JavaScript ES6
JavaScript ES6
 
Explaining ES6: JavaScript History and What is to Come
Explaining ES6: JavaScript History and What is to ComeExplaining ES6: JavaScript History and What is to Come
Explaining ES6: JavaScript History and What is to Come
 
Workshop 5: JavaScript testing
Workshop 5: JavaScript testingWorkshop 5: JavaScript testing
Workshop 5: JavaScript testing
 
ECMAScript 6
ECMAScript 6ECMAScript 6
ECMAScript 6
 
Proxies are Awesome!
Proxies are Awesome!Proxies are Awesome!
Proxies are Awesome!
 
ES6 - Next Generation Javascript
ES6 - Next Generation JavascriptES6 - Next Generation Javascript
ES6 - Next Generation Javascript
 
Rails-like JavaScript Using CoffeeScript, Backbone.js and Jasmine
Rails-like JavaScript Using CoffeeScript, Backbone.js and JasmineRails-like JavaScript Using CoffeeScript, Backbone.js and Jasmine
Rails-like JavaScript Using CoffeeScript, Backbone.js and Jasmine
 
Why Every Tester Should Learn Ruby
Why Every Tester Should Learn RubyWhy Every Tester Should Learn Ruby
Why Every Tester Should Learn Ruby
 
EcmaScript 6
EcmaScript 6 EcmaScript 6
EcmaScript 6
 
React, Redux and es6/7
React, Redux and es6/7React, Redux and es6/7
React, Redux and es6/7
 
Rails on Oracle 2011
Rails on Oracle 2011Rails on Oracle 2011
Rails on Oracle 2011
 
Reactive, component 그리고 angular2
Reactive, component 그리고  angular2Reactive, component 그리고  angular2
Reactive, component 그리고 angular2
 
JavaScript - new features in ECMAScript 6
JavaScript - new features in ECMAScript 6JavaScript - new features in ECMAScript 6
JavaScript - new features in ECMAScript 6
 
Reactive Access to MongoDB from Scala
Reactive Access to MongoDB from ScalaReactive Access to MongoDB from Scala
Reactive Access to MongoDB from Scala
 
EcmaScript 6 - The future is here
EcmaScript 6 - The future is hereEcmaScript 6 - The future is here
EcmaScript 6 - The future is here
 
Introduction into ES6 JavaScript.
Introduction into ES6 JavaScript.Introduction into ES6 JavaScript.
Introduction into ES6 JavaScript.
 
Rust ⇋ JavaScript
Rust ⇋ JavaScriptRust ⇋ JavaScript
Rust ⇋ JavaScript
 
An Intro To ES6
An Intro To ES6An Intro To ES6
An Intro To ES6
 

Viewers also liked

혁신적인 웹컴포넌트 라이브러리 - Polymer
혁신적인 웹컴포넌트 라이브러리 - Polymer혁신적인 웹컴포넌트 라이브러리 - Polymer
혁신적인 웹컴포넌트 라이브러리 - PolymerJae Sung Park
 
Functional Reactive Programming With RxSwift
Functional Reactive Programming With RxSwiftFunctional Reactive Programming With RxSwift
Functional Reactive Programming With RxSwift선협 이
 
Cascadia.js: Don't Cross the Streams
Cascadia.js: Don't Cross the StreamsCascadia.js: Don't Cross the Streams
Cascadia.js: Don't Cross the Streamsmattpodwysocki
 
NDC14 - Rx와 Functional Reactive Programming으로 고성능 서버 만들기
NDC14 - Rx와 Functional Reactive Programming으로 고성능 서버 만들기NDC14 - Rx와 Functional Reactive Programming으로 고성능 서버 만들기
NDC14 - Rx와 Functional Reactive Programming으로 고성능 서버 만들기Jong Wook Kim
 
Functional Reactive Programming with RxJS
Functional Reactive Programming with RxJSFunctional Reactive Programming with RxJS
Functional Reactive Programming with RxJSstefanmayer13
 
[1B4]안드로이드 동시성_프로그래밍
[1B4]안드로이드 동시성_프로그래밍[1B4]안드로이드 동시성_프로그래밍
[1B4]안드로이드 동시성_프로그래밍NAVER D2
 
RxJS and Reactive Programming - Modern Web UI - May 2015
RxJS and Reactive Programming - Modern Web UI - May 2015RxJS and Reactive Programming - Modern Web UI - May 2015
RxJS and Reactive Programming - Modern Web UI - May 2015Ben Lesh
 
Module, AMD, RequireJS
Module, AMD, RequireJSModule, AMD, RequireJS
Module, AMD, RequireJS偉格 高
 
서버 개발자가 바라 본 Functional Reactive Programming with RxJava - SpringCamp2015
서버 개발자가 바라 본 Functional Reactive Programming with RxJava - SpringCamp2015서버 개발자가 바라 본 Functional Reactive Programming with RxJava - SpringCamp2015
서버 개발자가 바라 본 Functional Reactive Programming with RxJava - SpringCamp2015NAVER / MusicPlatform
 
System webpack-jspm
System webpack-jspmSystem webpack-jspm
System webpack-jspmJesse Warden
 

Viewers also liked (11)

혁신적인 웹컴포넌트 라이브러리 - Polymer
혁신적인 웹컴포넌트 라이브러리 - Polymer혁신적인 웹컴포넌트 라이브러리 - Polymer
혁신적인 웹컴포넌트 라이브러리 - Polymer
 
Functional Reactive Programming With RxSwift
Functional Reactive Programming With RxSwiftFunctional Reactive Programming With RxSwift
Functional Reactive Programming With RxSwift
 
Cascadia.js: Don't Cross the Streams
Cascadia.js: Don't Cross the StreamsCascadia.js: Don't Cross the Streams
Cascadia.js: Don't Cross the Streams
 
NDC14 - Rx와 Functional Reactive Programming으로 고성능 서버 만들기
NDC14 - Rx와 Functional Reactive Programming으로 고성능 서버 만들기NDC14 - Rx와 Functional Reactive Programming으로 고성능 서버 만들기
NDC14 - Rx와 Functional Reactive Programming으로 고성능 서버 만들기
 
Functional Reactive Programming with RxJS
Functional Reactive Programming with RxJSFunctional Reactive Programming with RxJS
Functional Reactive Programming with RxJS
 
[1B4]안드로이드 동시성_프로그래밍
[1B4]안드로이드 동시성_프로그래밍[1B4]안드로이드 동시성_프로그래밍
[1B4]안드로이드 동시성_프로그래밍
 
RxJS and Reactive Programming - Modern Web UI - May 2015
RxJS and Reactive Programming - Modern Web UI - May 2015RxJS and Reactive Programming - Modern Web UI - May 2015
RxJS and Reactive Programming - Modern Web UI - May 2015
 
Module, AMD, RequireJS
Module, AMD, RequireJSModule, AMD, RequireJS
Module, AMD, RequireJS
 
서버 개발자가 바라 본 Functional Reactive Programming with RxJava - SpringCamp2015
서버 개발자가 바라 본 Functional Reactive Programming with RxJava - SpringCamp2015서버 개발자가 바라 본 Functional Reactive Programming with RxJava - SpringCamp2015
서버 개발자가 바라 본 Functional Reactive Programming with RxJava - SpringCamp2015
 
System webpack-jspm
System webpack-jspmSystem webpack-jspm
System webpack-jspm
 
Angular2 ecosystem
Angular2 ecosystemAngular2 ecosystem
Angular2 ecosystem
 

Similar to FalsyValues. Dmitry Soshnikov - ECMAScript 6

JavaScript - Agora nervoso
JavaScript - Agora nervosoJavaScript - Agora nervoso
JavaScript - Agora nervosoLuis Vendrame
 
Introduction to ES6 with Tommy Cresine
Introduction to ES6 with Tommy CresineIntroduction to ES6 with Tommy Cresine
Introduction to ES6 with Tommy CresineMovel
 
Javascript Basics
Javascript BasicsJavascript Basics
Javascript Basicsmsemenistyi
 
ECMAScript 6 and beyond
ECMAScript 6 and beyondECMAScript 6 and beyond
ECMAScript 6 and beyondFrancis Johny
 
TypeScript Introduction
TypeScript IntroductionTypeScript Introduction
TypeScript IntroductionDmitry Sheiko
 
Think Async: Asynchronous Patterns in NodeJS
Think Async: Asynchronous Patterns in NodeJSThink Async: Asynchronous Patterns in NodeJS
Think Async: Asynchronous Patterns in NodeJSAdam L Barrett
 
Javascript & Ajax Basics
Javascript & Ajax BasicsJavascript & Ajax Basics
Javascript & Ajax BasicsRichard Paul
 
Call stack, event loop and async programming
Call stack, event loop and async programmingCall stack, event loop and async programming
Call stack, event loop and async programmingMasters Academy
 
Orlando BarCamp Why Javascript Doesn't Suck
Orlando BarCamp Why Javascript Doesn't SuckOrlando BarCamp Why Javascript Doesn't Suck
Orlando BarCamp Why Javascript Doesn't Suckerockendude
 
Javascript basics
Javascript basicsJavascript basics
Javascript basicsFin Chen
 
TypeScript - All you ever wanted to know - Tech Talk by Epic Labs
TypeScript - All you ever wanted to know - Tech Talk by Epic LabsTypeScript - All you ever wanted to know - Tech Talk by Epic Labs
TypeScript - All you ever wanted to know - Tech Talk by Epic LabsAlfonso Peletier
 
Google App Engine Developer - Day3
Google App Engine Developer - Day3Google App Engine Developer - Day3
Google App Engine Developer - Day3Simon Su
 

Similar to FalsyValues. Dmitry Soshnikov - ECMAScript 6 (20)

JavaScript - Agora nervoso
JavaScript - Agora nervosoJavaScript - Agora nervoso
JavaScript - Agora nervoso
 
Javascript
JavascriptJavascript
Javascript
 
ES6 Overview
ES6 OverviewES6 Overview
ES6 Overview
 
Introduction to ES6 with Tommy Cresine
Introduction to ES6 with Tommy CresineIntroduction to ES6 with Tommy Cresine
Introduction to ES6 with Tommy Cresine
 
Academy PRO: ES2015
Academy PRO: ES2015Academy PRO: ES2015
Academy PRO: ES2015
 
Javascript Basics
Javascript BasicsJavascript Basics
Javascript Basics
 
ECMAScript 6 and beyond
ECMAScript 6 and beyondECMAScript 6 and beyond
ECMAScript 6 and beyond
 
TypeScript Introduction
TypeScript IntroductionTypeScript Introduction
TypeScript Introduction
 
Think Async: Asynchronous Patterns in NodeJS
Think Async: Asynchronous Patterns in NodeJSThink Async: Asynchronous Patterns in NodeJS
Think Async: Asynchronous Patterns in NodeJS
 
Javascript & Ajax Basics
Javascript & Ajax BasicsJavascript & Ajax Basics
Javascript & Ajax Basics
 
Call stack, event loop and async programming
Call stack, event loop and async programmingCall stack, event loop and async programming
Call stack, event loop and async programming
 
Orlando BarCamp Why Javascript Doesn't Suck
Orlando BarCamp Why Javascript Doesn't SuckOrlando BarCamp Why Javascript Doesn't Suck
Orlando BarCamp Why Javascript Doesn't Suck
 
Javascript basics
Javascript basicsJavascript basics
Javascript basics
 
TypeScript - All you ever wanted to know - Tech Talk by Epic Labs
TypeScript - All you ever wanted to know - Tech Talk by Epic LabsTypeScript - All you ever wanted to know - Tech Talk by Epic Labs
TypeScript - All you ever wanted to know - Tech Talk by Epic Labs
 
ES6: Features + Rails
ES6: Features + RailsES6: Features + Rails
ES6: Features + Rails
 
Google App Engine Developer - Day3
Google App Engine Developer - Day3Google App Engine Developer - Day3
Google App Engine Developer - Day3
 
Internal workshop es6_2015
Internal workshop es6_2015Internal workshop es6_2015
Internal workshop es6_2015
 
Es6 hackathon
Es6 hackathonEs6 hackathon
Es6 hackathon
 
JavaScript Lessons 2023
JavaScript Lessons 2023JavaScript Lessons 2023
JavaScript Lessons 2023
 
The Beauty of Java Script
The Beauty of Java ScriptThe Beauty of Java Script
The Beauty of Java Script
 

Recently uploaded

THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023
THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023
THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023Joshua Flannery
 
Infrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsInfrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsYoss Cohen
 
The Critical Role of Spatial Data in Today's Data Ecosystem
The Critical Role of Spatial Data in Today's Data EcosystemThe Critical Role of Spatial Data in Today's Data Ecosystem
The Critical Role of Spatial Data in Today's Data EcosystemSafe Software
 
Landscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdfLandscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdfAarwolf Industries LLC
 
QMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdfQMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdfROWELL MARQUINA
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfIngrid Airi González
 
Software Security in the Real World w/Kelsey Hightower
Software Security in the Real World w/Kelsey HightowerSoftware Security in the Real World w/Kelsey Hightower
Software Security in the Real World w/Kelsey HightowerAnchore
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesManik S Magar
 
HCI Lesson 1 - Introduction to Human-Computer Interaction.pdf
HCI Lesson 1 - Introduction to Human-Computer Interaction.pdfHCI Lesson 1 - Introduction to Human-Computer Interaction.pdf
HCI Lesson 1 - Introduction to Human-Computer Interaction.pdfROWELL MARQUINA
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesBernd Ruecker
 
All These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFAll These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFMichael Gough
 
Digital Tools & AI in Career Development
Digital Tools & AI in Career DevelopmentDigital Tools & AI in Career Development
Digital Tools & AI in Career DevelopmentMahmoud Rabie
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Kaya Weers
 
A PowerPoint Presentation on Vikram Lander pptx
A PowerPoint Presentation on Vikram Lander pptxA PowerPoint Presentation on Vikram Lander pptx
A PowerPoint Presentation on Vikram Lander pptxatharvdev2010
 
Arti Languages Pre Seed Pitchdeck 2024.pdf
Arti Languages Pre Seed Pitchdeck 2024.pdfArti Languages Pre Seed Pitchdeck 2024.pdf
Arti Languages Pre Seed Pitchdeck 2024.pdfwill854175
 
Women in Automation 2024: Career session - explore career paths in automation
Women in Automation 2024: Career session - explore career paths in automationWomen in Automation 2024: Career session - explore career paths in automation
Women in Automation 2024: Career session - explore career paths in automationDianaGray10
 
full stack practical assignment msc cs.pdf
full stack practical assignment msc cs.pdffull stack practical assignment msc cs.pdf
full stack practical assignment msc cs.pdfHulkTheDevil
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...Wes McKinney
 
Bitdefender-CSG-Report-creat7534-interactive
Bitdefender-CSG-Report-creat7534-interactiveBitdefender-CSG-Report-creat7534-interactive
Bitdefender-CSG-Report-creat7534-interactivestartupro
 
Which standard is best for your content?
Which standard is best for your content?Which standard is best for your content?
Which standard is best for your content?Rustici Software
 

Recently uploaded (20)

THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023
THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023
THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023
 
Infrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsInfrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platforms
 
The Critical Role of Spatial Data in Today's Data Ecosystem
The Critical Role of Spatial Data in Today's Data EcosystemThe Critical Role of Spatial Data in Today's Data Ecosystem
The Critical Role of Spatial Data in Today's Data Ecosystem
 
Landscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdfLandscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdf
 
QMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdfQMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdf
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdf
 
Software Security in the Real World w/Kelsey Hightower
Software Security in the Real World w/Kelsey HightowerSoftware Security in the Real World w/Kelsey Hightower
Software Security in the Real World w/Kelsey Hightower
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
 
HCI Lesson 1 - Introduction to Human-Computer Interaction.pdf
HCI Lesson 1 - Introduction to Human-Computer Interaction.pdfHCI Lesson 1 - Introduction to Human-Computer Interaction.pdf
HCI Lesson 1 - Introduction to Human-Computer Interaction.pdf
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architectures
 
All These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFAll These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDF
 
Digital Tools & AI in Career Development
Digital Tools & AI in Career DevelopmentDigital Tools & AI in Career Development
Digital Tools & AI in Career Development
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)
 
A PowerPoint Presentation on Vikram Lander pptx
A PowerPoint Presentation on Vikram Lander pptxA PowerPoint Presentation on Vikram Lander pptx
A PowerPoint Presentation on Vikram Lander pptx
 
Arti Languages Pre Seed Pitchdeck 2024.pdf
Arti Languages Pre Seed Pitchdeck 2024.pdfArti Languages Pre Seed Pitchdeck 2024.pdf
Arti Languages Pre Seed Pitchdeck 2024.pdf
 
Women in Automation 2024: Career session - explore career paths in automation
Women in Automation 2024: Career session - explore career paths in automationWomen in Automation 2024: Career session - explore career paths in automation
Women in Automation 2024: Career session - explore career paths in automation
 
full stack practical assignment msc cs.pdf
full stack practical assignment msc cs.pdffull stack practical assignment msc cs.pdf
full stack practical assignment msc cs.pdf
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
 
Bitdefender-CSG-Report-creat7534-interactive
Bitdefender-CSG-Report-creat7534-interactiveBitdefender-CSG-Report-creat7534-interactive
Bitdefender-CSG-Report-creat7534-interactive
 
Which standard is best for your content?
Which standard is best for your content?Which standard is best for your content?
Which standard is best for your content?
 

FalsyValues. Dmitry Soshnikov - ECMAScript 6

  • 1. @falsyvalues ECMAScript > Future Dmitry A. Soshnikov http://dmitrysoshnikov.com
  • 3. let : block scope
  • 4. Block scope // ES3 if (false) { var logLevel = 10; } alert(logLevel); // ?
  • 5. Block scope // ES3 var logLevel; // = undefined; All variables are if (false) { created before code execution – on logLevel = 10; entering the context. } A so-called “hoisting” of variables. alert(logLevel); // undefined See: http://dmitrysoshnikov.com/notes/note-4-two-words-about-hoisting/
  • 6. Block scope // ES6 Harmony if (false) { let logLevel = 10; } alert(logLevel); // ReferenceError
  • 7. Block scope // ES3, ES5 var handlers = []; handlers[0](); // ? handlers[1](); // ? for (var k = 0; k < 3; k++) { handlers[2](); // ? handlers[k] = function () { alert(k); }; }
  • 8. Block scope // ES3, ES5 var handlers = []; handlers[0](); // 3 var k; handlers[1](); // 3 for (k = 0; k < 3; k++) { handlers[2](); // 3 handlers[k] = function () { alert(k); }; }
  • 9. let : block scope ES3, ES5 ES6 for (var k = 0; k < 3; k++) { for (let k = 0; k < 3; k++) { let x = k; (function (x) { handlers[x] = function () { handlers[x] = function () { alert(x); alert(x); }; }; } })(k); } handlers[0](); // 0 handlers[0](); // 0
  • 10. let : definition, statement, expression let x = 10; // let-definition let y = 20; let (x = x * 2, y = 30) { console.log(x + y); // 50 // let-statement } console.log(x + y); // 30 console.log(let (x = 100) x); // 100 // let-expression console.log(x); // 10
  • 12. const : constants const MAX_SIZE = 100; // cannot be redeclared (let, var, etc.) let MAX_SIZE = 100; // error
  • 13. const : constant functions const registerUser() { // implementation } // redeclaration error (function, let, var) function registerUser() { ... }
  • 14. Function parameter default values
  • 15. Function parameter default values function handleRequest(data, method) { method = method || “GET”; ... }
  • 16. Function parameter default values function handleRequest(data, method) { method = method || “GET”; ... } function handleRequest(data, method = “GET”) { ... }
  • 18. Destructuring: arrays // for arrays let [x, y] = [10, 20, 30]; // non-strict matching console.log(x, y); // 10, 20
  • 19. Destructuring: objects // for objects let user = {name: “Ann”, location: {x: 10, y: 20}}; let {name: n, location: {x: x, y: y}} = user; console.log(n, x, y); // “Ann”, 10, 20
  • 20. Destructuring of function parameters function Panel(config) { var title = config.title; var x = config.pos[0]; Too “noisy” var y = config.pos[1]; return title + x + y; } new Panel({title: “Users”, pos: [10, 15]});
  • 21. Destructuring of function parameters function Panel({title: title, pos: [x, y]}) { return title + x + y; } let config = {title: “Users”, pos: [10, 15]}; new Panel(config);
  • 22. Destructuring: exchange of variables // exchange two variables without third? let x = 10; let y = 20; [x, y] = [y, x]; // easy
  • 23. Replacement of arguments: ”rest” and ”spread”
  • 24. Object arguments // ES3, ES5 function format(pattern /*, rest */) { var rest = [].slice.call(arguments, 1); var items = rest.filter(function (x) { return x > 1}); return pattern.replace(“%v”, items); } format(“scores: %v”, 1, 5, 3); // scores: 5, 3
  • 25. Good bye, arguments // ES3, ES5 function format(pattern /*, rest */) { var rest = [].slice.call(arguments, 1); // complicated var items = rest.filter(function (x) { return x > 1}); return pattern.replace(“%v”, items); } format(“scores: %v”, 1, 5, 3); // scores: 5, 3
  • 26. Hello, ”rest” // ES6 aka Harmony function format(pattern, …rest) { // real array var items = rest.filter(function (x) { return x > 1}); return pattern.replace(“%v”, items); } format(“scores: %v”, 1, 5, 3); // scores: 5, 3
  • 27. And also ”spread” // ES6 aka Harmony function showUser(name, age, weight) { return name + “:” + age + weight; } let user = [“Alex”, 28, 130]; showUser(…user); // ok showUser.apply(null, user); // desugared
  • 28. ”rest” of arrays with destructuring // ES6 aka Harmony let userInfo = [“John”, 14, 21, 3]; let [name, ...scores] = userInfo; console.log(name); // “John” console.log(scores); // [14, 21, 3]
  • 30. Short notation in destructuring let 3DPoint = {x: 20, y: 15, z: 1}; // full notation let {x: x, y: y, z: z} = 3DPoint; // short notation let {x, y, z} = 3DPoint;
  • 31. Short syntax of functions. -> functions // casual functions [1, 2, 3].map(function (x) { return x * x; }); // [1, 4, 9] // -> functions [1, 2, 3].map((x) -> x * x); // [1, 4, 9] Syntactically: • optional return; • -> instead of function • No curly braces are required
  • 32. -> functions: examples // Empty arrow function is minimal-length let empty = ->; // Expression bodies needs no parentheses or braces let square= (x) -> x * x; // Without parameters let getUser = -> users[current]; // Statement body needs braces let users = [{name: “Mark”, age: 28}, {name: “Sarah”, age: 26}]; users.forEach((user, k) -> { if (k > 2) console.log(user.name, k) });
  • 33. simple functions: dynamic this function Account(customer, cart) { this.customer = customer; this.cart = cart; $(‘#shopping-cart').on('click', function (event) { this.customer.purchase(this.cart); // error on click }); } Solutions: var that = this; .bind(this)
  • 34. => functions: lexical this function Account(customer, cart) { this.customer = customer; this.cart = cart; $(‘#shopping-cart').on('click', (event) => this.customer.purchase(this.cart); // ok ); }
  • 36. Short syntax of functions. Block-functions // casual functions [1, 2, 3].map(function (x) { return x * x; }); // [1, 4, 9] // block-functions, Ruby’s way [1, 2, 3].map {|x| x * x} // [1, 4, 9] Syntactically: • optional return; • |x| instead of function • No call parens
  • 37. Proxy objects : meta level
  • 38. Proxy-objects /* handler –meta-level handler * proto – prototype of the proxy object */ Proxy.create(handler, [proto]) /* handler – meta-handler * call – call trap * construct – construction trap */ Proxy.createFunction(handler, [call, [construct]]) See: http://wiki.ecmascript.org/doku.php?id=harmony:proxies
  • 39. Proxy-objects // original object // proxied object let point = { let loggedPoint = Proxy.create({ x: 10, get: function (rcvr, name) { y: 20 console.log(“get: ”, name); }; return point[name]; }, set: function (rcvr, name, value) { Trap of getting of console.log(“set: ”, name, value); properties point[name] = value; } Trap of setting the }, Object.getPrototypeOf(point)); properties
  • 40. Proxy-objects // proxied object Meta-handler let loggedPoint = Proxy.create({ get: function (rcvr, name) { // reading trap console.log(“get: ”, name); loggedPoint.x; // get: x, 10 return point[name]; }, // writing trap set: function (rcvr, name, value) { loggedPoint.x = 20; // set: x, 20 console.log(“set: ”, name, value); point[name] = value; // reflected on the original object } point.x; // 20 }, Object.getPrototypeOf(point));
  • 41. Callable Proxy-objects // original object // proxied object let point = {x: 10, y: 20}; let loggedPoint = Proxy.createFunction({ get: function (rcvr, name) { function callTrap() { console.log(“get: ”, name); console.log(“call”); return foo[name]; } }, set: function (rcvr, name, value) { function constructTrap() { console.log(“set: ”, name, value); console.log(“construct”); foo[name] = value; } } }, callTrap, constructTrap); loggedPoint(10, 20); new loggedPoint(100); Catching of Catching of calling construction
  • 42. Proxy : simple generic read logger function logged(object) { return Proxy.create({ get: function (rcvr, name) { console.log(“get:”, name); return object[name]; } }, Object.getPrototypeOf(object)); } let connector = logged({ join: function (node) { ... } }); connector.join(“store@master-node”); // get: join
  • 43. Proxy : examples // loggers (on reading and writing) Proxy.create(logHandler(object)); // multiple inheritance (delegation-based mixins) Proxy.create(mixin(obj1, obj2)); // noSuchMethod Proxy.create(object, noSuchMethod) // Arrays with negative indices (as in Python) let a = Array.new([1, 2, 3]); console.log(a[-1]); // 3 a[-1] = 10; console.log(a); // [1, 2, 10] See: https://github.com/DmitrySoshnikov/es-laboratory/tree/master/examples
  • 45. Modules in ES3, ES5 var DBLayer = (function (global) { /* save original */ var originalDBLayer = global.DBLayer; function noConflict() { global.DBLayer = originalDBLayer; 1. Create local scope } 2. Restoring function /* implementation */ 3. Implementation 4. Public API function query() { ... } /* exports, public API */ return { noConflict: noConflict, query: query }; })(this);
  • 46. Modules in ES3, ES5 var DBLayer = (function (global) { /* save original */ var originalDBLayer = global.DBLayer; function noConflict() { global.DBLayer = originalDBLayer; 1. Create local scope } 2. Restoring function /* implementation */ 3. Implementation 4. Public API function query() { ... } /* exports, public API */ Too much of “noise”. return { A “sugar” is needed. noConflict: noConflict, query: query }; })(this);
  • 47. Modules in ES6 module DBLayer { export function query(s) { ... } export function connection(...args) { ... } } import DBLayer.*; // import all import DBLayer.{query, connection: attachTo}; // import only needed exports query(“SELECT * FROM books”).format(“escape | split”); attachTo(“/books/store”, { onSuccess: function (response) { ... } })
  • 48. External modules in ES6 // on file system module $ = require(“./library/selector.js”); // globally, from the Net, we define the name of the module module CanvasLib = require(“http:// ... /js-modules/canvas.js”); // use either directly let rect = new CanvasLib.Rectangle({width: 30, height: 40, shadow: true}); // or import needed exports import CanvasLib.{Triangle, rotate}; rotate(-30, new Triangle($.query(...params)));
  • 49. Require module and import with destructuring // require the module and directly // import via pattern-matching let {read, format} = require(“fs.js”); // use the imported binding read(“storage/accounts.dat”). format(“%line: value”)
  • 51. Generators : yield “infinite” streams function fibonacci() { let [prev, curr] = [0, 1]; while (true) { [prev, curr] = [curr, prev + curr]; yield curr; Next entry point Manual iteration: } } let seq = fibonacci(); seq.next(); // 1 for (let n in fibonacci()) { seq.next(); // 2 seq.next(); // 3 // truncate the sequence at 1000 seq.next(); // 5 if (n > 1000) break; // 1, 2, 3, 5, 8 ... seq.next(); // 8 console.log(n); }
  • 52. Generators : yield custom iterators function iterator(object) { for (let k in object) { yield [k, object[k]]; Proposed iterators of ES6: } // by properties (key+value) for (let [k, v] in properties(foo)) } // by values let foo = {x: 10, y: 20}; for (let v in values(foo)) for (let [k, v] in iterator(foo)) { // by property names console.log(k, v); // x 10, y 20 for (let k in keys(foo)) } See: http://wiki.ecmascript.org/doku.php?id=strawman:iterators See: https://gist.github.com/865630
  • 53. Generators : yield asynchronous programming Callbacks Coroutines xhr("data.json", function (data) { new Task(function () { xhr("user.dat", function (user) { let data = yield xhr("data.json“); xhr("user/save/", function (save) { let user = yield xhr(“user.dat“); /* code */ let save = yield xhr(“/user/save“); } /* code */ } }); }); /* other code */ /* other code */
  • 54. Generators : yield cooperative multitasks (threads) let thread1 = new Thread(function (...args) { for (let k in values([1, 2, 3])) yield k + “ from thread 1”; }).start(); let thread2 = new Thread(function (...args) { for (let k in values([1, 2, 3])) yield k + “ from thread 2”; }).start(); // 1 from thread 1 // 2 from thread 1 // 1 from thread 2 // 3 from thread 1 // 2 from thread 2 // etc.
  • 56. Array comprehensions // map + filter way let scores = [1, 7, 4, 9] .filter(function (x) { return x > 5 }) .map(function (x) { return x * x }); // [49, 81]
  • 57. Array comprehensions // map + filter way let scores = [1, 7, 4, 9] .filter(function (x) { return x > 5 }) .map(function (x) { return x * x }); // [49, 81] // array comprehensions let scores = [x * x for (x in values([1, 7, 4, 9])) if (x > 5)];
  • 58. Thanks for your attention Dmitry Soshnikov dmitry.soshnikov@gmail.com http://dmitrysoshnikov.com @DmitrySoshnikov