Finally, in javaScript 2015 we get 2 new built-in data structures that makes our life a little bit easier. On this lecture, we will explore various implementations of common data structures in javaScript using Arrays, Objects and the new members in javaScript 2015: Maps and Sets.

1. DATA STRUCTURES
IN JAVASCRIPT 2015
Nir Kaufman

2. Nir Kaufman
- AngularJS evangelist
- International speaker
- Guitar player
Head of Angular Development @ 500Tech
*Photoshop

5. INTRO

6. DATA STRUCTURES
ARE IMPORTANT

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

8. JAVASCRIPT GOT
JUST ARRAYS…

9. WE NEED MORE.
MAPS
SETS
LISTS
STACKS
QUEUES
TREES

10. 2015

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

12. AGENDA
Array improvements
Introduction to Sets
Introduction to Maps
Next steps

13. CODE? OR BORED?

14. ENTER ARRAYS

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

16. Array.of(50);
=> [50]
Array(50);
=> [undefined X 50]

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

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

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

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

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

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

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

24. USE CASE??

25. ENTER TYPED ARRAYS
special-purpose arrays designed to work with
numeric types. provide better performance
for arithmetic operations

26. a memory location that can contains
a specified number of bytes
const buffer = new ArrayBuffer(8);
buffer.byteLength;
=> 8
ArrayBuffer()

27. Interface for manipulating array buffers
const buffer = new ArrayBuffer(8);
const view = new DataView(buffer);
view.setFloat32(2,8);
view.getFloat32(2);
// => 8
DataView()

28. new Int8Array(8);
new Int16Array(8);
new Int32Array(8);
new Float32Array(8);
new Float64Array(8);
new Uint8Array(8);
new Uint8ClampedArray(8);
Type-Specific views

29. ARRAYS
ARE POWERFUL

30. DO WE NEED MORE?

32. TEST YOURSELF
How to create an array without duplicates?
How to test for item existence?
How to remove an item from an array?

33. ENTER SETS

34. ORDERED LIST
OF UNIQUE VALUES

35. const colors = new Set();
colors.add('Red');
colors.add('Green');
colors.add(‘Blue');
colors.size; // => 3
Create a Set and add element

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

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

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

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

41. Create an
‘eliminateDuplicates’
function for arrays

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

43. WEAK SETS
Holds a weak reference to values.
Can only contain Objects.
Expose only: add, has and remove methods.
Values can’t be access…

44. USE CASE??

45. Create a WeakSet for for ‘tagging’ objects
instances and track their existence without
mutating them.

47. const map = Object.create(null);
map.position = 0;
if (map.position) {
// what are we checking?
}
property existence or zero value?

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

49. ENTER MAPS

50. ORDERED LIST
OF KEY-VALUE PAIRS

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

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

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

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

55. WEAK MAPS
Holds a weak reference to key
The key must be an object
Expose get and set.

56. USE CASE??

57. Create a WeakMap for mapping DOM
elements to objects. when the element will
destroyed, the data will freed

58. EXTEND

59. ES6 ENABLES
SUBCLASSING
OF BUILT-IN TYPES

60. QUEUE DEFINED
enqueue
dequeue
peek
isEmpty

61. CODE? OR BORED?

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

63. NEXT STEPS

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

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