DATA STRUCTURES IN JAVASCRIPT 2015

Nir Kaufman

Nir Kaufman

- AngularJS evangelist - International speaker - Guitar player

Head of Angular Development @ 500Tech

*Photoshop

INTRO

DATA STRUCTURES ARE IMPORTANT

https://www.amazon.com/Algorithms-Structures-Prentice-Hall-Automatic-Computation/dp/0130224189

JAVASCRIPT GOT JUST ARRAYS…

WE NEED MORE.

MAPSSETS

LISTS

STACKSQUEUESTREES

2015

WE GOT A GREEN LIGHT!kangax.github.io/compat-table/es6

AGENDAArray improvements

Introduction to Sets

Introduction to Maps

Next steps

CODE? OR BORED?

ENTER ARRAYS

Array.of()creates a new Array instance with a variable number of arguments

Array.of(50); => [50]

Array(50); => [undefined X 50]

Array.from()creates a new Array instance from an array-like or iterable object.

function sum() { const args = Array.prototype.slice.call(arguments); return args.reduce((total, num) => total += num ); }

function sum() { const args = Array.from(arguments); return args.reduce((total, num) => total += num); }

function sum(...numbers) { return numbers.reduce((total, num) => total += num) }

rest parameter

const numbers = Array.of(1,2,3,4,5,6); numbers.find( num => num > 4 ); => 5

Array.find()

const colors = Array.of("red", "green"); colors.findIndex(color => color === "green" ); => 1

Array.findIndex()

const numbers = [1, 2, 3, 4, 5]; numbers.fill(1); => [1, 1, 1, 1, 1]

Array.fill()

const numbers = [1, 2, 3, 4 ]; numbers.copyWithin(2, 0); => [1, 2, 1, 2]

Array.copyWithin()

USE CASE??

ENTER TYPED ARRAYSspecial-purpose arrays designed to work with

numeric types. provide better performance

for arithmetic operations

a memory location that can contains a specified number of bytes

const buffer = new ArrayBuffer(8); buffer.byteLength; => 8

ArrayBuffer()

Interface for manipulating array buffers

const buffer = new ArrayBuffer(8); const view = new DataView(buffer); view.setFloat32(2,8); view.getFloat32(2); // => 8

DataView()

new Int8Array(8); new Int16Array(8); new Int32Array(8); new Float32Array(8); new Float64Array(8); new Uint8Array(8); new Uint8ClampedArray(8);

Type-Specific views

ARRAYS ARE POWERFUL

DO WE NEED MORE?

TEST YOURSELFHow to create an array without duplicates?

How to test for item existence?

How to remove an item from an array?

ENTER SETS

ORDERED LIST OF UNIQUE VALUES

const colors = new Set(); colors.add('Red'); colors.add('Green'); colors.add(‘Blue');colors.size; // => 3

Create a Set and add element

const names = new Set(); names.add('nir'); names.add('chen'); names.has('nir'); names.delete('nir'); names.clear();

Test, delete and clear

const colors = new Set(); colors.add('Red'); colors.add('Green'); colors.forEach( (value, index) => { console.log(`${value}, ${index}`) });

Iterate over a Set

for (let item of set) for (let item of set.keys()) for (let item of set.values()) for (let [key, value] of set.entries())

for of loop

let set = new Set(['Red', 'Green']); let array = [...set]; console.log(array); // => [ 'Red', 'Green']

Set - Array conversation

Create an ‘eliminateDuplicates’

function for arrays

function eliminateDuplicates(items){ return [...new Set(items)]; }

solution

WEAK SETSHolds a weak reference to values.

Can only contain Objects.

Expose only: add, has and remove methods.

Values can’t be access…

USE CASE??

Create a WeakSet for for ‘tagging’ objects

instances and track their existence without

mutating them.

const map = Object.create(null); map.position = 0; if (map.position) { // what are we checking? }

property existence or zero value?

const map = Object.create(null); map[1] = 'Nir'; map['1'] = "Ran"; console.log(map[1]); console.log(map['1']);

two entries?

ENTER MAPS

ORDERED LIST OF KEY-VALUE PAIRS

const roles = new Map(); const nir = {id: 1, name: "Nir"}; const ran = {id: 2, name: "ran"}; roles.set(nir, ['manager']); roles.set(ran, ['user']); roles.size; // => 2

Create a Map and add element

const roles = new Map(); const nir = {id: 1, name: "Nir"}; const ran = {id: 2, name: "ran"}; roles.set(nir, ['manager']); roles.set(ran, ['user']); roles.has(nir); roles.delete(nir); roles.clear();

Test, delete and clear

const roles = new Map(); const nir = {id: 1, name: "Nir"}; const ran = {id: 2, name: "ran"}; roles.set(nir, ['manager']); roles.set(ran, ['user']); roles.forEach( (value, key) => { console.log(value, key); });

Iterate over a Map

for (let [key, value] of roles) for (let key of roles.keys()) for (let value of roles.values()) for (let [key, value] of roles.entries())

for of loop

WEAK MAPSHolds a weak reference to key

The key must be an object

Expose get and set.

USE CASE??

Create a WeakMap for mapping DOM

elements to objects. when the element will

destroyed, the data will freed

EXTEND

ES6 ENABLES SUBCLASSING

OF BUILT-IN TYPES

QUEUE DEFINEDenqueue

dequeue

peek

isEmpty

CODE? OR BORED?

class Queue extends Array { enqueue(element) { this.push(element) } dequeue() { return this.shift(); } peek() { return this[0]; } isEmpty() { return this.length === 0; } }

NEXT STEPS

egghead.io/courses/javascript-arrays-in-depth

THANK YOU!

nir@500tech.com

@nirkaufman

il.linkedin.com/in/nirkaufman

github.com/nirkaufman

ANGULARJS IL

meetup.com/Angular-AfterHours/

meetup.com/AngularJS-IL

Nir Kaufman