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

What is a Function?

Think of a function as a kitchen appliance. A toaster has a specific set of instructions: take bread, heat it, and pop it out. You don't rebuild the toaster every time you want breakfast; you just press the button.

In programming, a function is a block of code designed to perform a particular task. You define it once and run it as many times as you want.

---

1. Function Declaration: The Traditional Approach

A function declaration is the most common way to define a function. You use the function keyword followed by a name.

JavaScript

// Function Declaration
function multiplyNumbers(a, b) {
  return a * b;
}

console.log(multiplyNumbers(5, 10)); // Output: 50

---

2. Function Expression: The Modern Approach

In a function expression, you create a function and assign it to a variable. The function itself doesn't usually have a name (this is called an anonymous function).

JavaScript

// Function Expression
const multiplyNumbers = function(a, b) {
  return a * b;
};

console.log(multiplyNumbers(5, 10)); // Output: 50

---

The Key Differences: Hoisting and Syntax

While both do the same job, they behave differently behind the scenes. This brings us to a concept called Hoisting.

What is Hoisting?

In JavaScript, declarations are "hoisted" to the top of their scope. This means the browser reads your function declarations before it runs any other code.

• Declarations: You can call the function before you actually write it in your code.

• Expressions: You cannot call the function before it is defined. If you try, the code will crash because the variable hasn't been initialized yet.

Feature	Function Declaration	Function Expression
Syntax	function name() { ... }	const name = function() { ... }
Hoisting	Yes (can call before definition)	No (must define before calling)
Usage	Global functions, general logic	Closures, callbacks, and modern JS

---

When to Use Which?

• Use Declarations when you want a function to be available globally throughout your script and you prefer a more traditional structure.

• Use Expressions when you want to keep your functions local to a specific part of your code, or when you are passing functions around as arguments (like in map or filter). Expressions also force you to define your functions before you use them, which often leads to cleaner, more predictable code.

---

Assignment Challenge: The Multiplication Test

To wrap up this assignment, let's look at how these two types behave in the real world.

Implementation

JavaScript

// --- TASK 1: Function Declaration ---
console.log(calculateSquare(5)); // Works! Output: 25

function calculateSquare(n) {
  return n * n;
}

// --- TASK 2: Function Expression ---
// console.log(multiply(4, 3)); // ERROR: Cannot access 'multiply' before initialization

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

console.log(multiply(4, 3)); // Works! Output: 12

By trying to call calculateSquare before its definition, you’ll see it works perfectly because of hoisting. But if you uncomment the call to multiply before its definition, you’ll see JavaScript throw an error. This is a critical distinction to remember as we move into more complex projects.