This document provides an overview of common JavaScript data structures including Object, Array, Map, Set, WeakMap, WeakSet and their properties and usage. It discusses how each structure maps and associates values differently and notes browser compatibility details.

1. "When all you have is a
hammer
every problem looks like a nail"
Abraham Maslow 1966

2. ben@mobz.org
name
web site
twitter / github
email

3. Modularity
Isolation
Virtualisation Language
Reform
Tool / Lib
Enabling
Versioning
Control
Effects
Draft 6th Edition Rev 24 (2014-04-27)

4. Isolation
Virtualisation Language
Reform
Control
Effects

5. Recap
but first…

6. Object
• An Associative Array
• maps string ➝ anything
• prototypical inheritance

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

8. // 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 ] );
}
}

9. Is it for
inheritance?
Is it a data structure?

10. Well…
we have both, and
it's not so great

11. DON'T WORRY GUYS...
DATA CONTROL IS HERE

12. Array
• You know them, you love them
• maps number ➝ anything
• plus magical length property

13. 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 ];

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

15. Set
• List of unique values
• no duplicates allowed
• does not map / associate with anything

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

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

18. Map
• An associative array
• maps anything ➝ anything

19. 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();

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

21. WeakMap
• Similar to Map
• References to keys are weakly held
• Maps objects ➝ anything
• Does not have a determined size

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

23. 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!

24. WeakSet
• Weak version of Set
• fairly limited use cases

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

26. 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 ] );
}

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

28. Key Type
Prototype
conflict
JSON Iterable
Weak
References
size
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

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

30. ben@mobz.org
name
web site
twitter / github
email
This is the end