WarsawJS Presentation: ECMAScript 7

We talk about JavaScript. Each month in Warsaw, Poland.

Speaker

Krzysztof Syrytczyk

"ECMAScript 7 - Overview"

2015-10-21

@ksyrytczyk

What is ECMAScript?

ECMAScript is a trademarked scripting language specification standardized by Ecma International in ECMA-262 and ISO/IEC 16262. Well-known implementations of the language, such as JavaScript, JScript and ActionScript are widely used for client-side scripting on the Web.

Stages of ECMAScript

Stage 0
Strawman

Stage 1
Proposal

Stage 2
Draft

Stage 3
Candidate

Stage 4
Finished

Examples

Sorry...

#404 - Features not found

Exponential

let a, b a = 2; b = 8; console.log('2 ** 8 is ', a ** b); console.log('Math.pow(2, 8) is ', Math.pow(a, b)); a = 2; b = 16; console.log('2 ** 16 is ', a **= b); a = Infinity; b = -1; console.log('Infinity ** -1 is ', a ** b); a = NaN; b = 0; console.log('NaN ** 0 is ', a ** b); a = 0; b = Infinity; console.log('0 ** Infinity', a ** b); a = 2; b = 1024; console.log('2 ** 1024 is ', a ** b); console.log('Math.pow(2, 1024)', Math.pow(a, b));

Array.includes

let stack, needle; stack = [1, 2, 3]; needle = 2; console.log('2 in [1, 2, 3] ', stack.includes(needle)); stack = [1, 2, NaN]; needle = NaN; console.log('NaN in [1, 2, NaN] ', stack.includes(needle)); stack = [1, 2, -0]; needle = +0; console.log('+0 in [1, 2, -0] ', stack.includes(needle)); stack = [1, [2, 3, 4], 5]; needle = 2; console.log('2 in [1, [2, 3, 4], 5] ', stack.includes(needle)); stack = [1, [2, 3, 4], 5]; needle = [2, 3, 4]; console.log('[2, 3, 4] in [1, [2, 3, 4], 5] ', stack.includes(needle)); stack = ['a', 'b', 'c']; needle = 'c'; console.log(`c in [a, b, c] from 1 position`, stack.includes(needle, 1));

SIMD

let a, b, raw, verbose; a = SIMD.Float32x4(1, 2, 3, 4); b = SIMD.Float32x4(5, 10, 15, 20); raw = SIMD.Float32x4.add(a, b); verbose = [ SIMD.Float32x4.extractLane(raw, 0), SIMD.Float32x4.extractLane(raw, 1), SIMD.Float32x4.extractLane(raw, 2), SIMD.Float32x4.extractLane(raw, 3) ].join(', '); console.log(`[1, 2, 3, 4] + [5, 10, 15, 20] is ${verbose}`); console.log(raw);

Async

function wait(t){ return new Promise((r) => setTimeout(r, t)); } async function asyncFoo(){ console.log("1"); await wait(1000); console.log("2"); } asyncFoo().then(() => console.log("3"));

Object.observe

let obj = { a: 1, b: { c: 'Lorem', d: 'Ipsum' } }; let fnList = { add: () => { obj.prop1 = 12 }, delete: () => { delete obj.b.c }, reconfigure: () => { Object.defineProperty(obj, 'b', { writable: false }) }, setPrototype: () => { Object.setPrototypeOf(obj, {}) }, preventExtensions: () => { Object.seal(obj) } }; Object.observe(obj, (changes) => { console.debug(changes); }); setTimeout(() => { fnList['add'](); }, 0); setTimeout(() => { fnList['delete'](); }, 1000); setTimeout(() => { fnList['reconfigure'](); }, 2000); setTimeout(() => { fnList['setPrototype'](); }, 3000); setTimeout(() => { fnList['preventExtensions'](); }, 4000);

Object.values/Object.entries

let obj = { a: 1, b: 2, c: 3, d: 5 }; console.log(Object.keys(obj)); // ES6 console.log(Object.values(obj)); console.log(Object.entries(obj));

Rest/Spread Properties

let { a, b, ...rest } = { a: 1, b: 2, c: 3, d: { e: NaN } }; console.log(`a is ${a}`); console.log(`b is ${b}`); console.log(`rest is `, rest); console.log(`rest.d.e is ${rest.d.e}`);

Trailing commas

function foo( param1, param2, // Extra comma ) { console.log(param1, param2); } foo( 'foo', 'bar', // Extra comma );

Typed Objects

var Point = new StructType({ x: int32, y: int32 }); var point = new Point({ x: 42, y: 420 }); console.log(point);

Export-from Statements

import {v} from "mod"; export {v} from "mod";

Class/Property Decorators

class Meal { @readonly entree = 'steak'; } let dinner = new Meal(); dinner.entree = 'salmon'; // Cannot assign to read only property 'entree' of [object Object]

Observable

let button = document.getElementById('button'); let clicks = Observable.fromEvent(button, 'click'); let sub = clicks.forEach( function onNext(e) { console.log('clicked', e); }, function onError(e) { console.log('error'); }, function onComplete() { console.log('complete'); } );

trimLeft/trimRight

let a, b, c, str = ' \t\t X \n\n '; a = str; console.log(a, a.length); b = str.trimLeft(); console.log(b, b.length); c = str.trimRight(); console.log(c, c.length);

Class Properties

class App { version = 1.2; title = 'Lorem ipsum'; name = this.title.toLowerCase().replace(' ', '_'); constructor() { console.log(this); } } new App();

padLeft/padRight

let a, b, c, d, str = 'X'; a = str.padLeft(10); console.log(a, a.length); b = str.padRight(10, '*'); console.log(b, b.length); c = str.padLeft(5, '_'); console.log(c, c.length); d = str.padLeft(5).padRight(10); console.log(c, c.length); // Chaining not working :(
  1. Defensible Classes
  2. Relationships
  3. String.prototype.at
  4. Structured Clone
  5. Weak References
  6. Object.getOwnPropertyDescriptors
  7. Set/Map.prototype.toJSON
  8. HTML Attribute Event Handlers
  9. Reflect.isCallable/Reflect.isConstructor
  10. Additional metaproperties
  11. Function Bind Syntax
  12. Do Expressions
  13. RegExp Look-behind

Thanks!

Links

  1. ECMAScript - Current Proposals [github]
  2. Netflix JavaScript Talks - Version 7: The Evolution of JavaScript [youtube]
  3. Kangax - compatibility table [www]
  4. ES7 executor by Piecioshka [www]

Fork me on Github

Fullscreen