Function declaration vs expression, Arrow functions

JavaScript Functions Tutorial: Function Declaration vs Function Expression vs Arrow Functions

Functions are one of the most important building blocks in JavaScript. In this tutorial, you will learn three major ways to create functions in JavaScript:

• Function Declaration
• Function Expression
• Arrow Functions

This guide explains each type in a simple, beginner-friendly way with examples and real-world usage.

---

🔹 What is a Function in JavaScript?

A function is a block of reusable code that performs a specific task. Functions help in:

• Code reusability
• Better structure
• Modular programming
• Clean and readable code

---

1️⃣ Function Declaration

A function declaration defines a function using the function keyword with a function name.

✅ Syntax

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

console.log(add(10, 20)); 

🧠 Features

• Has a function name
• Hoisted (can be called before definition)
• Reusable
• Best for general-purpose functions

📌 Hoisting Example

console.log(add(5, 5));

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

---

2️⃣ Function Expression

A function expression stores a function inside a variable.

✅ Syntax

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

console.log(multiply(5, 4)); 

🧠 Features

• Stored in a variable
• Not hoisted like declarations
• Can be anonymous
• Used in callbacks

❌ Hoisting Example

console.log(multiply(2, 2));  // Error

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

---

3️⃣ Arrow Functions (ES6)

Arrow functions are a shorter and cleaner syntax for writing functions introduced in ES6.

✅ Syntax

const divide = (a, b) => {
    return a / b;
};

console.log(divide(20, 4)); 

🔥 Short Syntax

const square = x => x * x;
console.log(square(5));

🧠 Features

• Short and clean syntax
• No own this binding
• Not hoisted
• Great for callbacks
• Modern JavaScript standard

---

⚖ Comparison Table

Feature	Function Declaration	Function Expression	Arrow Function
Syntax	function add(){}	const add = function(){}	const add = () => {}
Hoisting	Yes	No	No
Name Required	Yes	No	No
this binding	Dynamic	Dynamic	Lexical (inherits)
Best Use	Main logic functions	Callbacks	Callbacks, modern JS

---

🧠 Real-World Example

const prices = [100, 200, 300];

const gstPrices = prices.map(price => price + (price * 0.18));

console.log(gstPrices); 

---

❓ Interview Questions

• Difference between function declaration and function expression?
• What is an arrow function?
• What is hoisting?
• Difference between normal function and arrow function?
• Can arrow functions be used as constructors?

---

🚫 Common Mistakes

• Using arrow functions for object methods
• Calling function expressions before definition
• Misusing this in arrow functions

---

✅ Conclusion

Understanding the difference between function declaration, function expression, and arrow functions is essential to write clean, modern, and efficient JavaScript code. Each type has its own use case and importance.

Modern JavaScript development heavily relies on arrow functions and function expressions.

---

🚀 Happy Coding with JavaScript!

Follow this blog for JavaScript, Python, Automation, and Web Development tutorials.