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

http://milan.adamovsky.com


http://www.hardcorejs.com


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, Infinity, and undefined immutable

• No trailing commas in JSON.parse()

• Supports “strict mode”

• apply() accepts array-like object

• Data properties are big


Strings


“”.trim()

• Introduced in 1.8.5

• Removes leading spaces

• Removes trailing spaces

• Works on strings


Example

" Hello World ! ".trim();

"Hello World !"


Arrays


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


Examplefunction resolve(item) { return $(item); }

var selectors = ["body", "#hello"].map(resolve);

console.log(selectors);

[ e.fn.init[1], e.fn.init[0] ]


[].reduce(fn, first)


• Does not mutate array

• Executes fn on each item of array

• Reduce array to one value without loops

• Also available .reduceRight()


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


Array.isArray(obj)


• Determine if object is truly an array

• Fastest performance

• Prototype is an array

• Arguments are not an array


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


[].filter(fn, this)


• Filters an array via fn

• Returns all items for which fn returns true

• Doesn’t need loops

• Takes optional parameter for this


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 ]


See also

• [].forEach(fn, this)

• [].toString()

• [].some(fn, this)

• [].every(fn, this)

• [].lastIndexOf(search, index)


Objects


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)


Examplevar person = {};

Object.defineProperty(person, "firstName", { configurable : true, enumerable : true, value : "Joe", writable : true });

console.log(person.firstName);

person.firstName = "Jane";


JoeJane



Object.defineProperty(person, "firstName", { configurable : true, enumerable : true, value : "Joe", writable : false });


person.firstName = "Jane";


JoeJoe


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


Accessor descriptor


• Bind functionality with property

• Define configuration of property values

• Optional key value (defaults to undefined)

• Optional key writeable (defaults to false)


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);


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 undefined if invalid property

• Object is a normal object literal



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}


Object.keys(obj)

• Returns array of properties

• Only its own enumerable properties

• Also works on arrays

• Does not travel prototype chain


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


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


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


.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 modified

• 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 definition

• Similar to call() and apply()

• Does not execute function

• Can also marry arguments to function

• Called a bound function


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


Connect

• Thank you for your time

• Connect with me on LinkedIn

• Join the Hardcore JavaScript community

• Read my blog

• Contact me via e-mail


http://www.linkedin.com/in/milanadamovsky/

http://www.linkedin.com/in/milanadamovsky/





mailto:[email protected]?subject=JavaScript

mailto:[email protected]?subject=JavaScript

JavaScript 1.8.5: New Features Explored

Technology

Transcript of JavaScript 1.8.5: New Features Explored