JavaScript - new features in ECMAScript 6
Upcoming SlideShare
Loading in...5
×
 

JavaScript - new features in ECMAScript 6

on

  • 11,293 views

 

Statistics

Views

Total Views
11,293
Views on SlideShare
10,900
Embed Views
393

Actions

Likes
6
Downloads
43
Comments
1

4 Embeds 393

http://webmastah.pl 364
https://twitter.com 26
http://www.pinterest.com 2
http://lite.bottlenose.com 1

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

JavaScript - new features in ECMAScript 6 JavaScript - new features in ECMAScript 6 Presentation Transcript

  • 2013JavaScript revolutionNew syntax ( sugar of course! ) & standard library
  • Who I am? Kamil GałuszkaDjango / Objective-C / Python WorldJavaScript 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 Upfalse == "0" false === "0"false == "false" null === undefinednull == undefined "" === 0"" == 0NaN === NaN6.toString();" nt" == 0;obj = {x:10, y:20};delete obj.y;obj.y == null obj.y === nullobj.y == undefined obj.y === undefined
  • ES.Next vs ES.Harmony ES.Next === ECMAScript 6ES 6 is fully compatible with ES5 (strict mode)ES.Harmony in next versions of ECMAScript
  • Block ScopeTwo new significant keywords:let lock scoped variableconst read-only variable. (couldnt 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]() // 0WHY?
  • Block ScopeSolution 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]() // 2use closure
  • Block ScopeSolution 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 LiteralsES 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 Literalsfunction 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 Objectsvar 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 ObjectsES 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 ObjectsES 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 5function Person(name, age){ this.name = name || "Anonim"; this.age = age || 0;}// ES 6function Person(name="Anonim", age=0){ this.name = name; this.age = 0;}
  • ...rest parametersjs>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 arrayjs> 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 Comprehensionsvar 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/
  • Modulesmodule Car { // import … // export …} Example by Addy Osmani http://addyosmani.com/blog/a-few-new- things-coming-to-javascript/
  • Modulesmodule 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/
  • Classesmodule 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/
  • Classesvar 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 Matrixhttp://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)TC39Addy Osmani http://addyosmani.com/blog/a-few-new-things-coming-to-javascript/