ECMAScript 5: The New Parts Level 7

Complete implementations of ECMAScript, Fifth Edition, are now in the best web browsers. Including IE10.

ECMAScript 1999 Third EditionES Fifth EditionES5 –Default –Strict For the short term, work in the intersection of ES3 and ES5/Strict. For the long term, work with ES5/Strict. Avoid ES5/Default.

A better JavaScript.

Lots of Little Things Make the standard conform better to reality. Make the browsers conform better to each other. Where the browsers disagreed, we took license to correct the standard. Interoperability will be improved. If you program well, this should have little impact on you.

Goals of ES5 Don't break the web. Improve the language for the users of the language. Third party security (mashups). Protect stupid people from themselves. No new syntax.

New Syntax Causes syntax errors on IE < 9.

Trailing Commas { "trailing": "comma", } [ "trailing", "comma", ]

Reserved Word Relaxation No reserved word restrictions on property names. var a = { return: true, function: liberty, class: 'classitis', float: 'left' }; a.return = false; a.function(); alert(a.class);

Getters and Setters function make_temperature(temperature) { return { get celsius() { return temperature; }, set celsius(value) { temperature = value; }, get fahrenheit() { return temperature * 9 / ; }, set fahrenheit(value) { temperature = (value - 32) * 5 / 9; } }; }

Multiline string literals var long_line_1 = "This is a \ long line"; // ok var long_line_2 = "This is a \ long line"; // syntax error

Constants Infinity NaN undefined

parseInt parseInt('08') === 8

Regexp Literals /regexp/ now produces new regular expression objects every time.

Replacing Object or Array does not change the behavior of {} or []. As if by the original

JSON JSON.parse(text, reviver) JSON.stringify( value, replacer, space ) json2.js

Brand New Methods Methods can be added without breaking syntax.

Function.prototype.bind if (!Function.prototype.hasOwnProperty('bind')) { Function.prototype.bind = function (object) { var slice = Array.prototype.slice, func = this, args = slice.call(arguments, 1); return function () { return func.apply(object, args.concat( slice.call(arguments, 0))); }; }

String.prototype.trim if (!String.prototype.hasOwnProperty('trim')) { String.prototype.trim = (function (re) { return function () { return this.replace(re, "$1"); }; }(/^\s*(\S*(\s+\S+)*)\s*$/)); }

Array.prototype.every if (!Array.prototype.hasOwnProperty('every')) { Array.prototype.every = function (fun, thisp) { var i, length = this.length; for (i = 0; i < length; i += 1) { if (this.hasOwnProperty(i) && !fun.call(thisp, this[i], i, this)) { return false; } return true; }; }

Array.prototype.filter if (!Array.prototype.hasOwnProperty('filter')) { Array.prototype.filter = function (fun, thisp) { var i, length = this.length, result = [], value; for (i = 0; i < length; i += 1) { if (this.hasOwnProperty(i)) { value = this[i]; if (fun.call(thisp, value, i, this)) { result.push(value); } return result; }; }

Array.prototype.forEach if (!Array.prototype.hasOwnProperty('forEach')) { Array.prototype.forEach = function (fun, thisp) { var i, length = this.length; for (i = 0; i < length; i += 1) { if (this.hasOwnProperty(i)) { fun.call(thisp, this[i], i, this); } }; }

Array.prototype.indexOf if (!Array.prototype.hasOwnProperty('indexOf')) { Array.prototype.indexOf = function (searchElement, fromIndex) { var i = fromIndex || 0, length = this.length; while (i < length) { if (this.hasOwnProperty(i) && this[i] === searchElement) { return i; } i += 1; } return -1; }; }

Array.prototype.lastIndexOf if (!Array.prototype.hasOwnProperty('lastIndexOf')) { Array.prototype.lastIndexOf = function (searchElement, fromIndex) { var i = fromIndex; if (typeof i !== 'number') { i = this.length - 1; } while (i >= 0) { if (this.hasOwnProperty(i) && this[i] === searchElement) { return i; } i -= 1; } return -1; }; }

Array.prototype.map if (!Array.prototype.hasOwnProperty('map')) { Array.prototype.map = function (fun, thisp) { var i, length = this.length, result = []; for (i = 0; i < length; i += 1) { if (this.hasOwnProperty(i)) { result[i] = fun.call(thisp, this[i], i, this); } return result; }; }

Array.prototype.reduce if (!Array.prototype.hasOwnProperty('reduce')) { Array.prototype.reduce = function (fun, initialValue) { var i, length = this.length; for (i = 0; i < length; i += 1) { if (this.hasOwnProperty(i)) { initialValue = fun.call(undefined, initialValue, this[i], i, this); } return initialValue; }; }

Array.prototype.reduceRight if (!Array.prototype.hasOwnProperty('reduceRight')) { Array.prototype.reduceRight = function (fun, initialValue) { var i = this.length - 1; while (i >= 0) { if (this.hasOwnProperty(i)) { initialValue = fun.call(undefined, initialValue, this[i], I, this); } i -= 1; } return initialValue; }; }

Array.prototype.some if (!Array.prototype.hasOwnProperty('some')) { Array.prototype.some = function (fun, thisp) { var i, length = this.length; for (i = 0; i < length; i += 1) { if (this.hasOwnProperty(i) && fun.call(thisp, this[i], i, this)) { return true; } return false; }; }

Date.now() if (!Date.hasOwnProperty('now')) { Date.now = function () { return (new Date()).getTime(); }; }

Date.prototype.toISOString if (!Date.prototype.hasOwnProperty('toISOString')) { Date.prototype.toISOString = function () { function f(n) { return n < 10 ? '0' + n : n; } return this.getUTCFullYear() + '-' + f(this.getUTCMonth() + 1) + '-' + f(this.getUTCDate()) + 'T' + f(this.getUTCHours()) + ':' + f(this.getUTCMinutes()) + ':' + f(this.getUTCSeconds()) + 'Z'; }; }

Date new Date( string ) and Date.parse( string ) will try ISO format first.

Array.isArray if (!Array.hasOwnProperty('isArray')) { Array.isArray = function (value) { return Object.prototype.toString.apply(value) === '[object Array]'; }; }

Object.keys if (!Object.hasOwnProperty('keys')) { Object.keys = function (object) { var name, result = []; for (name in object) { if (Object.prototype.hasOwnProperty.call(object, name)) { result.push(name); } return result; }; }

Object.create if (!Object.hasOwnProperty('create')) { Object.create = function (object, properties) { var result; function F() {} F.prototype = object; result = new F(); if (properties !== undefined) { Object.defineOwnProperties(object, properties); } return result; }; }

Meta Object API Control over the attributes of the properties of the objects.

Two kinds of properties: Data properties Accessor properties

Attributes A property is a named collection of attributes. value:any JavaScript value writeable:boolean enumerable:boolean configurable:boolean get:function () {… return value;} set:function (value) { … }

Data Property var my_object = {foo: bar}; var my_object = Object.create(Object.prototype); Object.defineProperty(my_object, 'foo', { value: bar, writeable: true, enumerable: true, configurable: true });

Accessor property Object.defineProperty(my_object, 'inch', { get: function () { return this.mm / 25.4; }, set: function (value) { this.mm = value * 25.4; }, enumerable: true });

Meta Object API Object.defineProperty( object, key, descriptor ) Object.defineProperties( object, object_of_descriptors ) Object.getOwnPropertyDescriptor( object, key )

Object.getOwnPropertyNames( object ) Object.getPrototypeOf( object ) Best not to use these. Secure frameworks may ban their use.

function replace_prototype(object, prototype) { var result = Object.create(prototype); Object.getOwnPropertyNames(object).forEach(function (key) { Object.defineProperty(result, key, Object.getOwnPropertyDescriptor( object, key)); }); return result; }

Object Extensibility Object.preventExtentions( object ) Object.seal( object ) Object.freeze( object ) Object.isExtensible( object ) Object.isSealed( object ) Object.isFrozen( object )

Strict Mode The most important new feature in ECMAScript, Fifth Edition.

Strict Mode Backward compatible pragma. 'use strict'; File form. First statement in a file. (avoid because of Steve Souders) Function form. First statement in a function.

New Reserved Words implements interface let package private protected public static yield

Strict Mode No more implied global variables within functions. this is not bound to the global object by function form. apply and call do not default to the global object. No with statement. Setting a writeable: false property will throw. Deleting a configurable: false property will throw. Restrictions on eval. eval and arguments are reserved. arguments not linked to parameters. No more arguments.caller or arguments.callee. No more octal literals. Duplicate names in an object literal or function parameters are a syntax error.

Forgetting to use the new prefix in strict mode will now throw an exception, not silently clobber the global object. Death Before Confusion!

Strict Mode addEventListener(…); //error window.addEventListener(…); //ok

Strict Mode There are no methods for determining if strict mode is on, but it is easy to make your own. function in_strict_mode() { return (function () { return !this; }()); } function strict_mode_implemented() { return (function () { 'use strict'; return !this; }()); }

MASH UPS

Safe JavaScript Subsets The design of Strict Mode was informed by safe subsets like Caja & ADsafe. Caja. ADsafe.