Function hoisting behavior in Javascript - Mini Project: Build & Apply

Understanding Function Hoisting Behavior

📖 Scenario: Imagine you are writing a small JavaScript program where you want to understand how functions behave when called before they are written in the code. This is important because sometimes JavaScript lets you call functions before their actual code appears, and sometimes it does not.

🎯 Goal: You will create two functions: one declared with the function keyword and one assigned to a variable using const. You will then try calling both functions before and after their definitions to see which one works and which one causes an error.

📋 What You'll Learn

Create a function declaration named greet that returns the string 'Hello from greet!'.

Create a function expression assigned to a constant named sayBye that returns the string 'Goodbye from sayBye!'.

Call the greet function before its declaration and store the result in a variable named beforeGreet.

Call the sayBye function before its assignment and store the result in a variable named beforeSayBye.

Call both functions after their definitions and store the results in variables named afterGreet and afterSayBye respectively.

Print all four variables to observe the behavior.

💡 Why This Matters

🌍 Real World

Knowing function hoisting helps when reading or writing JavaScript code that calls functions in different orders, especially in larger projects or when using libraries.

💼 Career

Many JavaScript developer jobs require understanding hoisting to debug code and write clean, error-free functions.

1

Create function declaration and function expression

Create a function declaration named greet that returns the string 'Hello from greet!'. Then create a function expression assigned to a constant named sayBye that returns the string 'Goodbye from sayBye!'.

Javascript

# Your code here

Hint

Use function greet() { return 'Hello from greet!'; } for the function declaration.
Use const sayBye = function() { return 'Goodbye from sayBye!'; }; for the function expression.

2

Call functions before their definitions

Call the greet function before its declaration and store the result in a variable named beforeGreet. Then call the sayBye function before its assignment and store the result in a variable named beforeSayBye.

Javascript

function greet() {
    return 'Hello from greet!';
}

const sayBye = function() {
    return 'Goodbye from sayBye!';
};

// Your code here

Hint

Call greet() and assign to beforeGreet before the function declaration.
For sayBye(), use a try...catch block to catch the error and assign the error message to beforeSayBye.

3

Call functions after their definitions

Call the greet function after its declaration and store the result in a variable named afterGreet. Then call the sayBye function after its assignment and store the result in a variable named afterSayBye.

Javascript

const beforeGreet = greet();
let beforeSayBye;
try {
    beforeSayBye = sayBye();
} catch (error) {
    beforeSayBye = error.toString();
}

function greet() {
    return 'Hello from greet!';
}

const sayBye = function() {
    return 'Goodbye from sayBye!';
};

// Your code here

Hint

Simply call greet() and sayBye() after their definitions and assign the results to afterGreet and afterSayBye.

4

Print all results to observe hoisting behavior

Print the variables beforeGreet, beforeSayBye, afterGreet, and afterSayBye to see the output of calling the functions before and after their definitions.

Javascript

const beforeGreet = greet();
let beforeSayBye;
try {
    beforeSayBye = sayBye();
} catch (error) {
    beforeSayBye = error.toString();
}

function greet() {
    return 'Hello from greet!';
}

const sayBye = function() {
    return 'Goodbye from sayBye!';
};

const afterGreet = greet();
const afterSayBye = sayBye();

// Your code here

Hint

Use console.log() to print each variable on its own line.

Practice

1. Which statement best describes function hoisting in JavaScript?

easy

A. Function declarations are hoisted and can be called before they are defined.

B. Function expressions are hoisted and can be called before assignment.

C. Variables declared with let are hoisted like functions.

D. Arrow functions are hoisted like function declarations.

Solution

1. Step 1: Understand hoisting for function declarations

   Function declarations are moved to the top of their scope, so they can be called before their definition in code.

2. Step 2: Compare with function expressions and other types

   Function expressions and arrow functions are not hoisted in the same way; they cannot be called before assignment.

3. Final Answer:

   Function declarations are hoisted and can be called before they are defined. -> Option A

4. Quick Check:

   Function declarations hoisted = C [OK]

Hint: Only function declarations are hoisted fully [OK]

Common Mistakes:

• Thinking function expressions are hoisted like declarations
• Confusing variable hoisting with function hoisting
• Assuming arrow functions are hoisted

2. Which of the following is the correct syntax to declare a function that will be hoisted?

easy

A. function myFunc() { return 1; }

B. var myFunc = () => 1;

C. let myFunc = () => 1;

D. const myFunc = function() { return 1; };

Solution

1. Step 1: Identify function declaration syntax

   Function declarations use the function keyword followed by the function name and body.

2. Step 2: Check other options for hoisting behavior

   Options A, B, and C are function expressions or arrow functions assigned to variables, which are not hoisted as functions.

3. Final Answer:

   function myFunc() { return 1; } -> Option A

4. Quick Check:

   Function declaration syntax = D [OK]

Hint: Only function declarations use 'function name()' syntax [OK]

Common Mistakes:

• Confusing function expressions with declarations
• Assuming arrow functions are hoisted
• Using variable assignment syntax for hoisted functions

3. What will be the output of the following code?

console.log(foo());

function foo() {
  return 'Hello';
}

console.log(bar());

var bar = function() {
  return 'World';
};

medium

A. SyntaxError

B. ReferenceError for bar

C. 'Hello' followed by 'World'

D. 'Hello' followed by TypeError

Solution

1. Step 1: Analyze the call to foo()

   The function foo is a declaration and hoisted, so foo() returns 'Hello'.

2. Step 2: Analyze the call to bar()

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

3. Final Answer:

   'Hello' followed by TypeError -> Option D

4. Quick Check:

   Function declaration hoisted, function expression not initialized = A [OK]

Hint: Function declarations hoisted, expressions not initialized [OK]

Common Mistakes:

• Expecting both functions to run without error
• Confusing ReferenceError with TypeError
• Assuming variable functions are hoisted fully

4. Consider the code below. It throws an error. What is the fix?

console.log(add(2, 3));

const add = function(a, b) {
  return a + b;
};

medium

A. Move the console.log after the function expression.

B. Use var add instead of const add.

C. Change const add to function add declaration.

D. Wrap the function expression in parentheses.

Solution

1. Step 1: Identify why error occurs

   The variable add is declared with const and assigned a function expression. It is not hoisted as a function, so calling it before assignment causes a ReferenceError.

2. Step 2: Fix by using function declaration

   Changing to a function declaration function add(a, b) hoists the function, allowing calls before its definition.

3. Final Answer:

   Change const add to function add declaration. -> Option C

4. Quick Check:

   Function declarations hoisted, expressions not [OK]

Hint: Use function declarations to call before definition [OK]

Common Mistakes:

• Assuming var fixes hoisting for function expressions
• Thinking moving console.log is the only fix
• Trying to wrap function expression in parentheses

5. You want to organize your code so that helper functions can be called anywhere in the file without errors. Which approach best uses function hoisting to achieve this?

hard

A. Assign all helper functions to const variables at the top of the file.

B. Use function declarations anywhere; they are hoisted to the top automatically.

C. Declare all helper functions using function declarations at the bottom of the file.

D. Wrap helper functions in arrow functions assigned to let variables.

Solution

1. Step 1: Understand hoisting behavior for function declarations

   Function declarations are hoisted to the top of their scope, so they can be called anywhere in the file regardless of their position.

2. Step 2: Compare with other approaches

   Assigning functions to variables (const or let) does not hoist the function body, so calls before assignment cause errors.

3. Final Answer:

   Use function declarations anywhere; they are hoisted to the top automatically. -> Option B

4. Quick Check:

   Function declarations hoisted anywhere = A [OK]

Hint: Function declarations can be called anywhere due to hoisting [OK]

Common Mistakes:

• Thinking function expressions are hoisted
• Placing function declarations only at bottom
• Using arrow functions expecting hoisting