• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
ESCMAScript 6: Get Ready For The Future. Now
 

ESCMAScript 6: Get Ready For The Future. Now

on

  • 1,604 views

Learn about upcoming features of ECMAScript 6 that you can try out today!

Learn about upcoming features of ECMAScript 6 that you can try out today!

Statistics

Views

Total Views
1,604
Views on SlideShare
1,444
Embed Views
160

Actions

Likes
3
Downloads
11
Comments
0

7 Embeds 160

http://szafranek.net 54
http://t.co 47
http://szafranek 25
http://librosweb.es 20
http://kartones.net 12
http://development.cou.ch 1
http://www.linkedin.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    ESCMAScript 6: Get Ready For The Future. Now ESCMAScript 6: Get Ready For The Future. Now Presentation Transcript

    • Get Ready ForThe Future. NowECMAScript 6@szafranek
    • July 2008ES4Dec 1999ES3
    • Dec 2013Dec 2009ES5 ES6
    • ES6 aka Harmony
    • Backwardscompatibility
    • No “bad parts”are removed
    • “Better carrots”
    • Superset of ES 5strict mode
    • Block scope5
    • hoistingvar i = 1;function b() {i = 10;for (var i = 0; i < 3; i++) {//...}}b();console.log(i);1
    • hoistingvar i = 1;function b() {i = 10;for (var i = 0; i < 3; i++) {//...}}b();console.log(i); // 11
    • let
    • letlet
    • letlet•Block scope
    • letlet•Block scope•No hoisting
    • letlet•Block scope•No hoisting•Fails fast
    • letlet•Block scope•No hoisting•Fails fast= better var
    • var i = 1;function b() {i = 10;for (let i = 0; i < 3; i++) {//...}}b();console.log(i); // 10
    • var things = {};for (var i = 0; i < 3; i++) {things["fun" + i] = function() {console.log(i);};}things["fun0"](); // 3things["fun1"](); // 3things["fun2"](); // 3
    • var things = {};for (var i = 0; i < 3; i++) {things["fun" + i] = (function(index) {return function() {console.log(index);};}(i));}things["fun0"](); // 0things["fun1"](); // 1things["fun2"](); // 2
    • var things = {};for (var i = 0; i < 3; i++) {let index = i;things["fun" + i] = function() {console.log(index);};}things["fun0"](); // 0things["fun1"](); // 1things["fun2"](); // 2
    • constconstconst pi = Math.PI;// ...pi = 10; // SyntaxError
    • constfunction process() {const factor = 10;let result = 5;result *= 3;// thousands lines of code...return result * factor;}Most variables dont change over time.Using const helps spot unwanted side effects.
    • constconst = better letfunction process() {const factor = 10;let result = 5;result *= 3;// thousands lines of code...return result * factor;}Most variables dont change over time.Using const helps spot unwanted side effects.
    • “I am a fullconst nazinowadays”John Carmack: "I am a full const nazi nowadays, and I chide any programmer that doesn’tconst every variable and parameter that can be."http://www.phoronix.com/scan.php?page=news_item&px=MTI3NDQ
    • Use let and const todaydefs.jshttp://blog.lassus.se/2013/05/defsjs.html
    • Destructing10
    • let point = [3, 7];let [x, y] = point;console.log(x, y);
    • let primary = "red", secondary = "blue";[secondary, primary] = [primary, secondary];console.log(primary, secondary); // blue red
    • let point = [3, 7, 5];let [, y] = point;console.log(y); // 7Selecting only elements you want
    • let coords = {long: 11, lat: 45};let {long, lat} = coords;console.log(long, lat); // 11 45Destructing objects
    • let coords = {long: 11, lat: 45};let {long: longitude,lat: latitude} = coords;console.log(longitude, latitude); // 11 45Mapping to custom names
    • Spread operatorlet numbers = [3, 10, 7];Math.max(...numbers); // 10
    • let nodeArray = [...document.querySelectorAll("p")];var nodeList = document.querySelectorAll("p");var nodeArray =[].slice.apply(nodeList);ES6ES5
    • Rest parametersfunction tax(rate, ...values) {//...}tax(0.03, 50, 78, 100); // [1.5, 2.34, 3]15
    • function tax(rate, ...values) {let taxedValues = [];for (let value of values) {taxedValues.push(rate * value);}return taxedValues;}function tax() {var args = Array.prototype.slice.call(arguments);var rate = args[0];var values = args.splice(1);var taxedValues = [];for (var i = 0; i < values.length; i++) {var value = values[i];taxedValues.push(rate * value);};return taxedValues;}ES5ES6
    • function tax(rate, ...values) {let taxedValues = [];for (let value of values) {taxedValues.push(rate * value);}return taxedValues;}function tax() {var args = Array.prototype.slice.call(arguments);var rate = args[0];var values = args.splice(1);var taxedValues = [];for (var i = 0; i < values.length; i++) {var value = values[i];taxedValues.push(rate * value);};return taxedValues;}ES5ES6
    • Iteratorslet elements = ["one", "two", "three"];elements.customProperty = "Wont show up";for (let element of elements) {console.log(element);}// "one" "two" "three"
    • Object.prototype.dontDoIt = "bwahaha";var obj = {name: "Chris", surname: "Szafranek"};for (var key in obj) {if (obj.hasOwnProperty(key)) {console.log(key, obj[key]);}}Object.prototype.dontDoIt = "bwahaha";var obj = {name: "Chris", surname: "Szafranek"};import items from @"iter";for (let [key, value] of items(obj) {console.log(key, value);}ES6ES5
    • built-in iteratorskeys(obj);values(obj);items(obj);allKeys(obj);allValues(obj);allItems(obj);
    • Object.prototype.dontDoIt = "bwahaha";var obj = {name: "Chris", surname: "Szafranek"};import items from @"iter";for (let [key, value] of items(obj) {console.log(key, value);}
    • Modulesin progress!18
    • module Map {export function zoom(coords) {console.log("zooming to ", coords);};export function pan(coords) {console.log("panning to ", coords);};export var defaultMode = "satellite";};import {zoom, defaultMode} from Map;zoom({lat: 30, long: 10});
    • module loadersLoader.load(map.js, function (map) {map.zoom({lat: 30, long: 10});}, errorCallback);
    • loader pipelineLoader.normalize();Loader.resolve();Loader.fetch();Loader.translate();Loader.link();Default pipeline can be customized.In translation phase CoffeeScript can be translated to JS.In link phase AMD or node modules can be imported: such modules can be interoperable withES6 modules.https://gist.github.com/wycats/51c96e3adcdb3a68cbc3
    • loader pipelineLoader.normalize();Loader.resolve();Loader.fetch();Loader.translate();Loader.link();// CoffeeScript!Default pipeline can be customized.In translation phase CoffeeScript can be translated to JS.In link phase AMD or node modules can be imported: such modules can be interoperable withES6 modules.https://gist.github.com/wycats/51c96e3adcdb3a68cbc3
    • loader pipelineLoader.normalize();Loader.resolve();Loader.fetch();Loader.translate();Loader.link();// CoffeeScript!// AMD, Common.js!Default pipeline can be customized.In translation phase CoffeeScript can be translated to JS.In link phase AMD or node modules can be imported: such modules can be interoperable withES6 modules.https://gist.github.com/wycats/51c96e3adcdb3a68cbc3
    • function tax(rate, ...values) {let taxedValues = [];for (let value of values) {taxedValues.push(rate * value);}return taxedValues;}
    • Arrow functionsfunction tax(rate, ...values) {return values.map(value => rate * value);}
    • lexical thisfunction Greeter() {this.name = "jsDay";this.hello = function() {console.log("Hello " + this.name);}}var greet = new Greeter();setTimeout(greet.hello.bind(greet), 1000);ES5
    • function Greeter() {this.name = "jsDay";this.hello = function() {console.log("Hello " + this.name);}}var greet = new Greeter();setTimeout(greet.hello.bind(greet), 1000);ES5function Greeter() {this.name = "jsDay";this.hello = () => console.log("Hello " + this.name)}var greet = new Greeter();setTimeout(greet.hello, 1000);ES6
    • Last but not least...20
    • Classes
    • function Vehicle(name) {this.name = name;}Vehicle.prototype.drive = function () {return "Wrooom";};// Inheritancefunction Car(name, maxSpeed) {Vehicle.call(this, name);this.maxSpeed = maxSpeed;}Car.prototype = Object.create(Vehicle.prototype);Car.prototype.constructor = Car;Car.prototype.drive = function () {return Vehicle.prototype.drive.call(this) + " at " +this.maxSpeed;};
    • class Vehicle {constructor(name) {this.name = name;}drive() {return "Wrooom";}}// Inheritanceclass Car extends Vehicle {constructor(name, maxSpeed) {super.constructor(name);this.maxSpeed = maxSpeed;}drive() {return super.drive() + " at " + this.maxSpeed;}}
    • ClassesDestructingBlock scopeModulesIteratorsSpread operatorRest parametersArrow functions
    • MapsPromises WeakMapsSetsUnicodeProxiesBinary dataTail callsGeneratorsTemplate stringsAPI improvementsComprehensions
    • ES6 today
    • Firefox Nightly*Some features are not implemented as in the recent version of the spec, e.g. let.
    • Chrome Canaryabout:flags
    • node --harmony
    • Thank you!@szafranekwww.2ality.comwww.brendaneich.comkangax.github.io/es5-compat-table/es6
    • Photo creditsQuakeConcloud2013Monty Pythoniluvgadgets1