Exploring Call Stack and Variable Hoisting: JS Execution

Console Log Order: The Call Stack in Action

The first thing to notice is the order in which the console log statements appear. The statement "I have this many beers" within the getMoreBeers function is printed before "I now have this many beers."

1console.log('I have this many beers: ' + numOfBeers);

Why does this happen? It's all thanks to the call stack, a data structure that keeps track of function calls. The call stack operates based on a stack data structure, which follows a First-In-Last-Out (FILO) principle.

When this line of code runs:

1console.log('I now have this many beers: ' + getMoreBeers());

It becomes the first frame on the call stack.

Function Calls and the Call Stack

However, as soon as getMoreBeers() is invoked, it gets pushed onto the top of the call stack, superseding the original console.log statement.

1function getMoreBeers() {
2  console.log('I have this many beers: ' + numOfBeers);
3  var numOfBeers = 25;
4  return numOfBeers;
5}

Only after getMoreBeers() fully executes, including its log statement, does the original console.log statement get popped off the stack and executed.

Hoisting: The Underlying Phenomenon

Now, let's delve into hoisting, which explains the value undefined in the output. In JavaScript, variable declarations are "hoisted" to the top of their respective scopes but remain uninitialized. This is why the numOfBeers inside getMoreBeers() is undefined during the first console.log.

1console.log('I have this many beers: ' + numOfBeers); // Output: undefined

Understanding the mechanics of the call stack and variable hoisting is crucial for both debugging and technical interviews.

The Output Mystery

You've noticed that the output is intriguing. Despite having the variable numOfBeers defined before the function, the console log within the function prints it as undefined.

1// Output
2// I have this many beers: undefined
3// I now have this many beers: 25

The Role of Scoping and Hoisting

This oddity has to do with two core JavaScript concepts: scoping and hoisting.

1. Local vs Global Scope: Even though a variable with the same name exists in the global scope, JavaScript gives priority to the local scope within a function.

   JAVASCRIPT

   1var numOfBeers = 5;  // Global Scope

2. Hoisting in Action: In JavaScript, all variable declarations are "hoisted" to the top of their scope. This means that as soon as the function getMoreBeers() begins execution, JavaScript hoists the variable numOfBeers to the top of the function, but it remains uninitialized.

   JAVASCRIPT

   1function getMoreBeers() {
   2  console.log('I have this many beers: ' + numOfBeers);  // Local Scope, Hoisted but uninitialized
   3  var numOfBeers = 25;  // Local Scope, Initialized
   4  return numOfBeers;
   5}

3. The Undefined Log: When the console.log statement within getMoreBeers() runs, it finds the local, hoisted, but uninitialized numOfBeers and prints it as undefined.

   JAVASCRIPT

   1console.log('I have this many beers: ' + numOfBeers);  // Output: undefined

However, JavaScript only hoists declarations, not initializations. So the = 25 part is NOT hoisted alongside, thus numOfBeers is undefined when console.log('I have this many beers: ' + numOfBeers); is first run.

Complexity of Final Solution

O(1) constant time & space complexity, this is a knowledge question!

One Pager Cheat Sheet

• We can observe that the getMoreBeers() function overwrites the numOfBeers variable, therefore when it is logged 25 will be printed out, which can be explained by scope.
• Executing this code will print the output.
• The order of the console log statements is determined by how the call stack works, with the getMoreBeers() function pushing the original statement onto the stack and executing first.
• A call stack is a data structure that allows a program to keep track of function calls using the stack (first in, last out) data structure.
• The variable is returned as "undefined" in the log despite being clearly defined above the function.
• We should let/const and keep track of variable declarations to avoid unexpected results due to hoisting.
• The declarations of variables with the var keyword in JavaScript are hoisted, but not the initializations.

This is our final solution.

To visualize the solution and step through the below code, click Visualize the Solution on the right-side menu or the VISUALIZE button in Interactive Mode.

xxxxxxxxxx

var assert = require('assert');

​

var numOfBeers = 5;

​

function getMoreBeers() {

  console.log('I have this many beers: ' + numOfBeers);

​

  var numOfBeers = 25;

  return numOfBeers;

}

​

console.log('I now have this many beers: ' + getMoreBeers());

Great job getting through this. Let's move on.

If you had any problems with this tutorial, check out the main forum thread here.