ecmascript 5
DESCRIPTION
The new ECMAScript 5 standard brings on the table some very nice features you can use right away in the modern browsers. The presentation is a big overview of them.TRANSCRIPT
![Page 1: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/1.jpg)
ECMAScript 5
![Page 2: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/2.jpg)
Damian Wielgosikvarjs.com
front-trends.com@varjs
![Page 3: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/3.jpg)
Hey, what is that ECMAScript actually?
![Page 4: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/4.jpg)
let’s create a simplest object ever
![Page 5: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/5.jpg)
var obj = {};
![Page 6: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/6.jpg)
let’s add a property to it
![Page 7: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/7.jpg)
var obj = { foo : 1};
![Page 8: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/8.jpg)
let’s read that property
![Page 9: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/9.jpg)
var obj = { foo : 1};
obj.foo; // 1 - this is how we read a value from property "foo" of the object "obj"
![Page 10: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/10.jpg)
let’s modify that property
![Page 11: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/11.jpg)
var obj = { foo : 1};
obj.foo = 2;obj.foo; // 2
![Page 12: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/12.jpg)
every object except null takes some stuff from
Object.prototype
![Page 13: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/13.jpg)
var obj = {};typeof obj.hasOwnProperty; // "function"
![Page 14: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/14.jpg)
var obj = {};obj.hasOwnProperty === Object.prototype.hasOwnProperty; // true
![Page 15: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/15.jpg)
hasOwnProperty is a good example of Object.prototype
property
![Page 16: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/16.jpg)
is there a way to create an object without
Object.prototype properties?
![Page 17: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/17.jpg)
Object.create
![Page 18: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/18.jpg)
var obj = Object.create(null); // ECMA 5 way
![Page 19: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/19.jpg)
var obj = Object.create(null); // ECMA 5 waytypeof obj.hasOwnProperty; // "undefined"
![Page 20: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/20.jpg)
Object.create(null) does not use Object.prototype
![Page 21: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/21.jpg)
Object.create(null) - pure object
![Page 22: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/22.jpg)
Object.create(null) you don’t get:
•.constructor•.toString•.toLocaleString•.valueOf•.hasOwnProperty•.isPrototypeOf•.propertyIsEnumerable
![Page 23: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/23.jpg)
Object.create(null) - imagine null-like object with
allowed extensions
![Page 24: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/24.jpg)
Dude, I want Object.prototype
![Page 25: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/25.jpg)
Object.create - put a prototype you want to
inherit from as a first argument
![Page 26: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/26.jpg)
var obj = Object.create({});typeof obj.hasOwnProperty; // "function"obj instanceof Object; // true
![Page 27: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/27.jpg)
Hell yeah!
![Page 28: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/28.jpg)
var obj = Object.create({});obj.__proto__.__proto__ === Object.prototype; // true (ES3 way)
![Page 29: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/29.jpg)
btw. there is Object.isPrototypeOf
![Page 30: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/30.jpg)
var obj = Object.create({});Object.prototype.isPrototypeOf(obj); // true
var obj = Object.create({});obj.__proto__.__proto__ === Object.prototype; // true (ES3 way)
same as
![Page 31: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/31.jpg)
everything starts with Object.prototype, I’m sure you
lied!
![Page 32: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/32.jpg)
var obj = Object.create(null);Object.prototype.isPrototypeOf(obj); // false
![Page 33: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/33.jpg)
isPrototypeOf is even from ECMA 3!
![Page 34: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/34.jpg)
Object.getPrototypeOf is a new stuff however...
![Page 35: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/35.jpg)
var obj = Object.create({});Object.getPrototypeOf(obj) === obj.__proto__; // true
![Page 36: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/36.jpg)
with Object.getPrototypeOf you simply forget about
non-standard obj.__proto__
![Page 37: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/37.jpg)
var fn = function() {};fn.prototype.foobar = 1;
var obj = new fn();Object.getPrototypeOf(obj) === fn.prototype;
![Page 38: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/38.jpg)
var obj = Object.create({});Object.prototype.isPrototypeOf(obj); // true
var obj = Object.create({});Object.getPrototypeOf(Object.getPrototypeOf(obj)) === Object.prototype; // true// no __proto__!
same as
![Page 39: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/39.jpg)
Ok, you won. Tell me more about Object.create!
![Page 40: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/40.jpg)
if (!Object.create) { Object.create = function (o) { if (arguments.length > 1) { throw new Error('Object.create implementation only accepts the first parameter.'); } function F() {}; F.prototype = o; return new F(); }; }
![Page 41: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/41.jpg)
wow, we found a polyfill!
![Page 42: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/42.jpg)
inheritance?
![Page 43: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/43.jpg)
var animal = Object.create({ age : null, setAge: function(age) { this.age = age; }});
var bird = Object.create(animal);bird.setAge(10);bird.age; // 10
![Page 44: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/44.jpg)
give me analogy, I still remember ECMA3
![Page 45: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/45.jpg)
var Animal = function() {};Animal.prototype = { age : null, setAge: function(age) { this.age = age; }};
var Bird = function() {};Bird.prototype = new Animal();
var bird = new Bird();bird.setAge(10);bird.age; // 10
![Page 46: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/46.jpg)
more analogies?
![Page 47: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/47.jpg)
var Animal = function() {}; var obj = new Animal();
var obj2 = Object.create(Animal.prototype);
obj2.constructor === obj.constructor; // true
![Page 48: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/48.jpg)
not enough, you know that
![Page 49: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/49.jpg)
var obj = {};// does the same job asvar obj2 = Object.create(Object.prototype);
![Page 50: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/50.jpg)
more ECMA5!
![Page 51: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/51.jpg)
Object.defineProperty
![Page 52: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/52.jpg)
how we used to add new properties
![Page 53: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/53.jpg)
var obj = {};obj.myProperty = 100;
![Page 54: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/54.jpg)
how we do it with defineProperty
![Page 55: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/55.jpg)
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
![Page 56: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/56.jpg)
writable?!
![Page 57: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/57.jpg)
var obj = {};Object.defineProperty(obj, "foobar", { value : 100, writable : false});
obj.foobar; // 100obj.foobar = 200;obj.foobar; // 100
![Page 58: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/58.jpg)
writable: falseforget about changing
property’s value
![Page 59: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/59.jpg)
enumerable?!
![Page 60: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/60.jpg)
var obj = {};Object.defineProperty(obj, "foobar", { value : 100, enumerable : false});
for (var i in obj) { console.log(obj[i]);}// nothing happened
![Page 61: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/61.jpg)
however...
![Page 62: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/62.jpg)
var obj = {};Object.defineProperty(obj, "foobar", { value : 100, enumerable : true !});
for (var i in obj) { console.log(obj[i]);}// „foobar” !
![Page 63: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/63.jpg)
configurable?!
![Page 64: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/64.jpg)
var obj = {};Object.defineProperty(obj, "foobar", { value : 100, configurable : false});
delete obj.foobar; // falseobj.foobar; // 100
![Page 65: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/65.jpg)
var obj = {};Object.defineProperty(obj, "foobar", { value : 100, configurable : false}); // it’s ok, we just defined a foobar property not to be configurable
Object.defineProperty(obj, "foobar", { configurable : true}); // throws a TypeError
Object.defineProperty(obj, "foobar", { writable : true}); // throws a TypeError
Object.defineProperty(obj, "foobar", { enumerable : true}); // throws a TypeError
![Page 66: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/66.jpg)
Summary of descriptors
![Page 67: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/67.jpg)
var obj = {}; obj.foobar = 100;
Object.defineProperty(obj, "foobar", { value : 100, writable : true, configurable : true, enumerable : true});
same as
![Page 68: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/68.jpg)
Object.defineProperty(obj, "foobar", { value : 100});
Object.defineProperty(obj, "foobar", { value : 100, writable : false, configurable : false, enumerable : false});
same as
![Page 69: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/69.jpg)
Summary of descriptors
IE8 allows you use it only with DOM objects
![Page 70: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/70.jpg)
Oh, there are setters and getters
![Page 71: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/71.jpg)
setters
![Page 72: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/72.jpg)
var rect = { x: 5, y: 2};
Object.defineProperty(rect, "area", { set: function(value) { throw new Error("Cannot set a value"); }, get: function() { return this.x * this.y; }});
rect.area = -21; // Error: Cannot set a value
![Page 73: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/73.jpg)
watch out
![Page 74: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/74.jpg)
var rect = { x: 5, y: 2};
Object.defineProperty(rect, "area", { set: function(value) { throw new Error("Cannot set a value"); }, get: function() { return this.x * this.y; }, writable: false // TypeError: Invalid property. A property cannot both have accessors and be writable or have a value: #<Object>});
![Page 75: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/75.jpg)
getters
![Page 76: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/76.jpg)
var rect = { x: 5, y: 2};
Object.defineProperty(rect, "area", { set: function(value) { throw new Error("Cannot set a value"); }, get: function() { return this.x * this.y; }});
rect.area; // 10 (5 * 2 = 10)
![Page 77: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/77.jpg)
Object.defineProperties
![Page 78: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/78.jpg)
var obj = {};
Object.defineProperties(obj, { "firstname": { value: "Damian", writable: false }, "nickname": { value: "varjs", writable: false }});
obj.firstname; // "Damian"obj.nickname; // "varjs"
![Page 79: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/79.jpg)
Object.defineProperties in other words
![Page 80: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/80.jpg)
Object.defineProperties = function(obj, props) { for (var prop in props) { Object.defineProperty(obj, prop, props[prop]); }};
![Page 81: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/81.jpg)
back to Object.create...
![Page 82: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/82.jpg)
var obj = Object.create({}, { "foobar" : { value: 100, writable: true, enumerable: false }});
obj.foobar; // 100
![Page 83: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/83.jpg)
Object.getOwnPropertyDescriptor
![Page 84: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/84.jpg)
var obj = {};
Object.defineProperties(obj, { "firstname": { value: "Damian", writable: true }, "nickname": { value: "varjs", writable: true }});
obj.firstname; // "Damian"obj.nickname; // "varjs"
Object.getOwnPropertyDescriptor(obj, "firstname"); // Object { value="Damian", writable=true, enumerable=false, configurable=false}
![Page 85: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/85.jpg)
Object.getOwnPropertyNames
![Page 86: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/86.jpg)
works for arrays!
![Page 87: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/87.jpg)
var arr = ["a", "b", "c"]; Object.getOwnPropertyNames(arr); // ["length", "0", "1", "2"]
![Page 88: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/88.jpg)
works for objects!
![Page 89: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/89.jpg)
var obj = { foo: "bar", barbar: "barbar"};
Object.getOwnPropertyNames(obj); // ["foo", "barbar"]
![Page 90: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/90.jpg)
works even with not enumerable properties
![Page 91: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/91.jpg)
var obj = {};Object.defineProperty(obj, "foobar", { enumerable: false});
Object.getOwnPropertyNames(obj); // ["foobar"]
![Page 92: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/92.jpg)
Object.keys
![Page 93: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/93.jpg)
var obj = { foo: 1, bar: 2, foobar: 3};
Object.keys(obj); // ["foo", "bar", "foobar"]
![Page 94: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/94.jpg)
it returns only enumerables...
![Page 95: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/95.jpg)
var obj = Object.create({}, { "foo" : { value: 100, enumerable: false ! }, "bar" : { value: 200, enumerable: true }});
Object.keys(obj); // ["bar"] !
![Page 96: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/96.jpg)
no „foo” since it’s not enumerable
![Page 97: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/97.jpg)
arrays?
![Page 98: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/98.jpg)
var arr = [1, 2, 3];Object.keys(arr); // ["0", "1", "2"]
![Page 99: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/99.jpg)
Polyfill?
![Page 100: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/100.jpg)
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; };}
![Page 101: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/101.jpg)
Object.seal
![Page 102: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/102.jpg)
var obj = { foo: 1};
Object.seal(obj);obj.myEvilProperty = 1337;obj.myEvilProperty; // undefined
![Page 103: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/103.jpg)
It prevents new properties from being added to the sealed
object!
![Page 104: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/104.jpg)
var obj = { foo: 1};
Object.seal(obj);Object.defineProperty(obj, "foo", { value: "boom" }); // throws a TypeError
![Page 105: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/105.jpg)
Object.seal makes all the properties not configurable
![Page 106: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/106.jpg)
var obj = { foo: 1};
Object.seal(obj);Object.defineProperty(obj, "foo", { get: function() { return "g"; } }); // throws a TypeError
![Page 107: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/107.jpg)
var obj = { foo: 1};
Object.seal(obj);delete obj.foo; // does nothingobj.foo; // 1
![Page 108: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/108.jpg)
Object.isSealed
![Page 109: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/109.jpg)
var obj = { foo: 1};
Object.seal(obj);Object.isSealed(obj); // true
![Page 110: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/110.jpg)
Object.freeze
![Page 111: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/111.jpg)
well, you can do nothing
![Page 112: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/112.jpg)
Freezes an object: that is, prevents new properties from being added to it; prevents existing properties from being removed; and prevents existing properties, or their enumerability, configurability, or writability, from being changed. In essence the object is made effectively immutable. The method returns the object being frozen.
- MDN - the best source of knowledge
https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/freeze
![Page 113: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/113.jpg)
var obj = { foo: 1};
Object.freeze(obj);obj.myEvilProperty = 1337;obj.myEvilProperty; // undefined
![Page 114: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/114.jpg)
var obj = { foo: 1};
Object.freeze(obj);obj.foo = 1337;obj.foo; // 1
![Page 115: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/115.jpg)
var obj = { foo: 1};
Object.freeze(obj);Object.defineProperty(obj, "foo", { value: "boom" }); // throws a TypeError
![Page 116: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/116.jpg)
var obj = { foo: 1};
Object.freeze(obj);delete obj.foo; // false
![Page 117: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/117.jpg)
Object.isFrozen
![Page 118: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/118.jpg)
var obj = { foo: 1};
Object.freeze(obj);Object.isFrozen(obj); // true
![Page 119: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/119.jpg)
Object.preventExtensions
![Page 120: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/120.jpg)
Simply, you can’t add new properties
![Page 121: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/121.jpg)
var obj = { foo: 1};
Object.preventExtensions(obj);obj.myEvilProperty = 1337;obj.myEvilProperty; // undefined
![Page 122: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/122.jpg)
How it’s different than Object.seal?
![Page 123: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/123.jpg)
You can remove properties!
![Page 124: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/124.jpg)
var obj = { foo: 1};
Object.seal(obj);delete obj.foo; // false
var obj2 = { bar: 2};
Object.preventExtensions(obj2);delete obj2.bar; // true
![Page 125: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/125.jpg)
You can change descriptors!
![Page 126: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/126.jpg)
var obj = { foo: 1};
Object.seal(obj);Object.defineProperty(obj, "foo", { enumerable: false}); // throws a TypeError
var obj2 = { bar: 2};
Object.preventExtensions(obj2);Object.defineProperty(obj2, "bar", { enumerable: false}); // it's ok
![Page 127: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/127.jpg)
Object.isExtensible
![Page 128: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/128.jpg)
var obj = { foo: 1};
Object.preventExtensions(obj);Object.isExtensible(obj); // false
![Page 129: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/129.jpg)
More ECMAScript 5?
![Page 130: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/130.jpg)
Array.prototype.reduceRightArray.prototype.reduceArray.prototype.filterArray.prototype.map
Array.prototype.forEachArray.prototype.someArray.prototype.every
Array.prototype.lastIndexOfArray.prototype.indexOf
![Page 131: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/131.jpg)
More?!
![Page 132: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/132.jpg)
Function.prototype.bind
![Page 133: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/133.jpg)
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))); }; };
![Page 134: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/134.jpg)
Date.now()
![Page 135: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/135.jpg)
Date.now() === +new Date()
![Page 136: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/136.jpg)
Date.now(); // 1318362644511
![Page 137: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/137.jpg)
Array.isArray
![Page 138: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/138.jpg)
We used to use...
![Page 139: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/139.jpg)
Object.prototype.toString.call([]) === "[object Array]";
![Page 140: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/140.jpg)
Now we use...
![Page 141: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/141.jpg)
Array.isArray(null); // falseArray.isArray([]); // trueArray.isArray({ length: 1 }); // false
![Page 142: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/142.jpg)
String.prototype.trim
![Page 143: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/143.jpg)
We used to use...
![Page 144: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/144.jpg)
String.prototype.trim = function() { return this.replace(/^\s+|\s+$/, "");}
"my string ".trim(); // "my string"
![Page 145: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/145.jpg)
Now we use...
![Page 146: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/146.jpg)
"my string ".trim(); // "my string"
![Page 147: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/147.jpg)
In ECMAScript 5 we have...
![Page 148: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/148.jpg)
Native JSON!
![Page 149: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/149.jpg)
typeof JSON === "object"; // true
![Page 150: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/150.jpg)
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
![Page 151: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/151.jpg)
strict mode
![Page 152: ECMAScript 5](https://reader033.vdocuments.mx/reader033/viewer/2022051207/540e15ed8d7f72927e8b4aec/html5/thumbnails/152.jpg)
"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;");
all of these throw errors
"use strict";var fn = function() { return arguments.callee; }; fn();
more: https://developer.mozilla.org/en/JavaScript/Strict_mode