Introduction
Iterators : All objects that know how to access values one at a time(loop)
- for example arrays
Generators : A function which yeilds certain values, and stops at a certain point
Iterator Basics
- with iterators you can make any object iteratable
Example : the "next()" method
//Iterators in ES6 - Basics
let array = [1, 2, 3];
console.log(typeof array[Symbol.iterator]);
let it = array[Symbol.iterator]();
console.log(it);
//The array iterator only has one method the "next()" method
console.log(it.next()); // done : false, value : 1
console.log(it.next()); // done : false, value : 2
console.log(it.next()); // done : false, value : 3
console.log(it.next()); // done : true, value : undefined
//When we reach the end of the array you will have reached the first undefined value, and done will return true
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Iterators in Action
Example 1: overriding
//Iterators in ES6 - Using symbols with iterators
let array = [1, 2, 3];
//Ovveriding the iterator symbol to set all values to 10
array[Symbol.iterator] = function() {
return {
next : function() {
return {
done: false,
value : 10
}
}
}
}
let it = array[Symbol.iterator]();
console.log(it.next()); // done : false, value : 10
console.log(it.next()); // done : false, value : 10
console.log(it.next()); // done : false, value : 10
console.log(it.next()); // done : false, value : 10
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
Example 2: overriding
//Iterators in ES6 - Using symbols with iterators
let array = [1, 2, 3];
//Ovveriding the iterator symbol to set all values to 10
array[Symbol.iterator] = function() {
let nextValue = 10;
return {
next : function() {
nextValue++; //incriment value each time we run next
return {
done: nextValue > 15 ? true : false, //Define the done value
value : nextValue
}
}
}
}
// Run the iterator with a for-of loop
for (let element of array) {
console.log(element);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
Example : making any object iteratable
//Iterators in ES6 - Creating your own iterator to make a object iteratorable
let princess = {
name : 'Annabelle',
favoriteFoods : ['Macaroni', 'Chicken', 'Pizza'],
[Symbol.iterator] : function () {
let i = 0;
let favoriteFoods = this.favoriteFoods;
return {
next: function() {
let value = favoriteFoods[i];
i++;
return {
done: i > favoriteFoods.length ? true : false,
value: value
};
}
};
}
};
for (let food of princess) {
console.log(food)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
Example Creating dom elements for annabelles favorite foods
//Iterators in ES6 - Creating your own iterator to make a object iteratorable
//Target DOM Element
let foodContainer = document.getElementById('annabellesFavoriteFoods');
//Create HTML Template
let listItem = (item) => { return `<li>${item}</li>`}
let princess = {
name : 'Annabelle',
favoriteFoods : ['Macaroni', 'Chicken', 'Pizza'],
[Symbol.iterator] : function () {
let i = 0;
let favoriteFoods = this.favoriteFoods;
return {
next: function() {
let value = favoriteFoods[i];
i++;
return {
done: i > favoriteFoods.length ? true : false,
value: value
};
}
};
}
};
//Loop through, and append DOM Element
for (let food of princess) {
foodContainer.innerHTML += listItem(food);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Annabelles Foods</title>
</head>
<body>
<ul id="annabellesFavoriteFoods">
</ul>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
Generators Basics
- By running generators you actually get back an iterator
- You might use generators for a asyncronous function for instance, if you return something from the server, and wanted to yield the results. After you can do something with the results with your iterator
//Generators in ES6
function *select() {
yield 'House';
yield 'Garage';
}
let itTest = select();
console.log(itTest.next());
console.log(itTest.next());
console.log(itTest.next());
console.log(itTest.next());
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//Generators in ES6
let obj = {
[Symbol.iterator]: gen
}
function *gen(){
yield 1;
yield 2;
}
for (let element of obj) {
console.log(element);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
Passing arguments to a generator to limit results example
//Generators in ES6 - Passing arguments to a generator
let obj = {
[Symbol.iterator]: gen
}
function *gen(end){
for (let i = 0; i < end; i++) {
yield i;
}
}
let it = gen(2);
console.log(it.next());
console.log(it.next());
console.log(it.next());
console.log(it.next());
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Additional methods available to generators : throw and return
- throw : log an error
- return : overwrites the value
//Generators in ES6 - Additional arguments available to generators
//throw()
let obj = {
[Symbol.iterator]: gen
}
function *gen(end){
for (let i = 0; i < end; i++) {
try {
yield i;
} catch (e) {
console.log(e)
}
}
}
let it = gen(2);
console.log(it.next());
console.log(it.throw('There was an error'));
console.log(it.next());
console.log(it.next());
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//Generators in ES6 - Additional arguments available to generators
//return()
let obj = {
[Symbol.iterator]: gen
}
function *gen(end){
for (let i = 0; i < end; i++) {
try {
yield i;
} catch (e) {
console.log(e)
}
}
}
let it = gen(2);
console.log(it.next());
console.log(it.return('There was an error'));
console.log(it.next());
console.log(it.next());
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25