Function Declaration vs Function Expression: What's the Difference?

Introduction

Hey there! Let's dive into the world of JavaScript functions, which are the building blocks for creating modular and reusable code. They help us organize our logic, make our code easier to read, and cut down on repetition. But, not all functions are made the same way. One key thing to understand in JavaScript is the difference between Function Declarations and Function Expressions.

In this article, we'll take a closer look at these function types, compare them with examples, and chat about real-world use cases, including closures.

Function Declaration

A Function Declaration is when you define a function using the function keyword right at the top level of your JavaScript code. It's hoisted, which means you can call it before it's actually defined in your code.

Syntax:

function greet() {
    console.log("Hello, world!");
}

greet(); // Calling the function

Key Characteristics:

• Hoisted: The function is available throughout the scope before its actual definition.

• Named function: Always has a name (e.g., greet).

• Can be called before the declaration.

Example:

sayHello(); // ✅ Works fine due to hoisting

function sayHello() {
    console.log("Hello from a function declaration!");
}

Function Expression

A Function Expression defines a function inside an expression and is assigned to a variable. Unlike declarations, function expressions are not hoisted.

Syntax:

const greet = function() {
    console.log("Hello, world!");
};

greet(); // Calling the function

Key Characteristics:

• Not hoisted: Cannot be called before its definition.

• Anonymous or named function: The function can have a name, but often it’s anonymous.

• Assigned to a variable.

Example:

hello(); // ❌ Error: Cannot access 'hello' before initialization

const hello = function() {
    console.log("Hello from a function expression!");
};

Function Declaration vs Function Expression: Comparison Table

Real-World Use Cases

1. Closures (Private Variables)

Closures allow functions to retain access to variables from their outer function even after execution.

function counter() {
    let count = 0; // Private variable
    return function() {
        count++;
        console.log("Count:", count);
    };
}

const increment = counter();
increment(); // Count: 1
increment(); // Count: 2

Here, the inner function forms a closure over count, making it private.

2. Event Listeners (Function Expressions)

Function expressions are commonly used for event handling.

document.getElementById("btn").addEventListener("click", function() {
    console.log("Button clicked!");
});

3. Callbacks in Asynchronous Code

Function expressions are frequently used in callbacks.

setTimeout(function() {
    console.log("This message appears after 2 seconds");
}, 2000);

A flowchart illustrating function hoisting.

A comparison table highlighting the key differences.

Conclusion

Understanding the differences between Function Declarations and Function Expressions is crucial for writing better JavaScript code. Function Declarations are hoisted and useful for defining reusable logic, while Function Expressions are more flexible and widely used in event handling, callbacks, and closures.

By mastering both, you can write more efficient, modular, and maintainable JavaScript applications!