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.