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

---

What Are Functions?

You need to add two numbers multiple times in your code.

Without functions:

let result1 = 5 + 3;
let result2 = 10 + 7;
let result3 = 15 + 9;

With a function:

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

let result1 = add(5, 3);   // 8
let result2 = add(10, 7);  // 17
let result3 = add(15, 9);  // 24

Functions are reusable blocks of code.

Write once. Use many times.

---

Why We Need Functions

1. Reusability

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

console.log(greet("Alice"));   // "Hello, Alice!"
console.log(greet("Bob"));     // "Hello, Bob!"
console.log(greet("Charlie")); // "Hello, Charlie!"

2. Organization

Group related code together.

function calculateTax(price) {
  return price * 0.18;
}

function calculateTotal(price) {
  return price + calculateTax(price);
}

3. Maintainability

Change logic in one place, affects all uses.

function getDiscount(price) {
  return price * 0.1; // 10% discount
}

// Update to 15% - change once, applies everywhere
function getDiscount(price) {
  return price * 0.15;
}

---

Function Declaration

The traditional way to create functions.

Syntax:

function functionName(parameters) {
  // code to execute
  return value;
}

Example:

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

console.log(multiply(5, 3)); // 15

Key features:

• Starts with function keyword

• Must have a name

• Can be called anywhere in the code (even before declaration)

More examples:

function square(num) {
  return num * num;
}

function isEven(num) {
  return num % 2 === 0;
}

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

---

Function Expression

Functions stored in variables.

Syntax:

const functionName = function(parameters) {
  // code to execute
  return value;
};

Example:

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

console.log(multiply(5, 3)); // 15

Key features:

• Function assigned to a variable

• Function itself can be anonymous (no name after function)

• Can only be called after definition

More examples:

const square = function(num) {
  return num * num;
};

const isEven = function(num) {
  return num % 2 === 0;
};

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

---

Side-by-Side Comparison

Function Declaration:

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

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

Function Expression:

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

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

Both do the same thing. Syntax is different.

---

Key Differences

Feature	Function Declaration	Function Expression
Syntax	function name() {}	const name = function() {}
Naming	Must have a name	Can be anonymous
Hoisting	Yes (can call before declaration)	No (must define before calling)
When to use	General purpose	Callbacks, conditional functions

---

Understanding Hoisting (Simple)

Hoisting = JavaScript moves function declarations to the top during execution.

Function Declaration (Hoisted):

// This works! ✓
console.log(add(5, 3)); // 8

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

JavaScript treats it like:

function add(a, b) {  // Moved to top
  return a + b;
}

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

Function Expression (NOT Hoisted):

// This doesn't work! ✗
console.log(add(5, 3)); // Error!

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

Variables are hoisted, but not initialized until the line runs.

Rule: Function expressions must be defined before use.

---

Practical Example

Function Declaration:

// Can call before definition
let total = calculateTotal(100);
console.log(total); // 118

function calculateTotal(price) {
  let tax = price * 0.18;
  return price + tax;
}

Works fine. Declaration is hoisted.

Function Expression:

// Must define first
const calculateTotal = function(price) {
  let tax = price * 0.18;
  return price + tax;
};

// Now can call
let total = calculateTotal(100);
console.log(total); // 118

Define first, then call.

---

When to Use Each

Use Function Declaration when:

• Creating utility functions

• You want hoisting behavior

• Function will be used throughout code

function calculateDiscount(price, percent) {
  return price * (percent / 100);
}

function formatCurrency(amount) {
  return "₹" + amount;
}

Use Function Expression when:

• Assigning functions to variables

• Creating callback functions

• Conditional function creation

// Callback example
const numbers = [1, 2, 3, 4, 5];

const doubled = numbers.map(function(num) {
  return num * 2;
});

// Conditional example
let operation;

if (userChoice === "add") {
  operation = function(a, b) { return a + b; };
} else {
  operation = function(a, b) { return a - b; };
}

---

Arrow Functions (Bonus)

Arrow functions are a shorter syntax for function expressions.

Function Expression:

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

Arrow Function:

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

// Or even shorter (implicit return)
const add = (a, b) => a + b;

Both are function expressions. Arrow functions are just cleaner syntax.

---

Complete Examples

Example 1: Temperature converter

Declaration:

function celsiusToFahrenheit(celsius) {
  return (celsius * 9/5) + 32;
}

console.log(celsiusToFahrenheit(0));   // 32
console.log(celsiusToFahrenheit(100)); // 212

Expression:

const celsiusToFahrenheit = function(celsius) {
  return (celsius * 9/5) + 32;
};

console.log(celsiusToFahrenheit(0));   // 32
console.log(celsiusToFahrenheit(100)); // 212

Example 2: Grade calculator

Declaration:

function getGrade(marks) {
  if (marks >= 90) return "A";
  if (marks >= 80) return "B";
  if (marks >= 70) return "C";
  if (marks >= 60) return "D";
  return "F";
}

console.log(getGrade(85)); // "B"
console.log(getGrade(92)); // "A"

Expression:

const getGrade = function(marks) {
  if (marks >= 90) return "A";
  if (marks >= 80) return "B";
  if (marks >= 70) return "C";
  if (marks >= 60) return "D";
  return "F";
};

console.log(getGrade(85)); // "B"
console.log(getGrade(92)); // "A"

---

Practice Assignment

Task: Create multiply function both ways

// 1. Function Declaration
function multiplyDeclaration(a, b) {
  return a * b;
}

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

// 3. Call both
console.log("Declaration:", multiplyDeclaration(5, 3));  // 15
console.log("Expression:", multiplyExpression(5, 3));    // 15

// 4. Test hoisting
console.log("\nTesting hoisting:");

// This works (declaration is hoisted)
console.log("Declaration before definition:", testDeclaration(4, 2)); // 8

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

// This won't work (uncomment to see error)
// console.log("Expression before definition:", testExpression(4, 2));

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

console.log("Expression after definition:", testExpression(4, 2)); // 8

---

Common Mistakes

❌ Calling expression before definition

console.log(add(5, 3)); // Error!

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

✅ Define first, then call

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

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

❌ Forgetting return

function add(a, b) {
  a + b; // Not returned!
}

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

✅ Always return value

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

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

❌ Missing semicolon after expression

const add = function(a, b) {
  return a + b;
} // Missing semicolon (not critical but good practice)

✅ Add semicolon

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

---

Quick Reference

Function Declaration:

function name(params) {
  return value;
}

// Can call before definition ✓
result = name(args);

Function Expression:

const name = function(params) {
  return value;
};

// Must call after definition
result = name(args);

Arrow Function (Expression):

const name = (params) => {
  return value;
};

// Or short form
const name = (params) => value;

---

You Now Understand Functions

What functions are (reusable code blocks)
Function declaration syntax
Function expression syntax
Key differences between them
Hoisting basics (declarations work before definition)
When to use each type

Best Practices

1. Be consistent

   • Pick one style for your project

   • Modern trend: Use arrow functions (expressions)

2. Use declarations for:

   • Top-level utility functions

   • When you need hoisting

3. Use expressions for:

   • Callbacks

   • Storing functions in objects

   • Modern codebases

4. Always return values

   • Functions without return give undefined

Next Steps

Practice by:

• Converting declarations to expressions

• Writing both versions of the same function

• Understanding when hoisting helps

• Using arrow functions

Functions are the building blocks of JavaScript.

Master them, and you'll write cleaner, more maintainable code.

---

Learning JavaScript fundamentals? Follow for more beginner-friendly tutorials.

---