Function Declaration vs Function Expression: What’s the Difference?

Hello! ☕
Functions are one of the most powerful features in JavaScript. They let you write reusable blocks of code — write once, use many times. Instead of repeating the same logic everywhere, you define it in a function and call it whenever needed.

Example: Adding two numbers 10 times in different places → messy.
One function add() → clean, maintainable, and easy to update.

Today we’ll compare the two main ways to create functions:

• Function Declaration

• Function Expression

We’ll look at syntax, key differences, a high-level view of hoisting, and when to use each.

1. What Functions Are and Why We Need Them

A function is a reusable block of code that performs a task. It can take inputs (parameters), do work, and return a result.

Why needed?

• Avoid code duplication

• Make code modular and readable

• Easier to test and debug

• Foundation for callbacks, array methods, event handlers, etc.

Simple example we’ll reuse:
Add two numbers and return the sum.

2. Function Declaration Syntax

Declared with the function keyword — named function.

function add(a, b) {
  return a + b;
}

console.log(add(5, 3));  // 8

• Starts with function

• Has a name (add)

• Can be called before it's defined (more on this later)

3. Function Expression Syntax

A function assigned to a variable — can be anonymous or named.

const add = function(a, b) {
  return a + b;
};

console.log(add(5, 3));  // 8

Modern arrow version (also expression):

const add = (a, b) => a + b;

console.log(add(5, 3));  // 8

• Assigned to a variable (const, let, or var)

• No function name required (anonymous)

• Behaves like any other variable

4. Key Differences Between Declaration and Expression

Side-by-side example:

// Declaration – works before definition
console.log(multiply(4, 5));  // 20

function multiply(x, y) {
  return x * y;
}

// Expression – ReferenceError if called before
// console.log(divide(10, 2));  // Error!

const divide = function(p, q) {
  return p / q;
};

console.log(divide(10, 2));  // 5

5. Basic Idea of Hoisting (High-Level)

Hoisting = JavaScript moves declarations to the top of their scope before code runs.

• Function declarations are fully hoisted → name + body moved up → You can call them before they're written in code

• Function expressions → only the variable declaration is hoisted (as undefined) → Function body stays where it is → calling early throws ReferenceError or TypeError

Simple mental model:

• Declaration: "Hey JS, I exist from the start!"

• Expression: "I'm just a variable — value assigned later."

This is why declarations feel "global" in their scope, while expressions behave like normal variables.

6. When to Use Each Type

• Use Function Declaration when:

  • You want the function available anywhere in the file/scope

  • Top-level utility functions (add, multiply, greetUser)

  • Readability & simplicity matter most

• Use Function Expression when:

  • Assigning to variables (const, let) for block scope

  • Passing as callbacks (array.map(item => ... ))

  • Conditional function creation

  • Object methods or IIFEs

  • Modern code style (especially with arrow functions)

Modern preference: Many teams lean toward expressions + arrow functions for consistency and block scoping.

Mini Assignment – Practice in Console!

1. Write a function declaration that multiplies two numbers:

function multiply(x, y) {
  return x * y;
}

1. Write the same logic as a function expression (try both regular and arrow):

const multiplyExpr = function(x, y) {
  return x * y;
};

const multiplyArrow = (x, y) => x * y;

1. Call both and print results:

console.log(multiply(6, 7));       // 42
console.log(multiplyExpr(6, 7));   // 42
console.log(multiplyArrow(6, 7));  // 42

1. Try calling them before their definition in the file/script:

   • Declaration should work

   • Expression should throw an error (try it!)

Share your code, outputs, and which error you saw in the cohort group!

Functions are everywhere in JS — understanding declaration vs expression builds a strong foundation for callbacks, closures, and modern patterns later.

Happy coding, cohort! 🚀
Do you prefer declarations or expressions (or arrows)? Let me know in the comments! 😄