Say Hello to ECMAScript 5

Say hello to
ECMAScript 5

by @kangax

What is ECMAScript?
• Originated as JavaScript (actually, Mocha)
• Standardized by ECMA International
• JavaScript, JScript, ActionScript
• 5th edition in Dec ‘09

ECMAScript 5
New meta-level control

Additions to language API

Refinements, bug fixes

Strict mode


{
foo: "string",
bar: 3.14,
"baz": true,
5: [1,2,3]
}


{
foo: "string",
bar: 3.14,
"baz": true,
5: [1,2,3]
}

[[Writable]]
[[Enumerable]]
[[Configurable]]


[[Writable]] [[Enumerable]] [[Configurable]]

var object = { key: "value" };

// when writable
object.property = "new value";
object.property; // "new value"

// not writable
object.property = "new value";
object.property; // "value"




var keys = [];
for (var prop in object) {
keys.push(prop);
}

keys;
// enumerable — ["key"]
// non-enumerable — []




delete object.key;

// configurable
object.key; // undefined

// non-configurable
object.key; // "value"

Property descriptors to the rescue

Object.defineProperty
Object.defineProperties
Object.create


Object.defineProperty({}, "key", {

value: "foo bar baz",

writable: true,
enumerable: true,
configurable: true
});




writable: true,
enumerable: true,
configurable: true
}); Property descriptor




writable: true,
enumerable: true,
configurable: true
});

{ key: "foo bar baz" }


Object.defineProperties({}, {
key1: {
enumerable: true
},
key2: {
configurable: true
}
});


key1: {
enumerable: true
}, Property descriptors
key2: {
value: "trololololo",
configurable: true
}
});


key1: {
enumerable: true
},
key2: {
value: "trololololo",
configurable: true
}
});


key1: {
value: "foo bar baz"
},
key2: {
value: "trololololo"
}
});
{
key1: "foo bar baz",
key2: "trololololo"
}


Object.create(parentObject, {
key1: {
enumerable: true
},
key2: {
configurable: true
}
});


key1: {
enumerable: true
}, Property descriptors
key2: {
configurable: true
}
});


key1: {
value: "foo bar baz"
},
...
});
[[Prototype]]
{
key1: "foo bar baz",
key2: "trololololo"
}

Examples

Object.defineProperty(Object.prototype,
"clone", {
value: function(props){
return Object.create(this, props);
}
}
);

Examples

var john = {
name: "John",
skill: "Javascript"
};

var mike = john.clone({
name: { value: "Mike" }
});

mike.name; // "Mike"
mike.skill; // "Javascript"

Examples

var john = {
name: "John",
skill: "Javascript"
};

});

mike.name; // "Mike"
mike.skill; // "Javascript" (inherited)

Examples

var john = {
name: "John",
skill: "Javascript"
};

});

for (var prop in mike) {
console.log(prop); // "name" and "skill"
}


1) String.prototype.trim

" hello world ".trim(); // "hello world"

var person = {
name: " Joe ",
trim: String.prototype.trim,
toString: function(){
return this.name;
}
};

person.trim(); "Joe"


2) Array.prototype extensions

[1,2,3].map(function(value){
return value * 2;
});

// [2,4,6]



[1,2,3,4,5,6].filter(function(value){
return value > 3;
});

// [4,5,6]



[1,2,3,4,5,3].indexOf(3); // 2
[1,2,3,4,5,3].lastIndexOf(3); // 5



[1,2,3,4].reduce(function(prev, curr){
return prev + curr;
});

// 10

1+2 -> 3
3+3 -> 6
6+4 -> 10



[1,2,3,4].reduce(function(prev, curr){
return prev + curr;
});

// 10

1+2 → 3
3+3 → 6
6+4 → 10



function sum(){
return this.reduce(function(prev, curr){
return prev + curr;
});
}
Object.defineProperty(
Array.prototype, "sum", { value: sum });

[1,2,3].sum(); // 6
[1,2,3,4,5].sum() // 15


1) undefined, NaN, Infinity are non-writable

if (undefined == foo){
foo = { ... };
}


1) undefined, NaN, Infinity are non-writable

if (undefined = foo){
foo = { ... };
}

undefined; // foo (!)

if (undefined == bar) {
// might never be created
bar = { ... };
}


2) reserved words as property names

var myApp = {
export: [module1, module2]
};

var chevy = new Car();
chevy.class = "classic";



var myApp = {
export: [module1, module2] // boom!
};
ES3
chevy.class = "classic"; // boom!



var myApp = {
export: [module1, module2] // OK!
};
ES5
chevy.class = "classic"; // OK!


3) Tamper-proof built-ins

function Array(){
alert("Stole your data!");
}

var privateData = [...];

// Vulnerable browsers — e.g. FF2


3) Tamper-proof built-ins

function Array(){
alert("Stole your data!");
}

var privateData = [...];

ES3 Data stolen ES5 Built-in function is called

Strict mode

“use strict”

Strict mode
styles = {
bodyColor: “red”,
bodyBgColor: “green”,
bodyColor: “yellow”
}
setTimeout(function(x, eval, x){
with(document) {
if (!body) {
setTimeout(arguments.callee, 10);
}
else {
body.style.color = styles.bodyColor;
}
}
}, 10);

Strict mode
styles = {
color: “red”,
bgColor: “green”,
Undeclared assignment
color: “yellow”
}
with(document) {
if (!body) {
}
else {
body.style.color = styles.color;
}
}
}, 10);

Strict mode
styles = {
color: “red”, Repeating property
names
color: “yellow”
}
with(document) {
if (!body) {
}
else {
}
}
}, 10);

Strict mode
styles = {
color: “red”,
eval as argument name
color: “yellow”
}
with(document) {
if (!body) {
}
else {
}
}
}, 10);

Strict mode
styles = {
color: “red”, repeating argument
names
color: “yellow”
}
with(document) {
if (!body) {
}
else {
}
}
}, 10);

Strict mode
styles = {
color: “red”,
with statement
color: “yellow”
}
with(document) {
if (!body) {
}
else {
}
}
}, 10);

Strict mode
styles = {
color: “red”,
arguments.callee
color: “yellow”
}
with(document) {
if (!body) {
}
else {
}
}
}, 10);

Browser support

http://kangax.github.com/es5-compat-table/

References

ECMA-262 5th ed. specification
http://www.ecma-international.org/publications/standards/Ecma-262.htm

ECMA-262 3rd ed. unofficial HTML version
http://bclary.com/2004/11/07/

es-discuss mailing lists
http://mail.mozilla.org/listinfo/es-discuss/
http://mail.mozilla.org/listinfo/es5-discuss/

comp.lang.javascript (here be dragons)
http://groups.google.com/group/comp.lang.javascript/

Say Hello to ECMAScript 5

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (13)

Similar to Say Hello to ECMAScript 5

Similar to Say Hello to ECMAScript 5 (20)

More from Juriy Zaytsev

More from Juriy Zaytsev (6)

Say Hello to ECMAScript 5

Editor's Notes