Function Statement vs Function Expression in JavaScript

Function Statement vs Function Expression in JavaScript

There are two main ways to define a function in JavaScript. They look similar but behave differently due to hoisting.

Function Statement (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

```js
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.

### The Hoisting Difference

```js
// Function statement: works
foo(); // "hello"
function foo() { console.log("hello"); }

// Function expression: fails
bar(); // TypeError: bar is not a function
var bar = function () { console.log("hello"); };

// Function expression with const: fails differently
baz(); // ReferenceError (TDZ)
const baz = () => console.log("hello");
``
### Named Function Expression

```js
const greet = function sayHi(name) {
  return `Hello, ${name}`;
};
``
`sayHi` is only visible inside the function (useful for recursion and stack traces). Outside, you must use `greet`.

### Arrow Function (Always an Expression)

```js
const greet = (name) => `Hello, ${name}`;
``
Arrows are always expressions. They do not have their own `this` or `arguments`.

### When to Use Each

- **Function declarations**: for top-level helpers you want callable from anywhere in the file (hoisting is useful).
- **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 statements 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.