Function declaration and expression

Why Do We Even Need Functions?

Imagine you’re building a calculator app. You need to add numbers in multiple places.

Without functions, you’d repeat the same logic again and again:

let result1 = 2 + 3;
let result2 = 5 + 7;
let result3 = 10 + 20;

This works… but it’s repetitive and messy.

Now think of a function as a small machine:

• You give it inputs

• It does some work

• It gives you an output

Instead of repeating code, you reuse it.

---

What is a Function?

A function is simply a reusable block of code.

Think of it like a coffee machine:

• You press a button (call the function)

• It makes coffee (runs code)

• You get your result (output)

---

Function Declaration (The Standard Way)

This is the most common way to create a function.

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

Using it:

let result = add(2, 3);
console.log(result); // 5

Simple:

• function keyword

• function name (add)

• parameters (a, b)

• logic inside {}

---

Function Expression (Stored in a Variable)

Here, we create a function and store it inside a variable.

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

Using it:

let result = add(4, 6);
console.log(result); // 10

Difference?

• This function doesn’t have a name directly

• It’s stored in a variable (add)

---

Side-by-Side Comparison

Code Comparison

// Function Declaration
function greet() {
  console.log("Hello");
}

// Function Expression
const greet = function() {
  console.log("Hello");
};

---

What is Hoisting? (Very Simple Explanation)

Hoisting means:

JavaScript moves some declarations to the top before running code.

Let’s see what works and what doesn’t.

---

Function Declaration Hoisting

sayHello(); // Works!

function sayHello() {
  console.log("Hello");
}

Why it works:

• JavaScript already knows about this function before execution

---

Function Expression Hoisting

sayHello(); // Error!

const sayHello = function() {
  console.log("Hello");
};

Why it fails:

• The variable exists, but the function isn’t assigned yet

---

Simple Mental Model

Think like this:

• Function Declaration → "Already prepared"

• Function Expression → "Still being built"

---

Before vs After (Cleaner Code)

Without Function

console.log(2 * 3);
console.log(4 * 5);
console.log(6 * 7);

With Function

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

console.log(multiply(2, 3));
console.log(multiply(4, 5));
console.log(multiply(6, 7));

Cleaner. Reusable. Easy to maintain.

---

When Should You Use Each?

Use Function Declaration:

• When you want simple, reusable functions

• When order of code doesn’t matter

Use Function Expression:

• When you want more control

• When assigning functions to variables

• Common in modern JavaScript patterns

---

Practice Assignment

Try this yourself:

1. Function Declaration

Create a function that multiplies two numbers

// your code here

---

2. Function Expression

Write the same logic using a function expression

// your code here

---

3. Call Both

// call both functions and print result

---

4. Experiment with Hoisting

Try this:

multiply(2, 3);

• Try it before defining the function

• Try it with:

  • declaration

  • expression

Observe:

• Which works?

• Which throws error?

---

If you understand this, you’ve unlocked one of the most important building blocks in JavaScript.