"When all you have is a

hammer

every problem looks like a nail"

Abraham Maslow 1966

ben@mobz.org

name

web site

twitter / github

email

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

ben@mobz.org

name

web site

twitter / github

email

This is the end