Check out a free preview of the full The Hard Parts of Functional JavaScript course

The "Call Stack Review" Lesson is part of the full, The Hard Parts of Functional JavaScript course featured in this preview video. Here's what you'd learn in this lesson:

Will describes what happens when a function finishes running, JavaScript needs to keep track of it, and uses a call stack for that.


Transcript from the "Call Stack Review" Lesson

>> Will Sentance: When we run a function,
>> Will Sentance: We call that function, we invoke that function. We know that when we finish running that function, say, multiply by 2, we know where to go back to. I can visually see on the page, I guess I could back out to where I was before.

JavaScript needs to keep track of that. In fact, it keeps track of every single function that we call. And it does so using a way of storing data in a computer known as a stack. Which is a useful way of organizing data just like a stack of plates.

The only thing it cares about at any given moment is the top plate. I can't grab random plates from a stack of plates, I can only take the top one off. Well, that's exactly what a call stack feels like. The only thing it cares about is what's on it's top right now.

And when we run a function like multiply by two's, we do [SOUND] in this line, we're gonna add it to the top of the stack of calls, with the input, there it is. Every time we run a function, we add it to the stack of calls. Every time it finishes running, what keyword, David, tells me finish running a function

>> David: Return?
>> Will Sentance: Return, we remove it. Anyone know the posh word, do we know the password for adding to a stack?
>> David: Push and pop.
>> Will Sentance: Push, push to a stack and pop to remove it, exactly, we pop it off. Unfortunately this is not the whiteboard to be rapidly popping stuff of stacks, but let's give it a go.

Pop it off of stack, and actually there's one thing I didn't mention is we can think of our whole file of code, cuz remember, functions is this little mini programs. Our whole file of code is the main program. We can think of it as being wrapped up in a big old function.

What do me call it, [SOUND] Charles? Do you know what we call the, that's not very fair of me to just throw out a question out like that. We call the overall kind of function that is our overall code that we're running, we call that, do you know Virginia?

Did Charles?
>> David: Global.
>> Will Sentance: Global, global, yeah exactly, think of our overall code as global, and we're running that. And so as soon as I run multiply by 2 with input of 3, I add it on top. When I finish running it, I take it off, and I go back out to global.

I start running multiply by 2 input of 10, add it on top, finish running it, take it off, back to global. If I were to run another function inside of multiply by 2 with the input of 3, I'd have multiply by 2 input of 3, and I'd have another function on top of it.

Another function is out of that one, another on top of it, all the way up the call stack if I were to recursively call a function inside a function, inside a function, until I ran out of space on the stack. And I'd have what's known as?
>> David: Stack overflow.

>> Will Sentance: Stack overflow, exactly, I run out of space. Okay, there we go, those are the founding principles of JavaScript. They only took us half an hour, no problem.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now