Main content
Course: Unlisted resources area > Unit 1
Lesson 1: Unlisted videos- A message from Sal on school closures and distance learning with Khan Academy
- Video tour: Teaching programming in the classroom
- Video tour: Khan Academy AP®︎ Computer Science Principles
- Adding two 16-bit binary numbers
- Editing a webpage in an online editor
- Editing webpages in a desktop editor
- Editing a webpage from a command line editor
- Using inspect element for HTML
- Using inspect element for CSS styles
- A Tour of Programming on Khan Academy
- John Resig: Building jQuery
- Genesis effect
- Online Python Tutor (1-minute demo)
- Tetrilingo
- LXJS 2013 - Bill Mills and Angelina Fabbro - JavaScript for Science
- AP CSP example: Traffic simulation
- Scientific simulations: IllustrisTNG Single Galaxy Formation
- Memoized Fibonacci visualization
- Memoized factorial visualization
- Bottom-up Fibonacci visualization
- Recursive Fibonacci Calls (Diagrammed)
- Memoized Recursive Fibonacci Calls (Diagrammed)
- A message from Sal on school closures and Khan Academy remote learning.
© 2024 Khan AcademyTerms of usePrivacy PolicyCookie Notice
Memoized Fibonacci visualization
We start with the JavaScript code for generating Fibonacci numbers using recursion and memoization, and visualize the step-by-step execution using JavaScript tutor.
Try it yourself here:
http://pythontutor.com/javascript.html#code=var%20memo%20%3D%20%7B%7D%3B%0Avar%20fib%20%3D%20function%28n%29%20%7B%0A%20%20%20%20if%20%28n%20%3D%3D%3D%200%20%7C%7C%20n%20%3D%3D%3D%201%29%20%7B%0A%20%20%20%20%20%20%20%20return%20n%3B%0A%20%20%20%20%7D%20else%20if%20%28memo%5Bn%5D%29%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20memo%5Bn%5D%3B%0A%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20%20%20var%20result%20%3D%20fib%28n%20-%201%29%20%2B%20fib%28n%20-%202%29%3B%0A%20%20%20%20%20%20%20%20memo%5Bn%5D%20%3D%20result%3B%0A%20%20%20%20%20%20%20%20return%20result%3B%0A%20%20%20%20%7D%0A%7D%3B%0A%0Afib%285%29%3B&curInstr=48&mode=display&origin=opt-frontend.js&py=js&rawInputLstJSON=%5B%5D.
Video transcript
- [Instructor] This is a
JavaScript function that generates the nth fibonacci number using recursion as well as memoization. So we're gonna go through
it and see what the computer actually does behind the scenes. So the first thing it does is
declare this data structure which is an empty JavaScript
object called memo and that's where the memoization
is going to happen later. Then it defines the fib function. And finally it calls the fib
function with the input value of five, so the first thing
that happens is that we're in fib function with N of five. This first condition is false
'cause N is not zero and it's not one, the second condition
is false because five is not in the memo data
structure which is completely empty and this third condition
is where we're gonna go into. Well it's not really a condition is it? So we go into this else block
and it wants to calculate what fibonacci five is by
calling fib of N minus one plus fib of N minus two. So what it first does is call
fib of N minus one so that's gonna be fib of four so it
immediately calls that and now we're in the fib function
with N equals four. This is false, this is
false, so we're here again and this time it wants to
calculate the result of fib three plus fib two. So it first calls fib three
and we're in fib for fib equals three, this is false, this
is false, and now we're gonna calculate fib three as
being fib two plus fib one. It immediately calls fib two
so we're in fib for N equals two this is false, this is
false, and it's gonna calculate fib two as being fib one plus fib zero. So it immediately calls fib one
and now finally this is true so it's gonna return N which is one again. And it'll end up going back
to the fib function when N was two because now it's
got the result of that first fib call. So now it needs to call fib
zero and get that result. So we're in fib for N equals
zero, now that first condition is true again so it's going
to return N which is zero and come back to when fib
was two, when N was two and now it has a result, so
now it can update the memo object with the result for N
of two and we can see indeed that the object updates over there. And then it returns
the result for fib two. All right so now we're back
up to fib three and fib three we've called fib two so now
it wants to call fib one. So we're back in when N
equals one, it once again returns one and now it knows
what fib three is it's got a result of two, it can update
the memo structure with that result and return it. So now we're back in when
N was four and it already calculated fib three, so
now it needs to call fib two and this time when it calls
fib two and N equals two, it finds that N is indeed
in the memo data structure so it can return the value
for N equals two from that structure so it's going
to get that result of one and it doesn't have to do
the recursive calculation. So now we're back with N equals
four and now we know what fib four is it's three, we can
update the memo and return. Now finally we're back up
to when N is five in the fib function it's called fib four
and then it just needs to call fib three, so we see it's
false but then here three is in the memo structure
so it can return the value in the memo structure which
is two and go back up here. Now it knows that fib of five
is five and it can update the memo structure with
that result and return it. Whew and now the whole memoized
recursive function is done.