JavaScript Function Declarations vs Function Expressions: What’s the Difference?

When working with JavaScript, you’ve likely come across two common ways to declare functions: function declarations and function expressions. At first glance, they may seem similar, but understanding the key differences between them can help you write more efficient and cleaner code.

In this blog post, we will explore these two function declaration methods, explain their differences, and provide examples to illustrate how each method behaves in various situations.

1. Function Declarations

A function declaration defines a function with the function keyword and provides a name for the function. This type of function is “hoisted,” meaning it can be called before it’s defined in the code.

Example:

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

greet(); // Outputs: "Hello, world!"

Here, the function greet is a function declaration, and it can be invoked anywhere in the scope, even before its definition because of hoisting. This allows the function to be available as soon as its surrounding context is executed.

Pros:

• Hoisting: You can call the function before it’s defined in your code.
• Readable: It’s clear that this function is globally available in its scope.

Cons:

• Function declarations are always hoisted, which might lead to unexpected behavior if you are not familiar with the concept.

2. Function Expressions

A function expression defines a function by assigning it to a variable. Unlike function declarations, function expressions are not hoisted. They are only available after the variable assignment has been evaluated.

Example:

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

greet(); // Outputs: "Hello, world!"

In this case, the function greet is assigned to a variable, and it acts like any other variable in JavaScript. This function can only be called after the variable is initialized, making it more predictable in certain situations.

Pros:

• Predictability: Function expressions are not hoisted, so it’s clear when the function becomes available.
• Flexibility: Function expressions can be used as callbacks or passed as arguments to other functions.

Cons:

• Not hoisted: You cannot call the function before the variable assignment, which could cause issues if not handled properly.

3. Named Function Expressions

A named function expression is a variation of a function expression where the function itself has a name. This name is local to the function’s scope, meaning it can only be used within the function itself.

Example:

let greet = function hello() {
    console.log("Hello, world!");
    // The name 'hello' is only available inside the function
};

greet(); // Outputs: "Hello, world!"

The function hello is a named function expression, but the name hello is only accessible inside the function. Outside the function, you must use the variable greet to call it.

Pros:

• Self-reference: The function can refer to itself by name, which is useful for recursion.
• More descriptive stack traces: Named function expressions can provide better error messages in some debuggers.

Cons:

• Limited use of the name: The function’s name is only available within its own scope.

4. Hoisting: Function Declarations vs Function Expressions

One of the major differences between function declarations and function expressions is hoisting.

Example:

greet(); // Works fine
function greet() {
    console.log("Hello!");
}

sayHi(); // Throws error: Uncaught ReferenceError
let sayHi = function() {
    console.log("Hi!");
};

In the example above, greet is a function declaration and can be called before its definition because of hoisting. On the other hand, sayHi is a function expression and throws an error because the variable sayHi is not initialized before the function call.

5. Use Cases

When to use Function Declarations:

• When you want the function to be available throughout the scope.
• For functions that are frequently called and don’t need to be defined at runtime.

When to use Function Expressions:

• When you want more control over when and where the function is available.
• When you need to create closures or pass functions as arguments (e.g., in event handlers or callbacks).
• When you want to avoid potential issues with hoisting.

6. Arrow Functions: A Modern Alternative

Introduced in ES6, arrow functions are a concise way to define functions using the => syntax. Arrow functions are always function expressions and do not have their own this context.

Example:

let greet = () => {
    console.log("Hello, world!");
};

greet(); // Outputs: "Hello, world!"

Arrow functions are particularly useful when you need a shorter syntax and don’t need a separate this context. However, they cannot be used as constructors and do not have the arguments object.

Both function declarations and function expressions have their unique strengths and use cases. Function declarations are hoisted, making them accessible throughout their scope, while function expressions are more predictable since they are only available after they are defined.