JavaScript 1.8.5
New Features Explored
by Milan Adamovsky
http://milan.adamovsky.com ◆ http://www.hardcorejs.com
Friday, O...
What it is
• Culmination of good-to-haves
• Most features can be shimmed
• Supported by all mobile devices
• Supported by ...
Remember
• Includes many features introduced since 1.5
• 1.6
• 1.7 features mainly supported in FireFox
• Use reference ma...
What to know
• Array functions
• Object properties
• Still doesn’t have block scope
• Function features
• “use strict”
Fri...
Quick notes
• NaN, Infinity, and undefined immutable
• No trailing commas in JSON.parse()
• Supports “strict mode”
• apply()...
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 ite...
Example
function resolve(item)
{
return $(item);
}
var selectors = ["body", "#hello"].map(resolve);
console.log(selectors)...
[].reduce(fn, first)
• Introduced in 1.8
• Does not mutate array
• Executes fn on each item of array
• Reduce array to one ...
Example
function callback(previousItem, currentItem, index, array)
{
console.log(previousItem, " - ", currentItem, " - ", ...
Array.isArray(obj)
• Introduced in 1.8.5
• Determine if object is truly an array
• Fastest performance
• Prototype is an a...
Example
function callback(switcher)
{
return switcher
? ["m", "t", "w", "t", "f"]
: undefined;
}
Array.isArray([]);
Array....
[].filter(fn, this)
• Introduced in 1.6
• Filters an array via fn
• Returns all items for which fn returns true
• Doesn’t n...
Example
function callback(value, index, array)
{
return value.days === 31;
}
[
{ days : 31, month : "January" },
{ days : ...
See also
• [].forEach(fn, this)
• [].toString()
• [].some(fn, this)
• [].every(fn, this)
• [].lastIndexOf(search, index)
F...
Objects
Friday, October 4, 13
Property descriptors
• Meta data describing object
• Each property has descriptor
• Data descriptors
• Accessor descriptor...
Data descriptor
• Introduced in 1.8.5
• Default descriptor type
• Define configuration of property values
• Optional key val...
Example
var person = {};
Object.defineProperty(person,
"firstName",
{
configurable : true,
enumerable : true,
value : "Joe...
Example
var person = {};
Object.defineProperty(person,
"firstName",
{
configurable : true,
enumerable : true,
value : "Joe...
Default values
• Default values apply with defineProperty()
• Object literal assignment defaults to truely
• Defaults to fa...
Accessor descriptor
• Introduced in 1.8.5
• Bind functionality with property
• Define configuration of property values
• Opt...
Example
var year = {};
(function ()
{
var month = "";
Object.defineProperty(year,
"month",
{
configurable : true,
enumerab...
Notice
• Value needs to live outside the setter
• Closure is needed to protect value
• Keyword let is non-standard
• Use a...
Important
• Properties are basis for most new features
• defineProperty() defines one property
• defineProperties() defines ma...
Read descriptors
• Use Object.getOwnPropertyDescriptor(o, prop)
• Returns a property descriptor object
• Object contains a...
Example
var person = {};
Object.defineProperty(person,
"firstName",
{
configurable : false,
enumerable : true,
value : "Jo...
Object.keys(obj)
• Returns array of properties
• Only its own enumerable properties
• Also works on arrays
• Does not trav...
Example
var person = {
"age" : 99,
"lastName" : "Shmo"
};
Object.defineProperty(person,
"firstName",
{
configurable : true...
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
•...
Example
var person = {
"age" : 99,
"lastName" : "Shmo"
};
Object.defineProperty(person,
"firstName",
{
configurable : true...
.preventExtensions(obj)
• Prevents own properties from being added
• Properties can still be removed
• Does not lock down ...
Object.freeze(obj)
• Complete shallow lock-down of object
• Locks descriptors from being removed
• Locks object from new p...
Check state
• Use isSealed() to check for seal
• Use isExtensible() to check extensibility
• Use isFrozen() to check for f...
Functions
Friday, October 4, 13
function(){}.bind()
• Marry a context to function definition
• Similar to call() and apply()
• Does not execute function
• ...
Example
function sample()
{
console.log(this);
}
var boundFunction;
sample();
boundFunction = sample.bind({ "first" : "Joe...
Connect
• Thank you for your time
• Connect with me on LinkedIn
• Join the Hardcore JavaScript community
• Read my blog
• ...
Upcoming SlideShare
Loading in …5
×

JavaScript 1.8.5: New Features Explored

1,590 views

Published on

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.

Published in: Technology, Business
1 Comment
5 Likes
Statistics
Notes
  • These slides were presented at this event http://www.hardcorejs.com/events/133348652/

    Make sure to join our hardcore JavaScript community !
    http://www.hardcorejs.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
1,590
On SlideShare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
Downloads
22
Comments
1
Likes
5
Embeds 0
No embeds

No notes for slide

JavaScript 1.8.5: New Features Explored

  1. 1. JavaScript 1.8.5 New Features Explored by Milan Adamovsky http://milan.adamovsky.com ◆ http://www.hardcorejs.com Friday, October 4, 13
  2. 2. 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
  3. 3. 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
  4. 4. What to know • Array functions • Object properties • Still doesn’t have block scope • Function features • “use strict” Friday, October 4, 13
  5. 5. 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
  6. 6. Strings Friday, October 4, 13
  7. 7. “”.trim() • Introduced in 1.8.5 • Removes leading spaces • Removes trailing spaces • Works on strings Friday, October 4, 13
  8. 8. Example " Hello World ! ".trim(); "Hello World !" Friday, October 4, 13
  9. 9. Arrays Friday, October 4, 13
  10. 10. [].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
  11. 11. Example function 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
  12. 12. [].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
  13. 13. Example function 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
  14. 14. 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
  15. 15. Example function callback(switcher) { return switcher ? ["m", "t", "w", "t", "f"] : undefined; } Array.isArray([]); Array.isArray(new Array()); Array.isArray(callback(true)); Array.isArray(callback(false)); true true true false Friday, October 4, 13
  16. 16. [].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
  17. 17. Example function 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
  18. 18. See also • [].forEach(fn, this) • [].toString() • [].some(fn, this) • [].every(fn, this) • [].lastIndexOf(search, index) Friday, October 4, 13
  19. 19. Objects Friday, October 4, 13
  20. 20. Property descriptors • Meta data describing object • Each property has descriptor • Data descriptors • Accessor descriptors • Cannot mix both Friday, October 4, 13
  21. 21. 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
  22. 22. Example var person = {}; Object.defineProperty(person, "firstName", { configurable : true, enumerable : true, value : "Joe", writable : true }); console.log(person.firstName); person.firstName = "Jane"; console.log(person.firstName); Joe Jane Friday, October 4, 13
  23. 23. Example var person = {}; Object.defineProperty(person, "firstName", { configurable : true, enumerable : true, value : "Joe", writable : false }); console.log(person.firstName); person.firstName = "Jane"; console.log(person.firstName); Joe Joe Friday, October 4, 13
  24. 24. 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
  25. 25. 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
  26. 26. Example var 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
  27. 27. 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
  28. 28. Important • Properties are basis for most new features • defineProperty() defines one property • defineProperties() defines many at once Friday, October 4, 13
  29. 29. 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
  30. 30. Example var 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
  31. 31. 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
  32. 32. Example var 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
  33. 33. See also • for...in to list all properties • Object.getOwnPropertyNames(obj) Friday, October 4, 13
  34. 34. 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
  35. 35. Example var 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
  36. 36. .preventExtensions(obj) • Prevents own properties from being added • Properties can still be removed • Does not lock down prototype Friday, October 4, 13
  37. 37. 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
  38. 38. 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
  39. 39. Functions Friday, October 4, 13
  40. 40. 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
  41. 41. Example function 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
  42. 42. 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

×