JavaScript 1.8.5: New Features Explored

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