Data Types and Processing in ES6

"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

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

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

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

Data Types and Processing in ES6

More Related Content

What's hot (19)

Similar to Data Types and Processing in ES6 (20)

Recently uploaded (20)

Data Types and Processing in ES6