JavaScript Functions — Declaration vs Expression

If operators are the tools, functions are the machines. They let you write a block of code once and use it as many times as you need. That is the core idea, and everything else follows from it.

What Are Functions and Why Do We Need Them?

Imagine you need to add two numbers in five different places in your program. Without functions, you write the same logic five times. If you ever need to change it, you change it five times. That is messy and error-prone.

Functions solve this by letting you name a block of code and call it whenever you need it.

// without a function — repeated logic
console.log(5 + 3);
console.log(10 + 3);
console.log(7 + 3);

// with a function — write once, use anywhere
function addNumbers(a, b) {
  return a + b;
}

console.log(addNumbers(5, 3));   // 8
console.log(addNumbers(10, 3));  // 13
console.log(addNumbers(7, 3));   // 10

Clean, reusable, and easy to change in one place.

1. Function Declaration

This is the most straightforward way to define a function. You use the function keyword, give it a name, and write the body inside curly braces.

Syntax:

function functionName(parameters) {
  // code to run
  return result;
}

Example:

function multiply(a, b) {
  return a * b;
}

console.log(multiply(4, 5));  // 20
console.log(multiply(3, 7));  // 21

This is straightforward. You declare it, you call it. The name multiply belongs to the function, and you use that name to call it anywhere in your file.

2. Function Expression

A function expression is when you create a function and store it inside a variable. The function itself has no name — the variable acts as its name.

Syntax:

const functionName = function(parameters) {
  // code to run
  return result;
};

Example:

const multiply = function(a, b) {
  return a * b;
};

console.log(multiply(4, 5));  // 20
console.log(multiply(3, 7));  // 21

The result is exactly the same. The difference is in how JavaScript treats these two behind the scenes.

Side by Side Comparison

// Function Declaration
function addDeclaration(a, b) {
  return a + b;
}

// Function Expression
const addExpression = function(a, b) {
  return a + b;
};

console.log(addDeclaration(2, 3));   // 5
console.log(addExpression(2, 3));    // 5

Same output. Different behavior in one important way — hoisting.

---

3. Hoisting — The Key Difference

Hoisting is JavaScript's behavior of moving certain things to the top of your file before your code runs. You do not need to understand the deep internals of how this works. What matters is the practical result.

Function declarations are hoisted. This means you can call a declared function even before you write it in your code, and it will work fine.

// calling BEFORE the definition — works fine
console.log(multiply(3, 4));  // 12

function multiply(a, b) {
  return a * b;
}

JavaScript sees the declaration and moves it up before running anything. So by the time the call happens, the function already exists.

Function expressions are NOT hoisted. The variable is hoisted but its value is not. If you try to call it before it is defined, you get an error.

// calling BEFORE the definition — throws an error
console.log(multiply(3, 4));  // TypeError: multiply is not a function

const multiply = function(a, b) {
  return a * b;
};

At the point of the call, multiply exists as a variable but has no function assigned to it yet. So the call fails.

Simple rule to remember:

Cases	Called before definition?
Function Declaration	Works fine
Function Expression	Throws an error

4. When to Use Each

Both are useful. Neither is universally better. Here is a practical guide:

Use a function declaration when:

• You are writing a general utility or helper that the whole file might need

• You want the freedom to call it anywhere in your file regardless of order

• The function is a named, central piece of your logic

js

function calculateTax(price, rate) {
  return price * rate;
}

Use a function expression when:

• You want to assign a function to a variable conditionally

• You are passing a function as an argument to another function

• You want to be strict about order — expressions force you to define before using, which can prevent bugs

js

const greet = function(name) {
  return "Hello, " + name;
};

In modern JavaScript, function expressions are often written as arrow functions (=>), which you will learn about soon. The concept is the same — a function stored in a variable.