Upload
-milan-adamovsky-
View
1.091
Download
2
Tags:
Embed Size (px)
DESCRIPTION
In this presentation we will go over some of the new features of the modern JavaScript. We will get a quick introduction of how to embrace the new features, how to navigate through them, and how not to get overwhelmed. There will be some examples of the more useful features that you will want to understand and begin to adopt.
Citation preview
JavaScript 1.8.5New Features Explored
by Milan Adamovskyhttp://milan.adamovsky.com ◆ http://www.hardcorejs.com
Friday, October 4, 13
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
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
What to know
• Array functions
• Object properties
• Still doesn’t have block scope
• Function features
• “use strict”
Friday, October 4, 13
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
Strings
Friday, October 4, 13
“”.trim()
• Introduced in 1.8.5
• Removes leading spaces
• Removes trailing spaces
• Works on strings
Friday, October 4, 13
Example
" Hello World ! ".trim();
"Hello World !"
Friday, October 4, 13
Arrays
Friday, October 4, 13
[].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
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
[].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
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
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
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
[].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
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
See also
• [].forEach(fn, this)
• [].toString()
• [].some(fn, this)
• [].every(fn, this)
• [].lastIndexOf(search, index)
Friday, October 4, 13
Objects
Friday, October 4, 13
Property descriptors
• Meta data describing object
• Each property has descriptor
• Data descriptors
• Accessor descriptors
• Cannot mix both
Friday, October 4, 13
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
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
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
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
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
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
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
Important
• Properties are basis for most new features
• defineProperty() defines one property
• defineProperties() defines many at once
Friday, October 4, 13
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
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
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
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
See also
• for...in to list all properties
• Object.getOwnPropertyNames(obj)
Friday, October 4, 13
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
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
.preventExtensions(obj)
• Prevents own properties from being added
• Properties can still be removed
• Does not lock down prototype
Friday, October 4, 13
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
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
Functions
Friday, October 4, 13
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
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
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