Rubyist’s Quick Guide to ECMAScript 5 Kuba Suder @psionides • jsuder • http://psionides.eu • Lunar Logic 

ECMA-what?... 

ECMA-what?... • What you know as JavaScript, as an ECMA standard • “an unwanted trade name that sounds like a skin disease” – Brendan Eich 

ECMA-what?... • What you know as JavaScript, as an ECMA standard • “an unwanted trade name that sounds like a skin disease” – Brendan Eich • ECMAScript 3 • Last version before ES5 – released in 1999 (!) 

ECMA-what?... • What you know as JavaScript, as an ECMA standard • “an unwanted trade name that sounds like a skin disease” – Brendan Eich • ECMAScript 3 • Last version before ES5 – released in 1999 (!) • ECMAScript 4 • Dark ages: developed for 10 years, then abandoned 

ECMA-what?... • What you know as JavaScript, as an ECMA standard • “an unwanted trade name that sounds like a skin disease” – Brendan Eich • ECMAScript 3 • Last version before ES5 – released in 1999 (!) • ECMAScript 4 • Dark ages: developed for 10 years, then abandoned • ECMAScript 5 • Minor update to ES3 to unify the various dialects and engines (2009) 

ECMA-what?... • What you know as JavaScript, as an ECMA standard • “an unwanted trade name that sounds like a skin disease” – Brendan Eich • ECMAScript 3 • Last version before ES5 – released in 1999 (!) • ECMAScript 4 • Dark ages: developed for 10 years, then abandoned • ECMAScript 5 • Minor update to ES3 to unify the various dialects and engines (2009) • ECMAScript 6 / Harmony • The future – lets, arrows, classes and all the other cool stuff 

ECMAScript 5 • Subset of ES4 – the least controversial parts • Extensions for: • Array • Date • Function • Object • String • Safe JSON parsing • Extended object properties • Strict mode 

Array extensions • Array.isArray • map • filter • reduce, reduceRight • every • some • forEach • indexOf, lastIndexOf 

Array.isArray Array.isArray([]); // => true Array.isArray(7); // => false • old way: x instanceof Array • old (proper) way, works across frames: Object.prototype.toString.call(x) === ‘[object Array]’ 

Array#map ['lunar', 'logic', 'polska'].map(function(el, i, arr) { return el[0].toUpperCase(); }); // => [‘L’, ‘L’, ‘P’] = Enumerable#map in Ruby 

Array#filter ['Ruby', 'Java', 'Perl', 'PHP'].filter(function(el, i, arr) { return el.match(/r/i); }); // => [“Ruby”, “Perl”] • unfortunately there’s no “Enumerable#detect”... = Enumerable#select in Ruby 

Array#reduce var a = [4, 8, 15, 16, 23, 42]; a.reduce(function(sum, el, i, arr) { return sum + el }); // => 108 a.reduce(function(sum, el) { return sum + el }, 9000); // => 9108 • there’s also Array#reduceRight and it does exactly what you think = Enumerable#inject in Ruby 

Array#every var countries = ['Poland', 'Portugal', 'Peru']; var startsWithP = function(el, i, arr) { return el.match(/^P/); }; countries.every(startsWithP); // => true countries.push("India"); countries.every(startsWithP); // => false = Enumerable#all? in Ruby 

Array#some var names = ['Marcin', 'Łukasz', 'Michał']; var endsWithA = function(el, i, arr) { return el.match(/a$/); }; names.some(endsWithA); // => false names.push("Ania"); names.some(endsWithA); // => true = Enumerable#any? in Ruby 

Array#forEach ['one', 'two', 'three'].forEach(function(el, i, arr) { console.log(i + ": " + el); }); // 0: one // 1: two // 2: three • problem: no “break” instruction • use Array#every or Array#some and return false/true to stop • or use exceptions = Array#each in Ruby 

Array#indexOf, #lastIndexOf var list = ['a', 'b', 'c', 'd', 'a', 'b', 'c']; list.indexOf('c'); // => 2 list.indexOf('c', 3); // => 6 list.lastIndexOf('c'); // => 6 • yes, this really didn’t exist before ES5 (including IE8!) = Array#index, #rindex in Ruby 

Other extensions • Date.now • Date#toISOString • String#trim • String#trimLeft • String#trimRight • Function#bind 

Date.now var d = Date.now(); // => 1365692504996 var date = new Date(d); date.toISOString(); // => "2013-04-11T15:01:44.996Z" = Time.now.to_i in Ruby 

String#trim, #trimLeft, #trimRight var str = " text "; str.trim(); // => "text" str.trimLeft(); // => "text " str.trimRight(); // => " text" = String#strip, #lstrip, #rstrip in Ruby 

Function#bind var a = { city: "Krakow", printCity: function() { console.log(this.city) } }; a.printCity(); // => "Krakow" var printCity = a.printCity; printCity(); // => undefined (this == window) var boundPrint = a.printCity.bind(a); boundPrint(); // => "Krakow" (this == a) = $.proxy, _.bind 

JSON parsing var json = ‘{"a":1,"b":{"c":2}}’; var obj = JSON.parse(json); // => { a: 1, b: { c: 2 }} JSON.stringify(obj); // => "{\"a\":1,\"b\":{\"c\":2}}" • you could use eval, but eval is evil (just ask Crockford) • polyfill: json2.js (by Crockford) • included in IE8 (!) 

Object extensions • Getters and setters • Protecting objects • Defining properties • Object introspection • Prototypal inheritance 

Getters & setters var obj = { get v() { return 42 }, set v(x) { this.x = x } }; obj.v = 5; console.log(obj.v); // => 42 

Protecting objects • Object.preventExtensions(o) • New fields can’t be added • Object.isExtensible(o) === false • Object.seal(o) • Fields can’t be added or deleted • Object.isSealed(o) === true • Object.freeze(o) • Fields can’t be added, deleted or modified • Object.isFrozen(o) === true 

Defining object properties var obj = {}; Object.defineProperty(obj, 'x', { value: 5, writable: false }); obj.x; // => 5 obj.x = 1; obj.x; // => still 5 • other options: • get, set – specifies getter/setter • enumerable – tells if the field is listed when iterating with “for i in ...” • configurable – if the field can be deleted or its properties changed 

Object introspection var obj = { x: 1 }; Object.keys(obj); Object.getOwnPropertyNames(obj); // => ["x"] (like Hash#keys) Object.getOwnPropertyDescriptor(obj, 'x'); // => { value: 1, writable: true, enumerable: true, // configurable: true } var a = []; Object.getPrototypeOf(a); // => Array.prototype 

Prototypal inheritance var Fruit = { color: ‘red’ }; var apple = Object.create(Fruit); apple.__proto__; // => Fruit apple.color; // => ‘red’ • objects inheriting from objects, instead of classes inheriting from classes • was possible before, but required creating an anonymous class 

Strict mode “use strict”; // yes, it’s just a string bug = 0; // => ReferenceError: bug is not defined • like a built-in JSLint • throws errors instead of ignoring problems • missing in older browsers (IE <10, FF <4) 

Browser support • Full support in: • IE 9 (strict mode in 10) • FF 4 • Chrome 7 (strict mode in 13) • Opera 12 • Safari 5.1 (bind in 5.1.4) • ... and NodeJS • Compatibility table: http://kangax.github.com/es5-compat-table 

Shims for older browsers • http://augmentjs.com • https://github.com/ddrcode/ddr-ecma5 • https://github.com/kriskowal/es5-shim • only library extensions, not language extensions (e.g. getters/setters) 

What’s the point? • more natural and readable (for a Rubyist): list.map(...).forEach(...) vs. _.each(_.map(list, ...), ...) • doesn’t require libraries (except the shim, for now) • future-proof (should still work like this in 2020) • potentially faster if implemented natively 

let es6 = (es5) => es5 + 1 Coming to a browser near you in 2013-14 (?)