ECMAScript 5

Damian Wielgosik varjs.comfront-trends.com @varjs

Hey, what is that ECMAScript actually?

let’s create a simplest object ever

var obj = {};

let’s add a property to it

var obj = { foo : 1};

let’s read that property

var obj = { foo : 1};obj.foo; // 1 - this is how we read a value from property "foo" ofthe object "obj"

let’s modify that property

var obj = { foo : 1};obj.foo = 2;obj.foo; // 2

every object except null takes some stuff from Object.prototype

var obj = {};typeof obj.hasOwnProperty; // "function"

var obj = {};obj.hasOwnProperty === Object.prototype.hasOwnProperty; // true

hasOwnProperty is a goodexample of Object.prototype property

is there a way to create an object withoutObject.prototype properties?

Object.create

var obj = Object.create(null); // ECMA 5 way

var obj = Object.create(null); // ECMA 5 waytypeof obj.hasOwnProperty; // "undefined"

Object.create(null)does not use Object.prototype

Object.create(null) - pure object

Object.create(null) you don’t get:•.constructor•.toString•.toLocaleString•.valueOf•.hasOwnProperty•.isPrototypeOf•.propertyIsEnumerable

Object.create(null) -imagine null-like object with allowed extensions

Dude, I want Object.prototype

Object.create - put a prototype you want toinherit from as a first argument

var obj = Object.create({});typeof obj.hasOwnProperty; // "function"obj instanceof Object; // true

Hell yeah!

var obj = Object.create({});obj.__proto__.__proto__ === Object.prototype; // true (ES3way)

btw. there isObject.isPrototypeOf

var obj = Object.create({});Object.prototype.isPrototypeOf(obj); // true same asvar obj = Object.create({});obj.__proto__.__proto__ === Object.prototype; // true (ES3 way)

everything starts withObject.prototype, I’m sure you lied!

var obj = Object.create(null);Object.prototype.isPrototypeOf(obj); // false

isPrototypeOf is even from ECMA 3!

Object.getPrototypeOf is a new stuff however...

var obj = Object.create({});Object.getPrototypeOf(obj) === obj.__proto__; // true

with Object.getPrototypeOf you simply forget aboutnon-standard obj.__proto__

var fn = function() {};fn.prototype.foobar = 1;var obj = new fn();Object.getPrototypeOf(obj) === fn.prototype;

var obj = Object.create({});Object.prototype.isPrototypeOf(obj); // true same asvar obj = Object.create({});Object.getPrototypeOf(Object.getPrototypeOf(obj)) ===Object.prototype; // true// no __proto__!

Ok, you won. Tell me more about Object.create!

if (!Object.create) { Object.create = function (o) { if (arguments.length > 1) { throw new Error(Object.create implementation onlyaccepts the first parameter.); } function F() {}; F.prototype = o; return new F(); };}

wow, we found a polyfill!

inheritance?

var animal = Object.create({ age : null, setAge: function(age) { this.age = age; }});var bird = Object.create(animal);bird.setAge(10);bird.age; // 10

give me analogy, I still remember ECMA3

more analogies?

var Animal = function() {};var obj = new Animal();var obj2 = Object.create(Animal.prototype);obj2.constructor === obj.constructor; // true

not enough, you know that

var obj = {};// does the same job asvar obj2 = Object.create(Object.prototype);

more ECMA5!

Object.defineProperty

how we used to add new properties

var obj = {};obj.myProperty = 100;

how we do it with defineProperty

var obj = {};Object.defineProperty(obj, "foobar", { value : 100, // default: undefined writable : true, // default: false enumerable : true, // default: false configurable : true // default: false});obj.foobar; // 100

writable?!

var obj = {};Object.defineProperty(obj, "foobar", { value : 100, writable : false});obj.foobar; // 100obj.foobar = 200;obj.foobar; // 100

writable: falseforget about changing property’s value

enumerable?!

var obj = {};Object.defineProperty(obj, "foobar", { value : 100, enumerable : false});for (var i in obj) { console.log(obj[i]);}// nothing happened

however...

var obj = {};Object.defineProperty(obj, "foobar", { value : 100, enumerable : true !});for (var i in obj) { console.log(obj[i]);}// „foobar” !

configurable?!

var obj = {};Object.defineProperty(obj, "foobar", { value : 100, configurable : false});delete obj.foobar; // falseobj.foobar; // 100

Summary of descriptors

var obj = {};obj.foobar = 100; same asObject.defineProperty(obj, "foobar", { value : 100, writable : true, configurable : true, enumerable : true});

Object.defineProperty(obj, "foobar", { value : 100}); same asObject.defineProperty(obj, "foobar", { value : 100, writable : false, configurable : false, enumerable : false});

IE8 allows you use it only with DOM objects Summary of descriptors

Oh, there are setters and getters

setters

watch out

getters

Object.defineProperties

var obj = {};Object.defineProperties(obj, { "firstname": { value: "Damian", writable: false }, "nickname": { value: "varjs", writable: false }});obj.firstname; // "Damian"obj.nickname; // "varjs"

Object.defineProperties in other words

Object.defineProperties = function(obj, props) { for (var prop in props) { Object.defineProperty(obj, prop, props[prop]); }};

back to Object.create...

var obj = Object.create({}, { "foobar" : { value: 100, writable: true, enumerable: false }});obj.foobar; // 100

Object.getOwnPropertyDescriptor

Object.getOwnPropertyNames

works for arrays!

var arr = ["a", "b", "c"];Object.getOwnPropertyNames(arr); // ["length", "0", "1", "2"]

works for objects!

var obj = { foo: "bar", barbar: "barbar"};Object.getOwnPropertyNames(obj); // ["foo", "barbar"]

works even with not enumerable properties

var obj = {};Object.defineProperty(obj, "foobar", { enumerable: false});Object.getOwnPropertyNames(obj); // ["foobar"]

Object.keys

var obj = { foo: 1, bar: 2, foobar: 3};Object.keys(obj); // ["foo", "bar", "foobar"]

it returns only enumerables...

var obj = Object.create({}, { "foo" : { value: 100, enumerable: false ! }, "bar" : { value: 200, enumerable: true }});Object.keys(obj); // ["bar"] !

no „foo” since it’s not enumerable

arrays?

var arr = [1, 2, 3];Object.keys(arr); // ["0", "1", "2"]

Polyfill?

if(!Object.keys) { Object.keys = function(o) { if (o !== Object(o)) { throw new TypeError(Object.keys called on non-object); } var ret = []; var p; for (p in o) { if (Object.prototype.hasOwnProperty.call(o, p)) { ret.push(p); } } return ret; };}

Object.seal

var obj = { foo: 1};Object.seal(obj);obj.myEvilProperty = 1337;obj.myEvilProperty; // undefined

It prevents new properties from being added to the sealed object!

var obj = { foo: 1};Object.seal(obj);Object.defineProperty(obj, "foo", { value: "boom" }); // throws a TypeError

Object.seal makes all theproperties not configurable

var obj = { foo: 1};Object.seal(obj);Object.defineProperty(obj, "foo", { get: function() { return "g"; }}); // throws a TypeError

var obj = { foo: 1};Object.seal(obj);delete obj.foo; // does nothingobj.foo; // 1

Object.isSealed

var obj = { foo: 1};Object.seal(obj);Object.isSealed(obj); // true

Object.freeze

well, you can do nothing

Freezes an object: that is, prevents new properties frombeing added to it; prevents existing properties from beingremoved; and prevents existing properties, or theirenumerability, conﬁgurability, or writability, from beingchanged. In essence the object is made effectivelyimmutable. The method returns the object being frozen. - MDN - the best source of knowledge https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/freeze

var obj = { foo: 1};Object.freeze(obj);obj.myEvilProperty = 1337;obj.myEvilProperty; // undefined

var obj = { foo: 1};Object.freeze(obj);obj.foo = 1337;obj.foo; // 1

var obj = { foo: 1};Object.freeze(obj);Object.defineProperty(obj, "foo", { value: "boom" }); // throws a TypeError

var obj = { foo: 1};Object.freeze(obj);delete obj.foo; // false

Object.isFrozen

var obj = { foo: 1};Object.freeze(obj);Object.isFrozen(obj); // true

Object.preventExtensions

Simply, you can’t add new properties

var obj = { foo: 1};Object.preventExtensions(obj);obj.myEvilProperty = 1337;obj.myEvilProperty; // undefined

How it’s different than Object.seal?

You can remove properties!

var obj = { foo: 1};Object.seal(obj);delete obj.foo; // falsevar obj2 = { bar: 2};Object.preventExtensions(obj2);delete obj2.bar; // true

You can change descriptors!

Object.isExtensible

var obj = { foo: 1};Object.preventExtensions(obj);Object.isExtensible(obj); // false

More ECMAScript 5?

Array.prototype.reduceRight Array.prototype.reduce Array.prototype.filter Array.prototype.map Array.prototype.forEach Array.prototype.some Array.prototype.everyArray.prototype.lastIndexOf Array.prototype.indexOf

More?!

Function.prototype.bind

Function.prototype.bind = function(){ var fn = this, args = Array.prototype.slice.call(arguments), object= args.shift(); return function(){ return fn.apply(object, args.concat(Array.prototype.slice.call(arguments))); };};

Date.now()

Date.now() === +new Date()

Date.now(); // 1318362644511

Array.isArray

We used to use...

Object.prototype.toString.call([]) === "[object Array]";

Now we use...

Array.isArray(null); // falseArray.isArray([]); // trueArray.isArray({ length: 1 }); // false

String.prototype.trim

We used to use...

String.prototype.trim = function() { return this.replace(/^s+|s+$/, "");}"my string ".trim(); // "my string"

Now we use...

"my string ".trim(); // "my string"

In ECMAScript 5 we have...

Native JSON!

typeof JSON === "object"; // true

var foo = {};foo.bar = "new property";foo.baz = 3;var JSONfoo = JSON.stringify(foo); // {"bar":"new property","baz":3}var foo = JSON.parse(JSONfoo); // yet again we have an object

strict mode

all of these throw errors"use strict";eval = 17;arguments++;++eval;var obj = { set p(arguments) { } };var eval;try { } catch (arguments) { }function x(eval) { }function arguments() { }var y = function eval() { };var f = new Function("arguments", "use strict; return 17;");"use strict";var fn = function() { return arguments.callee; };fn(); more: https://developer.mozilla.org/en/JavaScript/Strict_mode

http://blog.simonenko.su	2832
http://blog.aijoona.com	648
http://a0.twimg.com	114
http://www.scoop.it	92
http://www.mathieurobin.com	69
http://www.redditmedia.com	67
http://unkei3.tumblr.com	66
http://blog.phatograph.com	62
http://paper.li	46
http://us-w1.rockmelt.com	28
http://stri.sinaapp.com	26
http://feeds.feedburner.com	20
http://ea	9
http://fe.com	8
http://safe.tumblr.com	8
http://areographically.rssing.com	6
http://wakebot.com	6
http://flavors.me	4
http://andrelam.info	3
http://127.0.0.1	2
http://products-3.arktan.com	1
http://tweetedtimes.com	1
http://webcache.googleusercontent.com	1
http://twitter.com	1

ECMAScript 5

by Damian Wielgosik on Dec 13, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

24 Embeds 4,120

Statistics

ECMAScript 5 — Presentation Transcript