Download - JavaScript 1.8.5: New Features Explored
![Page 1: JavaScript 1.8.5: New Features Explored](https://reader034.vdocuments.mx/reader034/viewer/2022042513/54b797664a79590e5e8b457d/html5/thumbnails/1.jpg)
JavaScript 1.8.5New Features Explored
by Milan Adamovskyhttp://milan.adamovsky.com ◆ http://www.hardcorejs.com
Friday, October 4, 13
![Page 2: JavaScript 1.8.5: New Features Explored](https://reader034.vdocuments.mx/reader034/viewer/2022042513/54b797664a79590e5e8b457d/html5/thumbnails/2.jpg)
What it is
• Culmination of good-to-haves
• Most features can be shimmed
• Supported by all mobile devices
• Supported by most modern browsers
• IE8 is still in heavy use (JavaScript 1.5)
Friday, October 4, 13
![Page 3: JavaScript 1.8.5: New Features Explored](https://reader034.vdocuments.mx/reader034/viewer/2022042513/54b797664a79590e5e8b457d/html5/thumbnails/3.jpg)
Remember
• Includes many features introduced since 1.5
• 1.6
• 1.7 features mainly supported in FireFox
• Use reference material for all versions
• Some features are deprecated
Friday, October 4, 13
![Page 4: JavaScript 1.8.5: New Features Explored](https://reader034.vdocuments.mx/reader034/viewer/2022042513/54b797664a79590e5e8b457d/html5/thumbnails/4.jpg)
What to know
• Array functions
• Object properties
• Still doesn’t have block scope
• Function features
• “use strict”
Friday, October 4, 13
![Page 5: JavaScript 1.8.5: New Features Explored](https://reader034.vdocuments.mx/reader034/viewer/2022042513/54b797664a79590e5e8b457d/html5/thumbnails/5.jpg)
Quick notes
• NaN, Infinity, and undefined immutable
• No trailing commas in JSON.parse()
• Supports “strict mode”
• apply() accepts array-like object
• Data properties are big
Friday, October 4, 13
![Page 6: JavaScript 1.8.5: New Features Explored](https://reader034.vdocuments.mx/reader034/viewer/2022042513/54b797664a79590e5e8b457d/html5/thumbnails/6.jpg)
Strings
Friday, October 4, 13
![Page 7: JavaScript 1.8.5: New Features Explored](https://reader034.vdocuments.mx/reader034/viewer/2022042513/54b797664a79590e5e8b457d/html5/thumbnails/7.jpg)
“”.trim()
• Introduced in 1.8.5
• Removes leading spaces
• Removes trailing spaces
• Works on strings
Friday, October 4, 13
![Page 8: JavaScript 1.8.5: New Features Explored](https://reader034.vdocuments.mx/reader034/viewer/2022042513/54b797664a79590e5e8b457d/html5/thumbnails/8.jpg)
Example
" Hello World ! ".trim();
"Hello World !"
Friday, October 4, 13
![Page 9: JavaScript 1.8.5: New Features Explored](https://reader034.vdocuments.mx/reader034/viewer/2022042513/54b797664a79590e5e8b457d/html5/thumbnails/9.jpg)
Arrays
Friday, October 4, 13
![Page 10: JavaScript 1.8.5: New Features Explored](https://reader034.vdocuments.mx/reader034/viewer/2022042513/54b797664a79590e5e8b457d/html5/thumbnails/10.jpg)
[].map(fn, this)
• Introduced in 1.6
• Does not mutate array
• Works only on indexes with values
• Executes fn on each item in array
• Modify an array’s items without a loop
Friday, October 4, 13
![Page 11: JavaScript 1.8.5: New Features Explored](https://reader034.vdocuments.mx/reader034/viewer/2022042513/54b797664a79590e5e8b457d/html5/thumbnails/11.jpg)
Examplefunction resolve(item) { return $(item); }
var selectors = ["body", "#hello"].map(resolve);
console.log(selectors);
[ e.fn.init[1], e.fn.init[0] ]
Friday, October 4, 13
![Page 12: JavaScript 1.8.5: New Features Explored](https://reader034.vdocuments.mx/reader034/viewer/2022042513/54b797664a79590e5e8b457d/html5/thumbnails/12.jpg)
[].reduce(fn, first)
• Introduced in 1.8
• Does not mutate array
• Executes fn on each item of array
• Reduce array to one value without loops
• Also available .reduceRight()
Friday, October 4, 13
![Page 13: JavaScript 1.8.5: New Features Explored](https://reader034.vdocuments.mx/reader034/viewer/2022042513/54b797664a79590e5e8b457d/html5/thumbnails/13.jpg)
Examplefunction callback(previousItem, currentItem, index, array) { console.log(previousItem, " - ", currentItem, " - ", index, " - ", array); return previousItem + " " + currentItem; }
var sentence = ["three", "little", "pigs", "red", "riding", "hood"].reduce(callback);
three - little - 1 - ["three", "little", "pigs", "red", "riding", "hood"]three little - pigs - 2 - ["three", "little", "pigs", "red", "riding", "hood"]three little pigs - red - 3 - ["three", "little", "pigs", "red", "riding", "hood"]three little pigs red - riding - 4 - ["three", "little", "pigs", "red", "riding", "hood"]three little pigs red riding - hood - 5 - ["three", "little", "pigs", "red", "riding", "hood"]
Friday, October 4, 13
![Page 14: JavaScript 1.8.5: New Features Explored](https://reader034.vdocuments.mx/reader034/viewer/2022042513/54b797664a79590e5e8b457d/html5/thumbnails/14.jpg)
Array.isArray(obj)
• Introduced in 1.8.5
• Determine if object is truly an array
• Fastest performance
• Prototype is an array
• Arguments are not an array
Friday, October 4, 13
![Page 15: JavaScript 1.8.5: New Features Explored](https://reader034.vdocuments.mx/reader034/viewer/2022042513/54b797664a79590e5e8b457d/html5/thumbnails/15.jpg)
Examplefunction callback(switcher) { return switcher ? ["m", "t", "w", "t", "f"] : undefined; }
Array.isArray([]);Array.isArray(new Array());Array.isArray(callback(true));Array.isArray(callback(false));
truetruetruefalse
Friday, October 4, 13
![Page 16: JavaScript 1.8.5: New Features Explored](https://reader034.vdocuments.mx/reader034/viewer/2022042513/54b797664a79590e5e8b457d/html5/thumbnails/16.jpg)
[].filter(fn, this)
• Introduced in 1.6
• Filters an array via fn
• Returns all items for which fn returns true
• Doesn’t need loops
• Takes optional parameter for this
Friday, October 4, 13
![Page 17: JavaScript 1.8.5: New Features Explored](https://reader034.vdocuments.mx/reader034/viewer/2022042513/54b797664a79590e5e8b457d/html5/thumbnails/17.jpg)
Examplefunction callback(value, index, array) { return value.days === 31; }
[ { days : 31, month : "January" }, { days : 28, month : "February" }, { days : 31, month : "March" }, { days : 30, month : "April" }, { days : 31, month : "May" }].filter(callback);
[ Object, Object, Object ]
Friday, October 4, 13
![Page 18: JavaScript 1.8.5: New Features Explored](https://reader034.vdocuments.mx/reader034/viewer/2022042513/54b797664a79590e5e8b457d/html5/thumbnails/18.jpg)
See also
• [].forEach(fn, this)
• [].toString()
• [].some(fn, this)
• [].every(fn, this)
• [].lastIndexOf(search, index)
Friday, October 4, 13
![Page 19: JavaScript 1.8.5: New Features Explored](https://reader034.vdocuments.mx/reader034/viewer/2022042513/54b797664a79590e5e8b457d/html5/thumbnails/19.jpg)
Objects
Friday, October 4, 13
![Page 20: JavaScript 1.8.5: New Features Explored](https://reader034.vdocuments.mx/reader034/viewer/2022042513/54b797664a79590e5e8b457d/html5/thumbnails/20.jpg)
Property descriptors
• Meta data describing object
• Each property has descriptor
• Data descriptors
• Accessor descriptors
• Cannot mix both
Friday, October 4, 13
![Page 21: JavaScript 1.8.5: New Features Explored](https://reader034.vdocuments.mx/reader034/viewer/2022042513/54b797664a79590e5e8b457d/html5/thumbnails/21.jpg)
Data descriptor
• Introduced in 1.8.5
• Default descriptor type
• Define configuration of property values
• Optional key value (defaults to undefined)
• Optional key writeable (defaults to false)
Friday, October 4, 13
![Page 22: JavaScript 1.8.5: New Features Explored](https://reader034.vdocuments.mx/reader034/viewer/2022042513/54b797664a79590e5e8b457d/html5/thumbnails/22.jpg)
Examplevar person = {};
Object.defineProperty(person, "firstName", { configurable : true, enumerable : true, value : "Joe", writable : true });
console.log(person.firstName);
person.firstName = "Jane";
console.log(person.firstName);
JoeJane
Friday, October 4, 13
![Page 23: JavaScript 1.8.5: New Features Explored](https://reader034.vdocuments.mx/reader034/viewer/2022042513/54b797664a79590e5e8b457d/html5/thumbnails/23.jpg)
Examplevar person = {};
Object.defineProperty(person, "firstName", { configurable : true, enumerable : true, value : "Joe", writable : false });
console.log(person.firstName);
person.firstName = "Jane";
console.log(person.firstName);
JoeJoe
Friday, October 4, 13
![Page 24: JavaScript 1.8.5: New Features Explored](https://reader034.vdocuments.mx/reader034/viewer/2022042513/54b797664a79590e5e8b457d/html5/thumbnails/24.jpg)
Default values
• Default values apply with defineProperty()
• Object literal assignment defaults to truely
• Defaults to falsely with defineProperty()
• All descriptors have writable attribute
• All descriptors have enumerable attribute
Friday, October 4, 13
![Page 25: JavaScript 1.8.5: New Features Explored](https://reader034.vdocuments.mx/reader034/viewer/2022042513/54b797664a79590e5e8b457d/html5/thumbnails/25.jpg)
Accessor descriptor
• Introduced in 1.8.5
• Bind functionality with property
• Define configuration of property values
• Optional key value (defaults to undefined)
• Optional key writeable (defaults to false)
Friday, October 4, 13
![Page 26: JavaScript 1.8.5: New Features Explored](https://reader034.vdocuments.mx/reader034/viewer/2022042513/54b797664a79590e5e8b457d/html5/thumbnails/26.jpg)
Examplevar year = {};
(function () { var month = ""; Object.defineProperty(year, "month", { configurable : true, enumerable : true, get : function () { return month; }, set : function (value) { value = value.toLowerCase().substr(0, 3); month = ([ "jan", "feb", "mar" ].filter(function (val, index, arr) { return value === val; }))[0]; } }); })();
year.month = "February";
console.log(year.month);
Friday, October 4, 13
![Page 27: JavaScript 1.8.5: New Features Explored](https://reader034.vdocuments.mx/reader034/viewer/2022042513/54b797664a79590e5e8b457d/html5/thumbnails/27.jpg)
Notice
• Value needs to live outside the setter
• Closure is needed to protect value
• Keyword let is non-standard
• Use a getter to retrieve value
• Logic can exist in both getter and setter
Friday, October 4, 13
![Page 28: JavaScript 1.8.5: New Features Explored](https://reader034.vdocuments.mx/reader034/viewer/2022042513/54b797664a79590e5e8b457d/html5/thumbnails/28.jpg)
Important
• Properties are basis for most new features
• defineProperty() defines one property
• defineProperties() defines many at once
Friday, October 4, 13
![Page 29: JavaScript 1.8.5: New Features Explored](https://reader034.vdocuments.mx/reader034/viewer/2022042513/54b797664a79590e5e8b457d/html5/thumbnails/29.jpg)
Read descriptors
• Use Object.getOwnPropertyDescriptor(o, prop)
• Returns a property descriptor object
• Object contains all descriptor attributes
• Returns undefined if invalid property
• Object is a normal object literal
Friday, October 4, 13
![Page 30: JavaScript 1.8.5: New Features Explored](https://reader034.vdocuments.mx/reader034/viewer/2022042513/54b797664a79590e5e8b457d/html5/thumbnails/30.jpg)
Examplevar person = {};
Object.defineProperty(person, "firstName", { configurable : false, enumerable : true, value : "Joe" });
console.log(Object.getOwnPropertyDescriptor(person, "firstName"));
Object {value: "Joe", writable: false, enumerable: true, configurable: false}
Friday, October 4, 13
![Page 31: JavaScript 1.8.5: New Features Explored](https://reader034.vdocuments.mx/reader034/viewer/2022042513/54b797664a79590e5e8b457d/html5/thumbnails/31.jpg)
Object.keys(obj)
• Returns array of properties
• Only its own enumerable properties
• Also works on arrays
• Does not travel prototype chain
Friday, October 4, 13
![Page 32: JavaScript 1.8.5: New Features Explored](https://reader034.vdocuments.mx/reader034/viewer/2022042513/54b797664a79590e5e8b457d/html5/thumbnails/32.jpg)
Examplevar person = { "age" : 99, "lastName" : "Shmo" };
Object.defineProperty(person, "firstName", { configurable : true, enumerable : false, value : "Joe", writable : true });
console.log(Object.keys(person));
["age", "lastName"]
Friday, October 4, 13
![Page 33: JavaScript 1.8.5: New Features Explored](https://reader034.vdocuments.mx/reader034/viewer/2022042513/54b797664a79590e5e8b457d/html5/thumbnails/33.jpg)
See also
• for...in to list all properties
• Object.getOwnPropertyNames(obj)
Friday, October 4, 13
![Page 34: JavaScript 1.8.5: New Features Explored](https://reader034.vdocuments.mx/reader034/viewer/2022042513/54b797664a79590e5e8b457d/html5/thumbnails/34.jpg)
Object.seal(obj)
• Partially locks down object
• Locks descriptors from being removed
• Locks object from new properties
• Properties can still be writable
• Prototype chain remains uneffected
Friday, October 4, 13
![Page 35: JavaScript 1.8.5: New Features Explored](https://reader034.vdocuments.mx/reader034/viewer/2022042513/54b797664a79590e5e8b457d/html5/thumbnails/35.jpg)
Examplevar person = { "age" : 99, "lastName" : "Shmo" };
Object.defineProperty(person, "firstName", { configurable : true, enumerable : false, value : "Joe", writable : true });
console.log(Object.keys(person));
["age", "lastName"]
Friday, October 4, 13
![Page 36: JavaScript 1.8.5: New Features Explored](https://reader034.vdocuments.mx/reader034/viewer/2022042513/54b797664a79590e5e8b457d/html5/thumbnails/36.jpg)
.preventExtensions(obj)
• Prevents own properties from being added
• Properties can still be removed
• Does not lock down prototype
Friday, October 4, 13
![Page 37: JavaScript 1.8.5: New Features Explored](https://reader034.vdocuments.mx/reader034/viewer/2022042513/54b797664a79590e5e8b457d/html5/thumbnails/37.jpg)
Object.freeze(obj)
• Complete shallow lock-down of object
• Locks descriptors from being removed
• Locks object from new properties
• Locks properties from being modified
• A frozen object gives you most security
Friday, October 4, 13
![Page 38: JavaScript 1.8.5: New Features Explored](https://reader034.vdocuments.mx/reader034/viewer/2022042513/54b797664a79590e5e8b457d/html5/thumbnails/38.jpg)
Check state
• Use isSealed() to check for seal
• Use isExtensible() to check extensibility
• Use isFrozen() to check for freeze
• States can only change to be tighter
• Cannot unfreeze
Friday, October 4, 13
![Page 39: JavaScript 1.8.5: New Features Explored](https://reader034.vdocuments.mx/reader034/viewer/2022042513/54b797664a79590e5e8b457d/html5/thumbnails/39.jpg)
Functions
Friday, October 4, 13
![Page 40: JavaScript 1.8.5: New Features Explored](https://reader034.vdocuments.mx/reader034/viewer/2022042513/54b797664a79590e5e8b457d/html5/thumbnails/40.jpg)
function(){}.bind()
• Marry a context to function definition
• Similar to call() and apply()
• Does not execute function
• Can also marry arguments to function
• Called a bound function
Friday, October 4, 13
![Page 41: JavaScript 1.8.5: New Features Explored](https://reader034.vdocuments.mx/reader034/viewer/2022042513/54b797664a79590e5e8b457d/html5/thumbnails/41.jpg)
Examplefunction sample() { console.log(this); }
var boundFunction;
sample();
boundFunction = sample.bind({ "first" : "Joe" } );boundFunction();
sample();
(sample.bind({ "last" : "Shmo" } ))();
Window {top: Window, window: Window, location: Location, external: Object, chrome: Object…}Object {first: "Joe"}
Window {top: Window, window: Window, location: Location, external: Object, chrome: Object…}Object {last: "Shmo"}
Friday, October 4, 13
![Page 42: JavaScript 1.8.5: New Features Explored](https://reader034.vdocuments.mx/reader034/viewer/2022042513/54b797664a79590e5e8b457d/html5/thumbnails/42.jpg)
Connect
• Thank you for your time
• Connect with me on LinkedIn
• Join the Hardcore JavaScript community
• Read my blog
• Contact me via e-mail
Friday, October 4, 13