"When all you have is a
hammer
every problem looks like a nail"
Abraham Maslow 1966
Modularity
Isolation
Virtualisation Language
Reform
Tool / Lib
Enabling
Versioning
Control
Effects
Draft 6th Edition Rev 24 (2014-04-27)
Isolation
Virtualisation Language
Reform
Control
Effects
Recap
but first…
Object
• An Associative Array
• maps string ➝ anything
• prototypical inheritance
var obj = new Object();
var obj = {};
// setting a value
obj[ "key1" ] = "value1";
obj[ "key2" ] = window.document;
obj[ "key3" ] = null
// getting a value
obj[ "key1" ]; // returns "value1"
obj[ "toString" ]; // returns a function
// iterating over keys
for( key in obj ) {
console.log( key, obj[ key ] );
}
// maybe we should do this?
for( key in obj ) {
if( Object.prototype.hasOwnProperty.call( obj, key ) ) {
console.log( key, obj[ key ] );
}
}
Is it for
inheritance?
Is it a data structure?
Well…
we have both, and
it's not so great
DON'T WORRY GUYS...
DATA CONTROL IS HERE
Array
• You know them, you love them
• maps number ➝ anything
• plus magical length property
var arr = new Array();
var arr = [];
// constructing with the from method
var imgs = Array.from( document.querySelectorAll( "IMG" ) );
var args = Array.from( arguments );
// with the spread operator
var imgs = [ ...document.querySelectorAll( "IMG" ) ];
var args = [ ...arguments ];
arr[0] = "value1";
arr[1] = new Anything();
arr.push( "value3" );
arr.slice; // etc
arr[1]; // returns [object Anything]
arr.pop(); // returns "value3"
arr.indexOf( "value1" ); // returns 0
arr.length; // returns 2
for( let i = 0; i < arr.length; i++ ) {
console.log( i, arr[i] );
}
arr.forEach( fn );
arr.map( fn );
Set
• List of unique values
• no duplicates allowed
• does not map / associate with anything
var set = new Set();
set.add( "key" );
set.add( 208 );
set.add( { name: "Schrödinger's Cat", alive: undefined } );
set.add( window.document );
set.add( NaN );
var set = new Set();
var ann = { name: "Ann" };
var bob = { name: "Bob" };
set.add( ann );
set.add( bob );
set.has( ann ); // true
set.add( ann );
set.size; // returns 2
set.delete( ann );
set.size; // returns 1
Map
• An associative array
• maps anything ➝ anything
var map = new Map();
map.set( "key1", "value1" );
map.set( null, "value2 );
map.set( window.document, function() { return true; } );
map.size; // returns 3
map.get( "key1" ); // returns "value1"
map.get( null ); // returns "value2"
map.delete( window.document );
map.clear();
var ann = { name: "Ann" };
var bob = { name: "Bob" };
var age = new Map();
age.set( ann, 45 );
age.set( bob, 27 );
age.get( bob ); // returns 27
WeakMap
• Similar to Map
• References to keys are weakly held
• Maps objects ➝ anything
• Does not have a determined size
var handlers = new Map();
[ "ryanseddon", "paul_irish" ].forEach( function( name ) {
var node = generateAvatarComponent( name );
handlers.set( node, showProfile );
parent.appendChild( node );
});
parent.remove();
// handlers contains 2 items
// you have a memory leak
var handlers = new WeakMap();
[ "ryanseddon", "paul_irish" ].forEach( function( name ) {
var node = generateAvatarComponent( name );
handlers.set( node, showProfile );
parent.appendChild( node );
});
parent.remove();
// handlers is empty
// no leaks!
WeakSet
• Weak version of Set
• fairly limited use cases
Iterators
• An iterable lets you iterate over a list of values
• An object that contains a next() method
• returns an object containing { done, value }
• Create Iterators from Array, Map and Set
• Can NOT iterator over WeakMap and WeakSet
var array = [ "a", "b", "c" ];
var iterator = array.entries();
iterator.next(); // returns { done: false, value: [ 0, "a" ] }
iterator.next(); // returns { done: false, value: [ 1, "b" ] }
iterator.next(); // returns { done: false, value: [ 2, "c" ] }
iterator.next(); // returns { done: true, value: undefined }
// with for of and destructuring
for( var [ index, value ] of array.entries() ) {
console.log( index, value );
}
// compare
for( let index = 0; index < array.length; index++ ) {
console.log( index, array[ index ] );
}
new Array( iterable );
new Map( iterable );
new Set( iterable );
array.entries(); // iterator returns [ index, value ]
array.keys(); // iterator returns index
array.values(); // iterator returns value
map.entries(); // iterator returns [ key, value ]
map.keys(); // iterator returns key
map.values(); // iterator returns value
set.entries(); // iterator returns [ key, key ]
set.keys(); // iterator returns key
set.values(); // iterator returns key
Key TypePrototype
conflictJSON Iterable
Weak
Referencessize
Object String Yes Yes No No No*
Array Index No* Yes Yes No length
Map Anything No No Yes No size
Set Anything No No Yes No size
WeakMap Object No No No Yes No
WeakSet Object No No No Yes No
Firefox IE11 Chrome1 Node2
Map / Set Yes Yes Yes Yes
WeakMap / WeakSet Yes WeakMap only Yes Yes
Iterables Non-conforming No Non-conforming No
Destructuring Yes No No No
Spread Yes No No No
1 requires enabling "experimental features"
2 requires running with the --harmony flag