Upload
cory-forsyth
View
390
Download
1
Embed Size (px)
Citation preview
JavaScript is not a Language
• JavaScript is an implementation of a language
• ActionScript was another implementation
• The name of the language is: ECMAScript
• JavaScript : ECMAScript :: Rubinius/JRuby : Ruby
JavaScript History• Invented at Netscape by Brendan Eich
• Mocha -> LiveScript -> JavaScript
• 1996 -> Standardization taken by Ecma
• Renamed -> ECMAScript (trademark reasons)
ECMAScript• What is Ecma?
• “Ecma International is an industry association … dedicated to the standardization of Information and Communication Technology”
• Its website slogan is: “Standards@Internet Speed”
Ecma Org Chart• TC = Technical Committee
• TC39 = Technical Committee tasked with ECMAScript ®
• TC39 Official Scope: “Standardization of the general purpose, cross platform, vendor-neutral programming language ECMAScript.”
• Ecma = European Computer Manufacturers Association
ECMAScript
• 1997: ECMA-262: Language Standard
• On github (now): tc39/ecma262
• 1998 ES2
• 1999 ES3
ECMAScript• 2000: ES4
• 2005: ES4
• Mozilla and Macromedia
• Big changes, major leap from ES5
• Divisive, Yahoo & Microsoft opposed
ECMAScript• 2000: ES4
• 2005: ES4
• Mozilla and Macromedia
• Big changes, major leap from ES5
• Divisive, Yahoo & Microsoft opposed
if (true) {var x = 'yes';
}console.log(x); // 'yes'
if (true) {let x = 'yes';
}console.log(x); // ReferenceError
var is hoisted
let is block scope
`let` there be light scope
`let` : temporal dead zone
function() {console.log(x); // ReferenceError// TDZlet x = 'foo';console.log(x); // ‘foo’
}
`let` there be sanity
let funcs = [];for (var i=0; i < 5; i++) { funcs.push(function() { alert(i); });}funcs[0]();
`let` there be sanity
let funcs = [];for (let i=0; i < 5; i++) { funcs.push(function() { alert(i); });}funcs[0]();
a new i for each turn of the loop
`const`const x = 'foo';x = 'bar'; // error
const x = {foo: 'bar'
};x.foo = 'baz'; // ok (!)
can modify properties of a const
cannot reassign const
use Object.freeze, Object.seal to prevent changes to an object
Arrow functions =>var x = function() {} let x = () => {}
• Has own scope
• Has `arguments`
• No implicit return
• “lexical” scope
• No `arguments`
• implicit return*
• *sometimes
Arrow functions =>
this.x = 'yes';let y = () => { "use strict"; console.log(this.x);};y(); // 'yes'
this.x = 'yes';var y = function(){ "use strict"; console.log(this.x);};y(); // TypeError…
`this` is undefined `this` from outer scope
No need for var that = this, `bind` with arrow functions
Arrow functions =>1 arg: no parens, implicit returnlet square = x => x * x;let squares = [1,2,3].map(square);console.log(squares) // [1,4,9]
Arrow functions =>1 arg: no parens, implicit returnlet square = x => x * x;let squares = [1,2,3].map(square);console.log(squares) // [1,4,9]
let add = (a,b) => a + b;add(2,3); // 5
2 args: needs parens, implicit return
Arrow functions =>1 arg: no parens, implicit returnlet square = x => x * x;let squares = [1,2,3].map(square);console.log(squares) // [1,4,9]
let add = (a,b) => a + b;add(2,3); // 5
2 args: needs parens, implicit return
let add = (a,b) => { return a + b };add(2,3); // 5
function body: use {}, explicit return
Arrow functions =>`arguments` from outer scope
let x = function() {return () => {
alert(arguments[0]);};
}let y = x(5);y();
uses x’s arguments
template stringsstring interpolation!
let foo = 'bar';console.log(`foo = ${foo}`);// "foo = bar"
let multiline = `first lineand second line
`);
multiline strings
destructuring assignmentlet obj = {
foo: 'bar',boo: 'baz'
};let {foo, boo} = obj;console.log(foo); // 'bar'console.log(boo); // 'baz'
let colors = ['red', 'green'];let [color1, color2] = colors;console.log(color2); // green
for objects
for arrays
destructuring assignmentmixed
let obj = {foo: 'bar',colors: ['red', 'green']
}let {foo, colors: [color1, color2]} = obj;console.log(foo); // barconsole.log(color2); // green
shorthand object assignment
same property and variable name
let foo = 'bar';
let obj = {foo,boo() {
console.log('baz');}
}
console.log(obj.foo); // barobj.boo(); // baz
function without “: function”
default function paramsfunction doSomething(timeout, options) {
timeout = timeout || 2000;options = options || {repeat: true};var repeat = options.repeat;setTimeout(function(){
console.log(repeat);}, timeout);
}
doSomething(0);// logs 'true' after 2000ms
ES5
default function paramsfunction doSomething(timeout=2000, {repeat}={repeat:true}) {
setTimeout(function(){console.log(repeat);
}, timeout);}
doSomething(0);// logs "true" right away
ES6
function rest paramsfunction sum(first, ...others) {
let sum = first;for (let i of others) {
sum = sum + i;}console.log(sum);
}sum(1, 2, 3, 4); // 10
others is an array of remaining args
spread operator
function sum2(first, ...others) {console.log(sum + Math.max(...others));
}sum2(1, 2, 4, 3); // 5 (=== 1 + 4)
Math.max(…others) is equivalent to Math.max(2,4,3)
classes
class Person { constructor() { this.name = 'Cory'; } sayHi() { console.log(this.name); }}
let p = new Person();p.sayHi(); // Cory
extend and super also work as expected
modules
named export// file a.jsexport let x = ‘yes';
export default {foo: 'bar'
};
// file b.jsimport { x } from 'a';console.log(x); // yes
import stuff from 'a';console.log(stuff.foo); // bar
named import
default export
default import
Other ES2015 features
• Object.is() — fixes == and === • Unicode support • Promises for async support • Symbols — a new primitive • iterators and generators • Map, Set • Object.assign() — aka `extend`, `merge` or `mixin` • String methods — `includes`, `repeat`, `startsWith` • function.name • … many more
Babel support
• Many ES2015 (aka ES6) features and syntax • Some ES2016 (aka ES7) features and syntax • Some things transpiled directly to ES5 • Some supported via Polyfill • Some not supported yet (Proxies, in particular)
The JavaScript Future
• Transpiling • Not just a transitionary thing
• Support matrices • ES is a living standard • Venn Diagram of ES2015 / ES2016 / Browser Support
• As target browsers support features your code uses, turn off transpilation of those features
Cory Forsyth @bantic
Thank you!
• Babel and Babel REPL • Using ES6 Today • ES6 Glossary • ES6+ Compatibility Table • ES6 Overview Slides • ECMA-262 Living Standard on github • Ecma International • ES6 Learning • Aligning Ember With Web Standards • http://bit.ly/bantic-es6 — these slides
Links