Recursion, Iteration, & JavaScript: A love story

Recursion, Iteration, & JS:
A lo t
@AnjanaVakil ❤ JSHeroes 2018

View Slide

Bună! Mă c e ă
@AnjanaVakil

View Slide

location data platform for developers
maps, search, navigation
web, iOS, Android, Unity...

View Slide

so m u t e I ♥
The
Recurse
Center
recurse.com
outreachy.org

View Slide

I ♥
programming paradigms
le ’s e d ! youtu.be/Pg3UeB-5FdA

View Slide

t i s a f o
star-crossed paradigms

View Slide

Iteration v Recursion

View Slide

Iteration
Imperative
Repetitive
Stateful

View Slide

Iteration
Imperative
Repetitive
Stateful
© Columbia Pictures 1993 - image via IMDb

View Slide

Recursion
Functional
Self-referential
Stateless
© Warner Brothers 2010 - image via IMDb

View Slide


View Slide

t o r i m , bo l e
dignity

View Slide

bu h o t
efficiency?

View Slide

Jon n B o
“Pro m g Ae h s e n ro k in n e t s”
youtu.be/JjDsP5n2kSM - h/t Yo h

View Slide

You might optimize for speed…
You might optimize for space...
But… there's a third thing you might want to
optimize for, which is: years of your life
required per program implementation.
This is more important than those other things...
or certainly equally important.
Jon n B o
“Pro m g Ae h s e n ro k in n e t s”
youtu.be/JjDsP5n2kSM - h/t Yo h
“
”

View Slide

Machine
Efficiency
Time
Space
Human
Efficiency
Writing
Reading
Maintenance
v

View Slide

in
JavaScript
we ur n

View Slide

yu , I’m u n
Shakespeare
© 20th Century Fox 1996 - image via IMDb

View Slide

bu h t ha
happy ending

View Slide

JS

View Slide

Act I:
Ite on, bu t i

View Slide

> var simpleTree = makeTree(simpleTreeNode);
We l ♥t e
function simpleTreeNode(value) {
return {
value: value,
left: undefined,
right: undefined
};
}
function makeTree(nodeType) {
var root = nodeType(0);
root.left = nodeType(1);
root.left.left = nodeType(2);
root.right = nodeType(3);
root.right.left = nodeType(4);
root.right.right = nodeType(5);
root.right.right.right = nodeType(6);
return root;
}
0
1
2
3
4 5
6

View Slide

Recursive tree traversal
function recursiveTraverse(tree) {
// base case
if (!tree) return;
// recursive case
console.log(tree.value);
recursiveTraverse(tree.left);
recursiveTraverse(tree.right);
}
> recursiveTraverse(simpleTree);
0
1
2
3
4
5
6

View Slide

Recursive tree traversal
function recursiveTraverse(tree) {
// base case
if (!tree) return;
// recursive case
recursiveTraverse(tree.left);
recursiveTraverse(tree.right);
}
> recursiveTraverse(simpleTree);
0
1
2
3
4
5
6
in iv e d & w i !
=== hu -ef en

View Slide

Iterative tree traversal
function iterativeTraverse(tree) {
var todo = [tree];
while (todo.length) {
var next = todo.shift();
if (next) {
console.log(next.value);
todo.unshift(next.left);
todo.push(next.right);
}
}
}
> iterativeTraverse(simpleTree);
0
1
2
3
4
5
6

View Slide

Iterative tree traversal
function iterativeTraverse(tree) {
var todo = [tree];
while (todo.length) {
var next = todo.shift();
if (next) {
console.log(next.value);
todo.unshift(next.left);
todo.push(next.right);
}
}
}
> iterativeTraverse(simpleTree);
0
1
2
3
4
5
6
ru j s e l,
bu t i t i :/

View Slide

wo n’t o t u t
“fo h a of t e…”

View Slide

JS
Ite on ES6:
● Iterables via
[Symbol.iterator]
● Iterators via next()
● Generators via
function* and yield
● for…of loops

View Slide

Iterables
function iterableTreeNode(value) {
let node = {
value: value,
left: undefined,
right: undefined
};
function recurseyIterator() {
}
node[Symbol.iterator]= recurseyIterator;
return node;
}
function recurTraverse(tree) {
if (!tree) return; // base case
// recursive case
recurTraverse(tree.left);
recurTraverse(tree.right);
}
+ Recursion

View Slide

Iterables
let node = {
value: value,
left: undefined,
right: undefined
};
}
return node;
}
function recurTrav(tree) {
// recursive case
if (tree.left) recurTrav(tree.left);
if (tree.right) recurTrav(tree.right);
// base case (no children): just return
}
+ Recursion

View Slide

Iterables
let node = {
value: value,
left: undefined,
right: undefined
};

// recursive case

// base case: finish iteration
}
return node;
}
// recursive case
}
+ Recursion

View Slide

Iterables
let node = {
value: value,
left: undefined,
right: undefined
};
function* recurseyIterator() {
yield node.value;
// recursive case
if (node.left) yield* node.left;
if (node.right) yield* node.right;
}
return node;
}
// recursive case
}
+ Recursion

View Slide

Iterables
let node = {
value: value,
left: undefined,
right: undefined
};
function* recurseyIterator() {
yield node.value;
// recursive case
if (node.left) yield* node.left;
if (node.right) yield* node.right;
}
return node;
}
> let betterTree = makeTree(iterableTreeNode);
> for (let val of betterTree) console.log(val);
0
1
2
3
4
5
6

View Slide

JS
It(er) ge b r:
github.com/tc39/proposal-async-iteration
tc39.github.io/ecma262
● Async Iterables via
[Symbol.asyncIterator]
● AsyncIterators via
next().then()
● Async Generators
● for await…of loops

View Slide

Iteration
JavaScript
Recursion
=
Human-efficient
Iteration
+
+

View Slide

Act II:
Rec on, bu r ma

View Slide

Recursion: the dream
// recursiveInception.js
'use strict';
const recursiveInception = (n) => {
if (n === 0) return "a dream";
let dreams = recursiveInception(n-1);
return dreams + " within a dream";
}
const depth = parseInt(process.argv[2]);
console.log(recursiveInception(depth));
$ node recursiveInception.js 3
a dream within a dream within a dream
within a dream

View Slide

'use strict';
}
within a dream
within a dream within a dream within a
dream within a dream within a dream within
dream within a dream
1
2
3
4
5
6
7
8
9
10
11

View Slide

'use strict';
}
within a dream within a dream within a dream within
a dream within a dream within a dream within a dream within a
dream within a dream within a dream within a dream within a dream within a dream within
a dream within a dream within a dream within a dream within a dream within a dream
within a dream within a dream within a dream within a dream within a dream within a
a dream within a
… you get the idea
1
2
3
4
5
6
7
8
9
10
11

View Slide

'use strict';
}
1
2
3
4
5
6
7
8
9
10
11

View Slide

Recursion: the reality
'use strict';
}
/home/anjana/JSHeroes/recursiveInception.js:4
^
RangeError: Maximum call stack size exceeded
at recursiveInception (recursiveInception.js:4:28)
1
2
3
4
5
6
7
8
9
10
11

View Slide

Recursion ca s k
'use strict';
}
1
2
3
4
5
6
7
8
9
10
11

View Slide

Recursion ca s k
'use strict';
}
1
2
3
4
5
6
7
8
9
10
11
^ s a k (li d e )

View Slide

Recursion ca s k
'use strict';
}
1
2
3
4
5
6
7
8
9
10
11
f a > recursiveInception(3)
let dreams = recursiveInception(2);

View Slide

Recursion ca s k
'use strict';
}
1
2
3
4
5
6
7
8
9
10
11
recursiveInception(3)
)^

View Slide

Recursion ca s k
'use strict';
}
1
2
3
4
5
6
7
8
9
10
11
)^

View Slide

Recursion ca s k
'use strict';
}
1
2
3
4
5
6
7
8
9
10
11
return "a dream";
)^

View Slide

Recursion ca s k
'use strict';
}
1
2
3
4
5
6
7
8
9
10
11
return "a dream";
(
^

View Slide

Recursion ca s k
'use strict';
}
1
2
3
4
5
6
7
8
9
10
11
let dreams = "a dream";
(
^

View Slide

Recursion ca s k
'use strict';
}
1
2
3
4
5
6
7
8
9
10
11
let dreams = "a dream within a dream";
(
^

View Slide

Recursion ca s k
'use strict';
}
1
2
3
4
5
6
7
8
9
10
11
let dreams = "a dream within a dream within a dream"
;
)^

View Slide

Recursion ca s k
'use strict';
}
within a dream
1
2
3
4
5
6
7
8
9
10
11

View Slide

Recursion ca s k
'use strict';
}
1
2
3
4
5
6
7
8
9
10
11

View Slide

Recursion ca s k
'use strict';
}
1
2
3
4
5
6
7
8
9
10
11
let dreams=recursiveInception(29999);

View Slide

Recursion ca s k
'use strict';
}
1
2
3
4
5
6
7
8
9
10
11
)^

View Slide

Recursion ca s k
'use strict';
}
1
2
3
4
5
6
7
8
9
10
11
:(

View Slide

wo n’t o to r e
wi t a n t f a s?

View Slide

JS
Ta l Op i z i
● Implementation feature of
(some*) JS engines
● Lets us ♻ stack frames:
don’t need to “remember”
anything from calling context
● Requires call in tail position:
“proper tail calls” in ES6

View Slide

Tail Recursion
}
f o s e w ^
af r u s al
Not -re s e

View Slide

Tail Recursion
}
f o s e w ^
af r u s al
Not -re s e
const tailRecursiveInception = (n) => {
}
Ta l-re s e

View Slide

Tail Recursion
}
f o s e w ^
af r u s al
Not -re s e
const incept = (n, dreams) => {
if (n === 0) return dreams;
return incept(n-1, dreams+" within a dream");
}
return incept(n, "a dream");
}
Ta l-re s e
us e p n ^
to h e r o

View Slide

}
f o s e w ^
af r u s al
Not -re s e
}
}
Ta l-re s e
us e p n ^
to h e r o
^ ca t m a f
Tail Recursion

View Slide

}
f o s e w ^
af r u s al
Not -re s e
}
}
Ta l-re s e
us um or ^
to “re b ” hi r
Tail Recursion

View Slide

}
f o s e w ^
af r u s al
Not -re s e
}
}
Ta l-re s e
us um or ^
to “re b ” hi r
in a c . ^ is ca
Tail Recursion

View Slide

}
f o s e w ^
af r u s al
Not -re s e
}
}
Ta l-re s e
^ re s e l
in “ta si ”
Tail Recursion

View Slide

}
f o s e w ^
af r u s al
Not -re s e
}
}
Ta l-re s e
^ re s e l
la t g f o s
Tail Recursion

View Slide

Ta l Op i z i
}
}
> tailRecursiveInception(3);

View Slide

Ta l Op i z i
}
}
tailRecursiveInception(3)
return incept(3, "a dream");

View Slide

Ta l Op i z i
}
}
)^
incept(3, "a dream")
return incept(2, "a dream within a dream");

View Slide

}
}
Ta l Op i z i
incept(2, "a dream within a dream")
return incept(1, "a… w… within a dream");
)^

View Slide

}
}
Ta l Op i z i
♻

View Slide

}
}
Ta l Op i z i

View Slide

}
}
Ta l Op i z i
)^
incept(1, "a dream within a dream within a dream")
return incept(0, "a… w… w… within a dream");

View Slide

}
}
Ta l Op i z i
♻

View Slide

}
}
Ta l Op i z i

View Slide

}
}
Ta l Op i z i
incept(0, "a dream within a dream within a dream within a dream")
return "a dream within a dream within a dream within a dream";
)^

View Slide

}
}
Ta l Op i z i
♻

View Slide

}
}
Ta l Op i z i

View Slide

}
}
(
^
Ta l Op i z i

View Slide

}
}
)^
Ta l Op i z i

View Slide

}
}
a dream within a dream within a dream within a dream
Ta l Op i z i

View Slide

}
}
console.log(tailRecursiveInception(3));
let n = 3;
let dreams = "a dream";
while (n > 0) {
dreams += " within a dream";
n--;
}
console.log(dreams);
Recursion + T O ≈ Iteration
^ w i t ke s ^ ru s li h

View Slide

T O L
// tailRecursiveInception.js
'use strict';
}
}
console.log(tailRecursiveInception(depth));
1
2
3
4
5
6
7
8
9
10
11
12
13

View Slide

'use strict';
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
$ node tailRecursiveInception.js 30000
T O L

View Slide

'use strict';
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
/home/anjana/JSHeroes/tailRecursiveInception.js:5
^
at incept (tailRecursiveInception.js:5:18)
T O L

View Slide

'use strict';
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
/home/anjana/JSHeroes/tailRecursiveInception.js:5
^
li ! be y !
T O L

View Slide

Ta l Op i z i
Feature of (some*) JS engines

View Slide

Ta l Op i z i
* On a c e; mo do im m T O
kangax.github.io/compat-table/es6/#test-proper_tail_calls_(tail_call_optimisation)
● Webkit/Safari has it: webkit.org/blog/6240/ecmascript-6-proper-tail-calls-in-webkit/
● V8/Chromium/Node had it (w/ flag), removed it: bugs.chromium.org/p/v8/issues/detail?id=4698

View Slide

Ta l Op i z i
* On a c e; mo do im m T O
kangax.github.io/compat-table/es6/#test-proper_tail_calls_(tail_call_optimisation)
● Webkit/Safari has it: webkit.org/blog/6240/ecmascript-6-proper-tail-calls-in-webkit/
● V8/Chromium/Node had it (w/ flag), removed it: bugs.chromium.org/p/v8/issues/detail?id=4698
Hot d ed ur ; di s o s o n !
● TCO issues explained in V8 blog: v8project.blogspot.ro/2016/04/es6-es7-and-beyond.html
● TC39 proposal for explicit tail call syntax (inactive): github.com/tc39/proposal-ptc-syntax
● Ongoing discussion/proposal for WebAssembly: github.com/WebAssembly/tail-call

View Slide

$ nvm use 6
Now using node v6.12.3
T O L

View Slide

$ nvm use 6
$ node --harmony_tailcalls tailRecursiveInception.js 30000
T O L

View Slide

$ nvm use 6
$ node --harmony_tailcalls tailRecursiveInception.js 30000
a dream within a dream within a dream within a dream within a dream within a
dream within a dream within a dream within a dream within a dream within a dream within a
dream within a dream within a dream within a dream within a dream within a dream within a dream within a
dream within a dream within a dream within a dream within a dream within a dream within a dream within a dream within a dream within a
dream within a dream within a dream within a dream within a dream within a dream within a dream within a dream within a dream within a dream within a dream within a dream within
a dream within a dream within a dream within a dream within a dream within a dream within a dream within a dream within a dream within a dream within a dream within a dream
within a dream within a dream within a dream within a dream within a dream within a dream within a dream within a dream within a dream within a dream within a dream within a
within a dream within a dream within a dream within a dream within a dream within a dream within a dream within a dream within a dream within a dream within …………………..
T O L

View Slide

Recursion
JavaScript
Iteration
=
Machine-efficient
Recursion
+
+

View Slide


View Slide

JS
Iteration Recursion

View Slide

Fur r a n :
Exploring JS
b D . Axe R c ay
exploringjs.com
● ES6 - Iteration: Ch. 17, 21, 22; TCO: Ch. 27
● ES2018-ES2019: Asynchronous Iteration
MDN
developer.mozilla.org
● JavaScript>Reference>Iteration_protocols
● JavaScript>Guide>Functions>Recursion

View Slide

Mulțum !
JSHeroes organizers & Ioana Chiorean
Mapbox
The Recurse Center community
Max Rabkin
@An a V ki ❤ an @ma x.co

View Slide

Recursion, Iteration, & JavaScript: A love story

Recursion, Iteration, & JavaScript: A love story

Anjana Sofia Vakil

More Decks by Anjana Sofia Vakil

Other Decks in Programming

Featured

Transcript