JavaScript 1.8.5: New Features Explored

JavaScript 1.8.5
New Features Explored
by Milan Adamovsky
http://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)

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

What to know
• Array functions
• Object properties
• Still doesn’t have block scope
• Function features
• “use strict”

Quick notes
• NaN, Inﬁnity, and undeﬁned immutable
• No trailing commas in JSON.parse()
• Supports “strict mode”
• apply() accepts array-like object
• Data properties are big

“”.trim()
• Introduced in 1.8.5
• Removes leading spaces
• Removes trailing spaces
• Works on strings

Example
" Hello World ! ".trim();
"Hello World !"

[].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

Example
function resolve(item)
{
return $(item);
}
var selectors = ["body", "#hello"].map(resolve);
console.log(selectors);
[ e.fn.init[1], e.fn.init[0] ]

[].reduce(fn, ﬁrst)
• Does not mutate array
• Executes fn on each item of array
• Reduce array to one value without loops
• Also available .reduceRight()

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"]

Array.isArray(obj)
• Determine if object is truly an array
• Fastest performance
• Prototype is an array
• Arguments are not an array

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

[].ﬁlter(fn, this)
• Filters an array via fn
• Returns all items for which fn returns true
• Doesn’t need loops
• Takes optional parameter for this

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 ]

See also
• [].forEach(fn, this)
• [].toString()
• [].some(fn, this)
• [].every(fn, this)
• [].lastIndexOf(search, index)

Property descriptors
• Meta data describing object
• Each property has descriptor
• Data descriptors
• Accessor descriptors
• Cannot mix both

Data descriptor
• Default descriptor type
• Define configuration of property values
• Optional key value (defaults to undefined)
• Optional key writeable (defaults to false)

Example
var person = {};
Object.defineProperty(person,
"firstName",
{
configurable : true,
enumerable : true,
value : "Joe",
writable : true
});
console.log(person.firstName);
person.firstName = "Jane";
Joe
Jane

Example
var person = {};
"firstName",
{
enumerable : true,
value : "Joe",
writable : false
});
person.firstName = "Jane";
Joe
Joe

Default values
• Default values apply with deﬁneProperty()
• Object literal assignment defaults to truely
• Defaults to falsely with deﬁneProperty()
• All descriptors have writable attribute
• All descriptors have enumerable attribute

Accessor descriptor
• Bind functionality with property
• Define configuration of property values
• Optional key value (defaults to undefined)
• Optional key writeable (defaults to false)

Example
var year = {};
(function ()
{
var month = "";
Object.defineProperty(year,
"month",
{
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);

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

Important
• Properties are basis for most new features
• defineProperty() defines one property
• defineProperties() defines many at once

Read descriptors
• Use Object.getOwnPropertyDescriptor(o, prop)
• Returns a property descriptor object
• Object contains all descriptor attributes
• Returns undeﬁned if invalid property
• Object is a normal object literal

Example
var person = {};
"firstName",
{
configurable : false,
enumerable : true,
value : "Joe"
});
console.log(Object.getOwnPropertyDescriptor(person, "firstName"));
Object {value: "Joe", writable: false, enumerable: true, configurable: false}

Object.keys(obj)
• Returns array of properties
• Only its own enumerable properties
• Also works on arrays
• Does not travel prototype chain

Example
var person = {
"age" : 99,
"lastName" : "Shmo"
};
"firstName",
{
enumerable : false,
value : "Joe",
writable : true
});
console.log(Object.keys(person));
["age", "lastName"]

See also
• for...in to list all properties
• Object.getOwnPropertyNames(obj)

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

.preventExtensions(obj)
• Prevents own properties from being added
• Properties can still be removed
• Does not lock down prototype

Object.freeze(obj)
• Complete shallow lock-down of object
• Locks descriptors from being removed
• Locks object from new properties
• Locks properties from being modiﬁed
• A frozen object gives you most security

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

Functions

function(){}.bind()
• Marry a context to function deﬁnition
• Similar to call() and apply()
• Does not execute function
• Can also marry arguments to function
• Called a bound function

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"}

Connect
• Thank you for your time
• Connect with me on LinkedIn
• Join the Hardcore JavaScript community
• Read my blog
• Contact me via e-mail

JavaScript 1.8.5: New Features Explored

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie JavaScript 1.8.5: New Features Explored

Ähnlich wie JavaScript 1.8.5: New Features Explored (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

JavaScript 1.8.5: New Features Explored