Function hoisting behavior in Javascript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this code with function declarations and calls?

Consider the following JavaScript code. What will be printed to the console when it runs?

Javascript

console.log(foo());
function foo() {
  return 'Hello from foo';
}

A ReferenceError: foo is not defined

B "Hello from foo"

C TypeError: foo is not a function

D undefined

💡 Hint

Function declarations are hoisted completely, so they can be called before their definition.

In JavaScript, function declarations are hoisted with their body, so calling foo() before its declaration works fine and returns the string.

❓ Predict Output

intermediate

What happens when calling a function expression before its definition?

Look at this code snippet. What will be the result when it runs?

Javascript

console.log(bar());
var bar = function() {
  return 'Hello from bar';
};

A TypeError: bar is not a function

B "Hello from bar"

C ReferenceError: bar is not defined

D undefined

💡 Hint

Variable declarations are hoisted but not their assignments.

The variable bar is hoisted but initialized as undefined at the time of the call, so calling bar() causes a TypeError because undefined is not a function.

❓ Predict Output

advanced

What is the output when a function declaration and variable share the same name?

Analyze this code and determine what it prints to the console.

Javascript

console.log(baz);
var baz = 5;
function baz() {
  return 10;
}
console.log(typeof baz);

A

5
number

B

function baz() { return 10; }
function

C

function baz() { return 10; }
number

D

undefined
number

💡 Hint

Function declarations are hoisted before variable declarations, but variable assignments override the function.

The function baz is hoisted first, so the first console.log prints the function representation. The var baz = 5 then performs the assignment, overriding baz with 5. Thus, typeof baz is 'number'.

❓ Predict Output

advanced

What error occurs when calling a let-declared function before its definition?

What happens when this code runs?

Javascript

console.log(qux());
let qux = function() {
  return 'Hello from qux';
};

A ReferenceError: Cannot access 'qux' before initialization

B TypeError: qux is not a function

C "Hello from qux"

D undefined

💡 Hint

Variables declared with let are not hoisted like var and cannot be accessed before initialization.

Using let means the variable is in a temporal dead zone until initialized, so accessing qux before assignment throws a ReferenceError.

🧠 Conceptual

expert

Which option correctly explains function hoisting behavior in JavaScript?

Select the statement that best describes how function declarations and function expressions are hoisted in JavaScript.

A Function expressions are hoisted with their full definitions, but function declarations are hoisted only as variable declarations.

B Function declarations and function expressions are both hoisted with their full definitions, so they can be called anywhere in the code.

C Neither function declarations nor function expressions are hoisted; they must be defined before use.

D Function declarations are hoisted with their full definitions, but function expressions assigned to variables are hoisted only as variable declarations without their assignments.

💡 Hint

Think about how JavaScript treats function declarations differently from variables assigned functions.

Function declarations are hoisted completely, so they can be called before their definition. Function expressions assigned to variables are hoisted only as variable declarations, so the variable is undefined before assignment.