Download - Data Types and Processing in ES6
![Page 1: Data Types and Processing in ES6](https://reader033.vdocument.in/reader033/viewer/2022052910/559a9e931a28abf1088b4642/html5/thumbnails/1.jpg)
"When all you have is a
hammer
every problem looks like a nail"
Abraham Maslow 1966
![Page 3: Data Types and Processing in ES6](https://reader033.vdocument.in/reader033/viewer/2022052910/559a9e931a28abf1088b4642/html5/thumbnails/3.jpg)
Modularity
Isolation
Virtualisation Language
Reform
Tool / Lib
Enabling
Versioning
Control
Effects
Draft 6th Edition Rev 24 (2014-04-27)
![Page 4: Data Types and Processing in ES6](https://reader033.vdocument.in/reader033/viewer/2022052910/559a9e931a28abf1088b4642/html5/thumbnails/4.jpg)
Isolation
Virtualisation Language
Reform
Control
Effects
![Page 5: Data Types and Processing in ES6](https://reader033.vdocument.in/reader033/viewer/2022052910/559a9e931a28abf1088b4642/html5/thumbnails/5.jpg)
Recap
but first…
![Page 6: Data Types and Processing in ES6](https://reader033.vdocument.in/reader033/viewer/2022052910/559a9e931a28abf1088b4642/html5/thumbnails/6.jpg)
Object
• An Associative Array
• maps string ➝ anything
• prototypical inheritance
![Page 7: Data Types and Processing in ES6](https://reader033.vdocument.in/reader033/viewer/2022052910/559a9e931a28abf1088b4642/html5/thumbnails/7.jpg)
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
![Page 8: Data Types and Processing in ES6](https://reader033.vdocument.in/reader033/viewer/2022052910/559a9e931a28abf1088b4642/html5/thumbnails/8.jpg)
// 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 ] );
}
}
![Page 9: Data Types and Processing in ES6](https://reader033.vdocument.in/reader033/viewer/2022052910/559a9e931a28abf1088b4642/html5/thumbnails/9.jpg)
Is it for
inheritance?
Is it a data structure?
![Page 10: Data Types and Processing in ES6](https://reader033.vdocument.in/reader033/viewer/2022052910/559a9e931a28abf1088b4642/html5/thumbnails/10.jpg)
Well…
we have both, and
it's not so great
![Page 11: Data Types and Processing in ES6](https://reader033.vdocument.in/reader033/viewer/2022052910/559a9e931a28abf1088b4642/html5/thumbnails/11.jpg)
DON'T WORRY GUYS...
DATA CONTROL IS HERE
![Page 12: Data Types and Processing in ES6](https://reader033.vdocument.in/reader033/viewer/2022052910/559a9e931a28abf1088b4642/html5/thumbnails/12.jpg)
Array
• You know them, you love them
• maps number ➝ anything
• plus magical length property
![Page 13: Data Types and Processing in ES6](https://reader033.vdocument.in/reader033/viewer/2022052910/559a9e931a28abf1088b4642/html5/thumbnails/13.jpg)
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 ];
![Page 14: Data Types and Processing in ES6](https://reader033.vdocument.in/reader033/viewer/2022052910/559a9e931a28abf1088b4642/html5/thumbnails/14.jpg)
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 );
![Page 15: Data Types and Processing in ES6](https://reader033.vdocument.in/reader033/viewer/2022052910/559a9e931a28abf1088b4642/html5/thumbnails/15.jpg)
Set
• List of unique values
• no duplicates allowed
• does not map / associate with anything
![Page 16: Data Types and Processing in ES6](https://reader033.vdocument.in/reader033/viewer/2022052910/559a9e931a28abf1088b4642/html5/thumbnails/16.jpg)
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 );
![Page 17: Data Types and Processing in ES6](https://reader033.vdocument.in/reader033/viewer/2022052910/559a9e931a28abf1088b4642/html5/thumbnails/17.jpg)
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
![Page 18: Data Types and Processing in ES6](https://reader033.vdocument.in/reader033/viewer/2022052910/559a9e931a28abf1088b4642/html5/thumbnails/18.jpg)
Map
• An associative array
• maps anything ➝ anything
![Page 19: Data Types and Processing in ES6](https://reader033.vdocument.in/reader033/viewer/2022052910/559a9e931a28abf1088b4642/html5/thumbnails/19.jpg)
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();
![Page 20: Data Types and Processing in ES6](https://reader033.vdocument.in/reader033/viewer/2022052910/559a9e931a28abf1088b4642/html5/thumbnails/20.jpg)
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
![Page 21: Data Types and Processing in ES6](https://reader033.vdocument.in/reader033/viewer/2022052910/559a9e931a28abf1088b4642/html5/thumbnails/21.jpg)
WeakMap
• Similar to Map
• References to keys are weakly held
• Maps objects ➝ anything
• Does not have a determined size
![Page 22: Data Types and Processing in ES6](https://reader033.vdocument.in/reader033/viewer/2022052910/559a9e931a28abf1088b4642/html5/thumbnails/22.jpg)
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
![Page 23: Data Types and Processing in ES6](https://reader033.vdocument.in/reader033/viewer/2022052910/559a9e931a28abf1088b4642/html5/thumbnails/23.jpg)
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!
![Page 24: Data Types and Processing in ES6](https://reader033.vdocument.in/reader033/viewer/2022052910/559a9e931a28abf1088b4642/html5/thumbnails/24.jpg)
WeakSet
• Weak version of Set
• fairly limited use cases
![Page 25: Data Types and Processing in ES6](https://reader033.vdocument.in/reader033/viewer/2022052910/559a9e931a28abf1088b4642/html5/thumbnails/25.jpg)
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
![Page 26: Data Types and Processing in ES6](https://reader033.vdocument.in/reader033/viewer/2022052910/559a9e931a28abf1088b4642/html5/thumbnails/26.jpg)
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 ] );
}
![Page 27: Data Types and Processing in ES6](https://reader033.vdocument.in/reader033/viewer/2022052910/559a9e931a28abf1088b4642/html5/thumbnails/27.jpg)
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
![Page 28: Data Types and Processing in ES6](https://reader033.vdocument.in/reader033/viewer/2022052910/559a9e931a28abf1088b4642/html5/thumbnails/28.jpg)
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
![Page 29: Data Types and Processing in ES6](https://reader033.vdocument.in/reader033/viewer/2022052910/559a9e931a28abf1088b4642/html5/thumbnails/29.jpg)
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