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

Need a 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

Need a 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

Need a 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

Need a hint?

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