SlideShare ist ein Scribd-Unternehmen logo
1 von 58
Downloaden Sie, um offline zu lesen
@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

Weitere ähnliche Inhalte

Was ist angesagt?

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
 

Was ist angesagt? (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
 

Andere mochten auch

혁신적인 웹컴포넌트 라이브러리 - 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
 

Andere mochten auch (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
 

Ähnlich wie 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
 

Ähnlich wie 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
 

Kürzlich hochgeladen

Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?SANGHEE SHIN
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServiceRenan Moreira de Oliveira
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
RAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIRAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIUdaiappa Ramachandran
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Spring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfSpring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfAnna Loughnan Colquhoun
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 

Kürzlich hochgeladen (20)

Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
RAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIRAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AI
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Spring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfSpring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdf
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 

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