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

1) What functions are and why we need them

i) What Functions Are

A function is a reusable block of code that performs a specific task. Instead of writing the same instructions multiple times, you put them in a function and call it whenever you need.

Think of it like a machine in a factory: you feed it some input, it does a job, and gives you an output.

Example:

function greet() {
  console.log("Hello!");
}

greet(); // Calls the function → prints "Hello!"

ii) why we need them

1. Reusability

• Write a task once and use it many times instead of repeating code.

function greet(name) {
  console.log("Hello " + name);
}

greet("Ali");
greet("Sara");

Without functions, you’d have to write the same console.log again and again.

2. Organization

• Break big programs into small, manageable pieces.

• Each function does one job, so it’s easier to understand and maintain.

3. Readability

• Function names describe what the code does.

function calculateTotal(price, tax) {
  return price + tax;
}

4. Flexibility

• Functions can take inputs (parameters) and give outputs (return values).

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

console.log(multiply(3, 4)); // 12

---

2) Function declaration syntax

A function declaration defines a function with a name that you can call later.

Parts of a Function Declaration

1. function → the keyword that tells JavaScript you are creating a function.

2. functionName → the name you give your function.

3. (parameters) → optional inputs your function can use.

4. { ... } → curly braces that contain the code your function will run.

5. return → optional statement to give a result back.

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

Example 1: Simple Function

function greet() {
  console.log("Hello!");
}

greet(); // Calls the function → prints "Hello!"

Example 2: Function With Parameters

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

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

---

3) Function expression syntax

A function expression is when you store a function in a variable instead of declaring it by name.

1. const functionName → the variable that holds the function.

2. function(parameters) → the function itself (can be anonymous, without a name).

3. { ... } → code block that runs when the function is called.

4. return → optional, gives back a value.

5. End with a semicolon ; because it’s an assignment.

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

Example 1: Simple Function Expression

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

greet(); // prints "Hello!"

Example 2: With Parameters

Works like a regular function, but cannot be called before it’s defined.

• const functionName → the variable that holds the function.

• function(parameters) → the function itself (can be anonymous, without a name).

• { ... } → code block that runs when the function is called.

• return → optional, gives back a value.

• End with a semicolon ; because it’s an assignment

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

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

---

4) Key differences between declaration and expression

1) Function Declaration:
A function that is defined with the function keyword and a name. It can be called anywhere in the scope because it is hoisted.

function greet() {
  console.log("Hello!");
}
greet(); // Works even if called before the function definition

2) Function Expression:

A function that is stored in a variable. It can be anonymous and is not hoisted, so you must define it before calling it.

const greet = function() {
  console.log("Hello!");
};
greet(); // Must be called after definition

Key Differences Table :-

Feature	Function Declaration	Function Expression
Definition	Defined with function keyword + name	Function stored in a variable
Hoisting	Yes — can be called before definition	No — must be defined before calling
Name	Must have a name	Can be anonymous
Syntax Ends With ;	No	Yes (because it's an assignment)
Use Case	General purpose, reusable functions	Often used in callbacks or small tasks
Example	function add(a,b){ return a+b; }	const add = function(a,b){ return a+b; };

---

5) Basic idea of hoisting (very high level)

Hoisting is JavaScript’s behavior of moving variable and function declarations to the top of their scope before the code runs.

• This means function declarations and some variables can be used before they appear in the code.

• Only declarations are hoisted, not assignments.

• Hoisting moves declarations to the top of their scope automatically.

• Only function declarations and var declarations are hoisted.

• Function expressions and let/const variables are not hoisted.

• Hoisting helps call functions before writing them (declarations only).

Example

• greet() works because function declarations are hoisted.

• greetExp() fails because function expressions are not hoisted.

// Function declaration hoisting
console.log(greet()); // Works! → "Hello!"

function greet() {
  return "Hello!";
}

// Function expression hoisting
console.log(greetExp()); // ❌ Error: greetExp is not defined

const greetExp = function() {
  return "Hi!";
};

---

6) When to use each type

1. Function Declaration

Use When:

• You want a function available anywhere in its scope (because it’s hoisted).

• The function performs a general or main task in your code.

• You want readable, named functions for clarity.

Example:

// Can call this function before or after declaration
console.log(add(2, 3)); // 5

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

2. Function Expression

Use When:

• You want to store a function in a variable.

• You need a function as a value (e.g., pass it as a callback).

• You don’t need hoisting and want more control over when the function is available.

Example:

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

console.log(multiply(2, 4)); // 8

3. Arrow Function (Modern Expression)

Use When:

• You want shorter syntax, especially for small or one-line functions.

• You don’t need your own this context (arrow functions use the surrounding this).

• Often used for callbacks, array methods, or small utility functions.

Example:

const square = n => n * n;
console.log(square(5)); // 25

---

7) Assignment Idea

1. Function Declaration:

// Calling function declaration BEFORE definition
console.log(multiplyDeclaration(2, 3)); //  Works because declarations are hoisted

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

// Calling function declaration AFTER definition
console.log(multiplyDeclaration(5, 4)); // 20

2. Function Expression

// Calling function expression BEFORE definition
try {
  console.log(multiplyExpression(2, 3)); //  Error
} catch (e) {
  console.log(e.message); // Cannot access 'multiplyExpression' before initialization
}

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

// Calling function expression AFTER definition
console.log(multiplyExpression(5, 4)); // 20

---

summarize

A function in JavaScript is a reusable block of code that performs a specific task. Functions help avoid repetition, organize code, improve readability, and allow flexibility through inputs and outputs.

There are three main types of functions:

1. Function Declaration – Defined with a name and can be called anywhere in their scope because they are hoisted. Ideal for general-purpose tasks and clarity.

2. Function Expression – Stored in a variable and must be defined before use, as they are not hoisted. Useful for callbacks and controlling function availability.

3. Arrow Function – Short syntax for concise, one-line functions without their own this. Great for small tasks and callbacks.

Hoisting allows function declarations to be used before their definition, while function expressions must be defined first. Understanding these types and when to use them helps write efficient, organized, and readable code.