What's the Key Difference Between JavaScript Function Declarations and Expressions?

Understanding the Distinction Between Function Expressions and Declarations in JavaScript

In JavaScript, functions can be defined using either expressions or declarations. While both approaches allow you to create reusable code blocks, they have some fundamental differences in how they behave in the execution context.

1. Function Expressions

A function expression is an anonymous function that is assigned as a value to a variable or constant. It follows the syntax:

var foo = function() { return 5; };

In this example, foo is an anonymous function (lacking a formal name) that returns the value 5 when invoked.

2. Function Declarations

Conversely, a function declaration is a named function declared using the function keyword followed by a name and optional parameters:

function foo() { return 5; }

In this case, foo is a named function that performs the same task as the anonymous function expression above.

3. Browser Loading and Evaluation

The key difference between expressions and declarations lies in how they are loaded into the execution context.

• Function Declarations: These are loaded and evaluated before any code in the enclosing scope. This means they can be called regardless of their position in the script.
• Function Expressions: Function expressions, on the other hand, are loaded and evaluated when the interpreter reaches that specific line of code. This means they cannot be called before their declaration in the same scope. If attempted, an error will occur.

4. Example Illustrations

// Function Expression
alert(foo()); // ERROR!
var foo = function() { return 5; }; 

In this example, alert(foo()) will throw an error because foo is not yet defined.

// Function Declaration
alert(foo()); // Alerts 5
function foo() { return 5; } 

Here, alert(foo()) alerts 5 because function declarations are loaded before any code runs.

Other Considerations

While function expressions and declarations behave similarly in most cases, there are some nuances to be aware of:

• Named Function Expressions: Named function expressions (e.g., var foo = function foo() { return 5; }) were once problematic in Safari, but modern versions handle them without issue.

The above is the detailed content of What's the Key Difference Between JavaScript Function Declarations and Expressions?. For more information, please follow other related articles on the PHP Chinese website!