Function Declarations vs Function Expressions in JavaScript

Function Declarations vs Function Expressions in JavaScript

There are two main ways to define a function in JavaScript. They look similar but hoist differently and have different best-use cases.

Function Declaration

function greet(name) {
  return `Hello, ${name}`;
}

• Hoisted with the full body. Can be called before the declaration line.
• The name is bound in the enclosing scope.

Function Expression

const greet = function (name) {
  return `Hello, ${name}`;
};

• The function is assigned to a variable. The variable is hoisted (var as undefined, let/const in TDZ), not the function.
• Must be declared before calling.

Named Function Expression

const greet = function sayHi(name) {
  return `Hello, ${name}`;
};

The internal name sayHi is only visible inside the function (useful for recursion and better stack traces). Outside, you must use greet.

Arrow Function (Always an Expression)

const greet = (name) => `Hello, ${name}`;

Arrows are always expressions. They do not have their own this or arguments.

Behavioral Differences

When to Use Each

• Function declarations: for top-level helpers you want callable from anywhere in the file.
• Function expressions (with const): for everything else, especially when you want predictable declaration-before-use behavior.
• Arrow functions: for short callbacks and when you want lexical this.

Best Practice

For consistency and to avoid hoisting surprises, many teams default to const arrow functions everywhere and only use function declarations when hoisting is genuinely needed.

The Takeaway

Function declarations are hoisted with their full body and can be called early. Function expressions are assigned to variables and must be declared before use. Use declarations for top-level helpers and const expressions (often arrows) for the rest.