JavaScript Functions: Declarations vs. Expressions – What's the Difference?

Defining Functions in JavaScript: Declarations vs Expressions

When working with JavaScript, understanding the distinction between function expressions and function declarations is crucial. While both can define functions, their loading and execution in the code carry significant differences.

Function Declarations vs Expressions

Function Declaration:

• Uses the function keyword followed by the function name and body.
• Declared at the top level or inside a block statement.
• Loaded into the execution context before any other code is executed.

Example:

function foo() { return 5; }

Anonymous Function Expression:

• Uses the function keyword without a name, allowing the function to be assigned to a variable.
• Created using the arrow function syntax (=>) or the function() syntax.
• Loaded into the execution context only when the JavaScript interpreter reaches that line of code.

Example (Arrow Function):

const foo = () => { return 5; }

Example (Function Syntax):

const foo = function() { return 5; }

Named Function Expression:

• Similar to an anonymous function expression, but with an assigned name.
• Also loads into the execution context when the interpreter reaches that line of code.

Example:

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

How Browsers Handle Function Declarations and Expressions

The key difference between declarations and expressions lies in how browsers load them. Function declarations are hoisted to the top of the scope and made available before any code is executed. In contrast, function expressions are loaded only when encountered by the JavaScript interpreter.

Error Handling

If a function expression is called before its definition, it will result in an error since it is not yet loaded into the execution context. Function declarations, on the other hand, can always be called since they are available from the start of the code.

Named Function Expressions in Safari

Historically, Safari browsers had an issue with named function expressions. This syntax used to cause an error, but that issue has been resolved in later versions.

The above is the detailed content of JavaScript Functions: Declarations vs. Expressions – What's the Difference?. For more information, please follow other related articles on the PHP Chinese website!