SlideShare a Scribd company logo
1 of 27
Download to read offline
2013




JavaScript revolution
New syntax ( sugar of course! )
              &
      standard library
Who I am?


       Kamil Gałuszka
Django / Objective-C / Python World
JavaScript is only a hobby (for now)




       @galuszkak


       http://solution4future.com
Introduction & Inspiration
JavaScript, JS, ECMAScript, ES

● ECMAScript 3 ( 1999 )

● ECMAScript 4 ( incompatible with third version
  2005 )

● ECMAScript 5 ( 2009 )

● ECMAScript 5.1 ( 2011 )

● TC39 - Committee for Standardization
Funny Facts


● ES 5.1 standard == 243 pages

● JavaScript: The Definitive Guide by David
  Flanagan (6th edition)== 1078 pages

● Draft of standard ES 6.0 == 421 pages

● JavaScript: The Definitive Guide by David
  Flanagan (7th edition)== ? pages ;)
Warm Up

false == "0"               false === "0"
false == "false"           null === undefined
null == undefined          "" === 0
"" == 0
NaN === NaN
6.toString();
" nt" == 0;
obj = {x:10, y:20};
delete obj.y;
obj.y == null              obj.y === null
obj.y == undefined         obj.y === undefined
ES.Next vs ES.Harmony




        ES.Next === ECMAScript 6


ES 6 is fully compatible with ES5 (strict mode)


ES.Harmony in next versions of ECMAScript
Block Scope

Two new significant keywords:
let         lock scoped variable
const       read-only variable. (couldn't be hided by other variable etc.)

Typical problem in ES 5
    var result = [];
    for (var length = 10; length--;){
       var len = length;
       result[len] = function(){ return len; }
    }
    result[5]() // 0
    result[2]() // 0

WHY?
Block Scope
Solution ES 5

   var result = [];
   for (var length = 10; length--;){
      var len = length;
      result[len] = (function(dlugosc){
           return function(){
               return dlugosc;
           }
       })(len)
   }
   result[5]() // 5
   result[2]() // 2

use closure
Block Scope



Solution ES 6 (Cleaner, nicer, AWESOME!)

   var result = [];
   for (var length = 10; length--;){
      let len = length;
      result[len] = function(){ return len;}
   }
   result[5]() // 5
   result[2]() // 2
Shorthand Object Literals



ES 5 version:              ES 6 version:

var cat = "Molly";         var cat = "Molly";
var dog = "Rex";           var dog = "Rex";
var pets = {               var pets = {cat,dog}
    'cat': cat,
    'dog': dog,
}
Shorthand Object Literals


function Animal(name){
     this.name = name;
     this.age = 0;
}

Animal.prototype = {
  roar(text){
  //old version was function roar(text)
     return `Animal ${this.name}
  roars:${text}` // template syntax
  }
}
Destructing Assignments
      (extraction from objects, swap variables)




var {parse, stringify} = JSON;

var [, areaCode, local] = /^(d{3})-(d{3}-d
{4})$/.exec("048-032-7777");

[left, right] = [right, left];
Destructuring Nested Objects
var poets = [{
        "name": "T.S. Eliot",
        "works": [{
                 "title": "The Love Song",
                 "date": 1915
            }, {
                 "title": "Rhapsody",
                 "date": 1917
            }]
   }, {
        "name": "Ezra Pound",
        "works": [{
                 "title": "Ripostes",
                 "date": 1912
            }]
   }];
Destructuring Nested Objects




ES 5 VERSION ( really hard to remember )

var author = poets[0]['name'];
var title = poets[0]['works'][1]['title'];
var date = poets[0]['works'][1]['date'];
Destructuring Nested Objects


ES 6 version (AWESOME !)
  var [{'name': author, 'works': [, {title,
  date}]}] = poets;
  // Select first author and his second book
  and store it in variables author, title, date

  `"${title}", by ${author}, was published in
  ${date}.`
  // Template creating string from this
  variables.

Rhapsody, by T.S. Eliot, was published in 1917
Default parameters


// ES 5
function Person(name, age){
   this.name = name || "Anonim";
   this.age = age || 0;
}

// ES 6
function Person(name="Anonim", age=0)
{
   this.name = name;
  this.age = 0;
}
...rest parameters

js>function f(a, b, ...r) {
   print(Array.isArray(r));
   return r.concat(a, b);
}
js>f(1, 2)
true
[1, 2]
js>f(1, 2, 3)
true
[3, 1, 2]
js>f(1, 2, 3, 4, 5)
true
[3, 4, 5, 1, 2]
...spread

//ES 5 merging array
js> var a = [1, 2]
[3, 4, 5]
js> var b = [3, 4, 5]
[1, 2]
js> a = a.concat(b)
[1, 2, 3, 4, 5]


//ES 6 merging array (AWESOME!)
js> var a = [3, 4, 5]
[3, 4, 5]
js> var b = [1, 2, ...a]
[1, 2, 3, 4, 5]
Array Comprehensions




var arr =
[ x for (x of a) if (x.color === ‘blue’) ]

var arr = [ square(x) for (x of [1,2,3,4,5]) ]




                     Example by Addy Osmani http://addyosmani.com/blog/a-few-new-thin
                     to-javascript/
Modules




module Car {
  // import …
  // export …
}




       Example by Addy Osmani http://addyosmani.com/blog/a-few-new-
       things-coming-to-javascript/
Modules

module Car {
   // Internal
   var licensePlateNo = '556-343';
   // External
   export function drive(speed, direction) {
     console.log('details:', speed, direction);
   }
   export module engine{
     export function check() { }
   }
};
                     Example by Addy Osmani http://addyosmani.com/blog/a-few-new-
                     things-coming-to-javascript/
Imports
      (Yes! YES! No requirejs or AMD needed)




import       "crypto"       as       crypto;
import { encrypt, decrypt } from "crypto";
import { encrypt: enc } from "crypto";

import {drive, engine} from Car;




                        Example by Addy Osmani http://addyosmani.com/blog/a-few-new-
                        things-coming-to-javascript/
Classes
module widgets {
  // ...
  class DropDownButton extends Widget {
    constructor(attributes) {
      super(attributes);
      this.buildUI();
    }
    buildUI() {
      this.domNode.onclick = function(){
         // ...
      };
    }
  }
                      Example by Addy Osmani http://addyosmani.com/blog/a-few-new-
}                     things-coming-to-javascript/
Classes
var widgets = (function(global) {
  function DropDownButton(attributes) {
    Widget.call(this, attributes);
    this.buildUI();
  }
  DropDownButton.prototype = Object.create
(Widget.prototype, {
    constructor: { value: DropDownButton },
    buildUI:     {
      value: function(e) {
        this.domNode.onclick = function(e) {
          // ...
        }
                     Example by Addy Osmani http://addyosmani.com/blog/a-few-new-
}}})})(this);        things-coming-to-javascript/
Compatibility Matrix




http://kangax.github.com/es5-compat-table/es6/
Thanks to...



Douglas Crockford http://javascript.crockford.com/

Kit Cambridge http://kitcambridge.be/
(His speech: http://www.youtube.com/watch?v=Dt0f2XdvriQ)

TC39

Addy Osmani http://addyosmani.com/blog/a-few-new-things-
coming-to-javascript/

More Related Content

What's hot

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
 
ES6 - Next Generation Javascript
ES6 - Next Generation JavascriptES6 - Next Generation Javascript
ES6 - Next Generation JavascriptRamesh Nair
 
ES6 PPT FOR 2016
ES6 PPT FOR 2016ES6 PPT FOR 2016
ES6 PPT FOR 2016Manoj Kumar
 
What's New in ES6 for Web Devs
What's New in ES6 for Web DevsWhat's New in ES6 for Web Devs
What's New in ES6 for Web DevsRami Sayar
 
Proxies are Awesome!
Proxies are Awesome!Proxies are Awesome!
Proxies are Awesome!Brendan Eich
 
Alfresco the clojure way
Alfresco the clojure wayAlfresco the clojure way
Alfresco the clojure wayCarlo Sciolla
 
Oral presentation v2
Oral presentation v2Oral presentation v2
Oral presentation v2Yeqi He
 
FalsyValues. Dmitry Soshnikov - ECMAScript 6
FalsyValues. Dmitry Soshnikov - ECMAScript 6FalsyValues. Dmitry Soshnikov - ECMAScript 6
FalsyValues. Dmitry Soshnikov - ECMAScript 6Dmitry Soshnikov
 
LetSwift RxSwift 시작하기
LetSwift RxSwift 시작하기LetSwift RxSwift 시작하기
LetSwift RxSwift 시작하기Wanbok Choi
 
[Let'Swift 2019] 실용적인 함수형 프로그래밍 워크샵
[Let'Swift 2019] 실용적인 함수형 프로그래밍 워크샵[Let'Swift 2019] 실용적인 함수형 프로그래밍 워크샵
[Let'Swift 2019] 실용적인 함수형 프로그래밍 워크샵Wanbok Choi
 
Callbacks, Promises, and Coroutines (oh my!): Asynchronous Programming Patter...
Callbacks, Promises, and Coroutines (oh my!): Asynchronous Programming Patter...Callbacks, Promises, and Coroutines (oh my!): Asynchronous Programming Patter...
Callbacks, Promises, and Coroutines (oh my!): Asynchronous Programming Patter...Domenic Denicola
 
How to Clone Flappy Bird in Swift
How to Clone Flappy Bird in SwiftHow to Clone Flappy Bird in Swift
How to Clone Flappy Bird in SwiftGiordano Scalzo
 
Planet-HTML5-Game-Engine Javascript Performance Enhancement
Planet-HTML5-Game-Engine Javascript Performance EnhancementPlanet-HTML5-Game-Engine Javascript Performance Enhancement
Planet-HTML5-Game-Engine Javascript Performance Enhancementup2soul
 

What's hot (20)

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
 
ES6 in Real Life
ES6 in Real LifeES6 in Real Life
ES6 in Real Life
 
ES6 - Next Generation Javascript
ES6 - Next Generation JavascriptES6 - Next Generation Javascript
ES6 - Next Generation Javascript
 
ES6 PPT FOR 2016
ES6 PPT FOR 2016ES6 PPT FOR 2016
ES6 PPT FOR 2016
 
EcmaScript 6
EcmaScript 6 EcmaScript 6
EcmaScript 6
 
JavaScript ES6
JavaScript ES6JavaScript ES6
JavaScript ES6
 
What's New in ES6 for Web Devs
What's New in ES6 for Web DevsWhat's New in ES6 for Web Devs
What's New in ES6 for Web Devs
 
Proxies are Awesome!
Proxies are Awesome!Proxies are Awesome!
Proxies are Awesome!
 
ES6: Features + Rails
ES6: Features + RailsES6: Features + Rails
ES6: Features + Rails
 
Async Frontiers
Async FrontiersAsync Frontiers
Async Frontiers
 
Alfresco the clojure way
Alfresco the clojure wayAlfresco the clojure way
Alfresco the clojure way
 
Oral presentation v2
Oral presentation v2Oral presentation v2
Oral presentation v2
 
FalsyValues. Dmitry Soshnikov - ECMAScript 6
FalsyValues. Dmitry Soshnikov - ECMAScript 6FalsyValues. Dmitry Soshnikov - ECMAScript 6
FalsyValues. Dmitry Soshnikov - ECMAScript 6
 
Advanced JavaScript
Advanced JavaScriptAdvanced JavaScript
Advanced JavaScript
 
Introduction of ES2015
Introduction of ES2015Introduction of ES2015
Introduction of ES2015
 
LetSwift RxSwift 시작하기
LetSwift RxSwift 시작하기LetSwift RxSwift 시작하기
LetSwift RxSwift 시작하기
 
[Let'Swift 2019] 실용적인 함수형 프로그래밍 워크샵
[Let'Swift 2019] 실용적인 함수형 프로그래밍 워크샵[Let'Swift 2019] 실용적인 함수형 프로그래밍 워크샵
[Let'Swift 2019] 실용적인 함수형 프로그래밍 워크샵
 
Callbacks, Promises, and Coroutines (oh my!): Asynchronous Programming Patter...
Callbacks, Promises, and Coroutines (oh my!): Asynchronous Programming Patter...Callbacks, Promises, and Coroutines (oh my!): Asynchronous Programming Patter...
Callbacks, Promises, and Coroutines (oh my!): Asynchronous Programming Patter...
 
How to Clone Flappy Bird in Swift
How to Clone Flappy Bird in SwiftHow to Clone Flappy Bird in Swift
How to Clone Flappy Bird in Swift
 
Planet-HTML5-Game-Engine Javascript Performance Enhancement
Planet-HTML5-Game-Engine Javascript Performance EnhancementPlanet-HTML5-Game-Engine Javascript Performance Enhancement
Planet-HTML5-Game-Engine Javascript Performance Enhancement
 

Viewers also liked (20)

ES6: The Awesome Parts
ES6: The Awesome PartsES6: The Awesome Parts
ES6: The Awesome Parts
 
The New JavaScript: ES6
The New JavaScript: ES6The New JavaScript: ES6
The New JavaScript: ES6
 
ES2015 / ES6: Basics of modern Javascript
ES2015 / ES6: Basics of modern JavascriptES2015 / ES6: Basics of modern Javascript
ES2015 / ES6: Basics of modern Javascript
 
Promises, Promises
Promises, PromisesPromises, Promises
Promises, Promises
 
JavaScript 1.5 to 2.0 (TomTom)
JavaScript 1.5 to 2.0 (TomTom)JavaScript 1.5 to 2.0 (TomTom)
JavaScript 1.5 to 2.0 (TomTom)
 
JavaScript Promises
JavaScript PromisesJavaScript Promises
JavaScript Promises
 
Real World Windows 8 Apps in JavaScript
Real World Windows 8 Apps in JavaScriptReal World Windows 8 Apps in JavaScript
Real World Windows 8 Apps in JavaScript
 
ES6 is Nigh
ES6 is NighES6 is Nigh
ES6 is Nigh
 
JavaScript im Jahr 2016
JavaScript im Jahr 2016JavaScript im Jahr 2016
JavaScript im Jahr 2016
 
Creating Truly RESTful APIs
Creating Truly RESTful APIsCreating Truly RESTful APIs
Creating Truly RESTful APIs
 
The Final Frontier
The Final FrontierThe Final Frontier
The Final Frontier
 
Client-Side Packages
Client-Side PackagesClient-Side Packages
Client-Side Packages
 
JavaScript Promises
JavaScript PromisesJavaScript Promises
JavaScript Promises
 
JavaScript on the Desktop
JavaScript on the DesktopJavaScript on the Desktop
JavaScript on the Desktop
 
Boom! Promises/A+ Was Born
Boom! Promises/A+ Was BornBoom! Promises/A+ Was Born
Boom! Promises/A+ Was Born
 
Webpack & EcmaScript 6 (Webelement #32)
Webpack & EcmaScript 6 (Webelement #32)Webpack & EcmaScript 6 (Webelement #32)
Webpack & EcmaScript 6 (Webelement #32)
 
Domains!
Domains!Domains!
Domains!
 
The jsdom
The jsdomThe jsdom
The jsdom
 
Webpack slides
Webpack slidesWebpack slides
Webpack slides
 
The State of JavaScript (2015)
The State of JavaScript (2015)The State of JavaScript (2015)
The State of JavaScript (2015)
 

Similar to JavaScript - new features in ECMAScript 6

MiamiJS - The Future of JavaScript
MiamiJS - The Future of JavaScriptMiamiJS - The Future of JavaScript
MiamiJS - The Future of JavaScriptCaridy Patino
 
What can be done with Java, but should better be done with Erlang (@pavlobaron)
What can be done with Java, but should better be done with Erlang (@pavlobaron)What can be done with Java, but should better be done with Erlang (@pavlobaron)
What can be done with Java, but should better be done with Erlang (@pavlobaron)Pavlo Baron
 
ECMAScript2015
ECMAScript2015ECMAScript2015
ECMAScript2015qmmr
 
AST Transformations
AST TransformationsAST Transformations
AST TransformationsHamletDRC
 
Groovy Ast Transformations (greach)
Groovy Ast Transformations (greach)Groovy Ast Transformations (greach)
Groovy Ast Transformations (greach)HamletDRC
 
The Future of JVM Languages
The Future of JVM Languages The Future of JVM Languages
The Future of JVM Languages VictorSzoltysek
 
Short intro to ES6 Features
Short intro to ES6 FeaturesShort intro to ES6 Features
Short intro to ES6 FeaturesNaing Lin Aung
 
JavaScript for PHP developers
JavaScript for PHP developersJavaScript for PHP developers
JavaScript for PHP developersStoyan Stefanov
 
JavaScript Editions ES7, ES8 and ES9 vs V8
JavaScript Editions ES7, ES8 and ES9 vs V8JavaScript Editions ES7, ES8 and ES9 vs V8
JavaScript Editions ES7, ES8 and ES9 vs V8Rafael Casuso Romate
 
ES6 in Production [JSConfUY2015]
ES6 in Production [JSConfUY2015]ES6 in Production [JSConfUY2015]
ES6 in Production [JSConfUY2015]Guillermo Paz
 
ES6 and AngularAMD
ES6 and AngularAMDES6 and AngularAMD
ES6 and AngularAMDdhaval10690
 
Adding ES6 to Your Developer Toolbox
Adding ES6 to Your Developer ToolboxAdding ES6 to Your Developer Toolbox
Adding ES6 to Your Developer ToolboxJeff Strauss
 
[React Native Tutorial] Lecture 3: More on ES6/ES2015
[React Native Tutorial] Lecture 3: More on ES6/ES2015[React Native Tutorial] Lecture 3: More on ES6/ES2015
[React Native Tutorial] Lecture 3: More on ES6/ES2015Kobkrit Viriyayudhakorn
 
Ast transformations
Ast transformationsAst transformations
Ast transformationsHamletDRC
 
ESCMAScript 6: Get Ready For The Future. Now
ESCMAScript 6: Get Ready For The Future. NowESCMAScript 6: Get Ready For The Future. Now
ESCMAScript 6: Get Ready For The Future. NowKrzysztof Szafranek
 

Similar to JavaScript - new features in ECMAScript 6 (20)

Es6 hackathon
Es6 hackathonEs6 hackathon
Es6 hackathon
 
MiamiJS - The Future of JavaScript
MiamiJS - The Future of JavaScriptMiamiJS - The Future of JavaScript
MiamiJS - The Future of JavaScript
 
What can be done with Java, but should better be done with Erlang (@pavlobaron)
What can be done with Java, but should better be done with Erlang (@pavlobaron)What can be done with Java, but should better be done with Erlang (@pavlobaron)
What can be done with Java, but should better be done with Erlang (@pavlobaron)
 
ECMAScript2015
ECMAScript2015ECMAScript2015
ECMAScript2015
 
AST Transformations
AST TransformationsAST Transformations
AST Transformations
 
Groovy Ast Transformations (greach)
Groovy Ast Transformations (greach)Groovy Ast Transformations (greach)
Groovy Ast Transformations (greach)
 
The Future of JVM Languages
The Future of JVM Languages The Future of JVM Languages
The Future of JVM Languages
 
Short intro to ES6 Features
Short intro to ES6 FeaturesShort intro to ES6 Features
Short intro to ES6 Features
 
JavaScript for PHP developers
JavaScript for PHP developersJavaScript for PHP developers
JavaScript for PHP developers
 
JavaScript Editions ES7, ES8 and ES9 vs V8
JavaScript Editions ES7, ES8 and ES9 vs V8JavaScript Editions ES7, ES8 and ES9 vs V8
JavaScript Editions ES7, ES8 and ES9 vs V8
 
ES6 in Production [JSConfUY2015]
ES6 in Production [JSConfUY2015]ES6 in Production [JSConfUY2015]
ES6 in Production [JSConfUY2015]
 
ES6 and AngularAMD
ES6 and AngularAMDES6 and AngularAMD
ES6 and AngularAMD
 
"let ECMAScript = 6"
"let ECMAScript = 6" "let ECMAScript = 6"
"let ECMAScript = 6"
 
recap-js.pdf
recap-js.pdfrecap-js.pdf
recap-js.pdf
 
Adding ES6 to Your Developer Toolbox
Adding ES6 to Your Developer ToolboxAdding ES6 to Your Developer Toolbox
Adding ES6 to Your Developer Toolbox
 
ES6 Overview
ES6 OverviewES6 Overview
ES6 Overview
 
Groovy
GroovyGroovy
Groovy
 
[React Native Tutorial] Lecture 3: More on ES6/ES2015
[React Native Tutorial] Lecture 3: More on ES6/ES2015[React Native Tutorial] Lecture 3: More on ES6/ES2015
[React Native Tutorial] Lecture 3: More on ES6/ES2015
 
Ast transformations
Ast transformationsAst transformations
Ast transformations
 
ESCMAScript 6: Get Ready For The Future. Now
ESCMAScript 6: Get Ready For The Future. NowESCMAScript 6: Get Ready For The Future. Now
ESCMAScript 6: Get Ready For The Future. Now
 

Recently uploaded

OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
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
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
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
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
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
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
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
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
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
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
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
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 

Recently uploaded (20)

OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
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)
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
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
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
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
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
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
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
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
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
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
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 

JavaScript - new features in ECMAScript 6

  • 1. 2013 JavaScript revolution New syntax ( sugar of course! ) & standard library
  • 2. Who I am? Kamil Gałuszka Django / Objective-C / Python World JavaScript is only a hobby (for now) @galuszkak http://solution4future.com
  • 4. JavaScript, JS, ECMAScript, ES ● ECMAScript 3 ( 1999 ) ● ECMAScript 4 ( incompatible with third version 2005 ) ● ECMAScript 5 ( 2009 ) ● ECMAScript 5.1 ( 2011 ) ● TC39 - Committee for Standardization
  • 5. Funny Facts ● ES 5.1 standard == 243 pages ● JavaScript: The Definitive Guide by David Flanagan (6th edition)== 1078 pages ● Draft of standard ES 6.0 == 421 pages ● JavaScript: The Definitive Guide by David Flanagan (7th edition)== ? pages ;)
  • 6. Warm Up false == "0" false === "0" false == "false" null === undefined null == undefined "" === 0 "" == 0 NaN === NaN 6.toString(); " nt" == 0; obj = {x:10, y:20}; delete obj.y; obj.y == null obj.y === null obj.y == undefined obj.y === undefined
  • 7. ES.Next vs ES.Harmony ES.Next === ECMAScript 6 ES 6 is fully compatible with ES5 (strict mode) ES.Harmony in next versions of ECMAScript
  • 8. Block Scope Two new significant keywords: let lock scoped variable const read-only variable. (couldn't be hided by other variable etc.) Typical problem in ES 5 var result = []; for (var length = 10; length--;){ var len = length; result[len] = function(){ return len; } } result[5]() // 0 result[2]() // 0 WHY?
  • 9. Block Scope Solution ES 5 var result = []; for (var length = 10; length--;){ var len = length; result[len] = (function(dlugosc){ return function(){ return dlugosc; } })(len) } result[5]() // 5 result[2]() // 2 use closure
  • 10. Block Scope Solution ES 6 (Cleaner, nicer, AWESOME!) var result = []; for (var length = 10; length--;){ let len = length; result[len] = function(){ return len;} } result[5]() // 5 result[2]() // 2
  • 11. Shorthand Object Literals ES 5 version: ES 6 version: var cat = "Molly"; var cat = "Molly"; var dog = "Rex"; var dog = "Rex"; var pets = { var pets = {cat,dog} 'cat': cat, 'dog': dog, }
  • 12. Shorthand Object Literals function Animal(name){ this.name = name; this.age = 0; } Animal.prototype = { roar(text){ //old version was function roar(text) return `Animal ${this.name} roars:${text}` // template syntax } }
  • 13. Destructing Assignments (extraction from objects, swap variables) var {parse, stringify} = JSON; var [, areaCode, local] = /^(d{3})-(d{3}-d {4})$/.exec("048-032-7777"); [left, right] = [right, left];
  • 14. Destructuring Nested Objects var poets = [{ "name": "T.S. Eliot", "works": [{ "title": "The Love Song", "date": 1915 }, { "title": "Rhapsody", "date": 1917 }] }, { "name": "Ezra Pound", "works": [{ "title": "Ripostes", "date": 1912 }] }];
  • 15. Destructuring Nested Objects ES 5 VERSION ( really hard to remember ) var author = poets[0]['name']; var title = poets[0]['works'][1]['title']; var date = poets[0]['works'][1]['date'];
  • 16. Destructuring Nested Objects ES 6 version (AWESOME !) var [{'name': author, 'works': [, {title, date}]}] = poets; // Select first author and his second book and store it in variables author, title, date `"${title}", by ${author}, was published in ${date}.` // Template creating string from this variables. Rhapsody, by T.S. Eliot, was published in 1917
  • 17. Default parameters // ES 5 function Person(name, age){ this.name = name || "Anonim"; this.age = age || 0; } // ES 6 function Person(name="Anonim", age=0) { this.name = name; this.age = 0; }
  • 18. ...rest parameters js>function f(a, b, ...r) { print(Array.isArray(r)); return r.concat(a, b); } js>f(1, 2) true [1, 2] js>f(1, 2, 3) true [3, 1, 2] js>f(1, 2, 3, 4, 5) true [3, 4, 5, 1, 2]
  • 19. ...spread //ES 5 merging array js> var a = [1, 2] [3, 4, 5] js> var b = [3, 4, 5] [1, 2] js> a = a.concat(b) [1, 2, 3, 4, 5] //ES 6 merging array (AWESOME!) js> var a = [3, 4, 5] [3, 4, 5] js> var b = [1, 2, ...a] [1, 2, 3, 4, 5]
  • 20. Array Comprehensions var arr = [ x for (x of a) if (x.color === ‘blue’) ] var arr = [ square(x) for (x of [1,2,3,4,5]) ] Example by Addy Osmani http://addyosmani.com/blog/a-few-new-thin to-javascript/
  • 21. Modules module Car { // import … // export … } Example by Addy Osmani http://addyosmani.com/blog/a-few-new- things-coming-to-javascript/
  • 22. Modules module Car { // Internal var licensePlateNo = '556-343'; // External export function drive(speed, direction) { console.log('details:', speed, direction); } export module engine{ export function check() { } } }; Example by Addy Osmani http://addyosmani.com/blog/a-few-new- things-coming-to-javascript/
  • 23. Imports (Yes! YES! No requirejs or AMD needed) import "crypto" as crypto; import { encrypt, decrypt } from "crypto"; import { encrypt: enc } from "crypto"; import {drive, engine} from Car; Example by Addy Osmani http://addyosmani.com/blog/a-few-new- things-coming-to-javascript/
  • 24. Classes module widgets { // ... class DropDownButton extends Widget { constructor(attributes) { super(attributes); this.buildUI(); } buildUI() { this.domNode.onclick = function(){ // ... }; } } Example by Addy Osmani http://addyosmani.com/blog/a-few-new- } things-coming-to-javascript/
  • 25. Classes var widgets = (function(global) { function DropDownButton(attributes) { Widget.call(this, attributes); this.buildUI(); } DropDownButton.prototype = Object.create (Widget.prototype, { constructor: { value: DropDownButton }, buildUI: { value: function(e) { this.domNode.onclick = function(e) { // ... } Example by Addy Osmani http://addyosmani.com/blog/a-few-new- }}})})(this); things-coming-to-javascript/
  • 27. Thanks to... Douglas Crockford http://javascript.crockford.com/ Kit Cambridge http://kitcambridge.be/ (His speech: http://www.youtube.com/watch?v=Dt0f2XdvriQ) TC39 Addy Osmani http://addyosmani.com/blog/a-few-new-things- coming-to-javascript/