JavaScript Functions (JS-05)

Track: JavaScript Basics
Lesson: JS-05 / JS-10

🎯 Lesson Goal

By the end of this lesson, you will understand what functions are, why they are used, and how to create and use different types of functions in JavaScript to write clean, reusable code.

---

📌 Prerequisites

• JS-01: Variables and Data Types
• JS-02: Operators and Expressions
• JS-03: Conditional Statements
• JS-04: Loops

You should already be comfortable with:

• Variables
• Conditions
• Loops

---

📘 What is a Function?

A function is a block of reusable code that performs a specific task.

Instead of writing the same code again and again, we define it once and reuse it whenever needed.

Real-life example

• Calculator → “Add”, “Subtract”
• Mobile → “Call”, “Message”
• Website → “Login”, “Logout”

---

🔹 Why Functions Are Important

Functions help to:

• Avoid repetition
• Improve readability
• Make code easier to debug
• Organize large programs
• Build scalable applications (MERN!)

---

🔹 Defining a Function

Syntax

function functionName() {
  // code to execute
}

Example

function greet() {
  console.log("Welcome to Programming Empire");
}

greet();

✔ Output:

Welcome to Programming Empire

---

🔹 Function with Parameters

Parameters allow functions to accept input values.

Example

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

greetUser("Aman");
greetUser("Riya");

✔ Output:

Hello Aman
Hello Riya

---

🔹 Function with Return Value

A function can return a value using the return keyword.

Example

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

let result = add(10, 20);
console.log(result);

✔ Output:

30

🔴 Once return is executed, the function stops.

---

🔹 Function Expression

Functions can be stored in variables.

Example

const multiply = function (x, y) {
  return x * y;
};

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

---

🔹 Arrow Functions (Modern JavaScript)

Arrow functions provide shorter syntax and are widely used in React and MERN.

Syntax

const functionName = (parameters) => {
  // code
};

Example

const square = (n) => {
  return n * n;
};

console.log(square(5));

One-line Arrow Function

const cube = n => n * n * n;
console.log(cube(3));

---

🔹 Default Parameters

Default values are used if arguments are not provided.

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

greet();
greet("Kavita");

---

🔹 Calling a Function Multiple Times

Functions can be reused anywhere in your program.

function printLine() {
  console.log("---------------");
}

printLine();
console.log("JavaScript Functions");
printLine();

---

🔹 Functions Inside Loops

Functions work perfectly with loops.

function printNumber(num) {
  console.log(num);
}

for (let i = 1; i <= 5; i++) {
  printNumber(i);
}

---

⚠️ Common Mistakes

• Forgetting to call the function
• Using console.log instead of return
• Mismatch between parameters and arguments
• Writing too much code inside one function

---

🧠 Practice Tasks

1. Create a function to print your name
2. Create a function to add two numbers
3. Create a function to check even or odd
4. Convert a normal function into an arrow function
5. Use a function inside a loop

---

🧪 Mini Coding Challenge

Write a function:

function calculateBill(amount) {
}

Rules:

• If amount ≥ 1000 → give 10% discount
• Otherwise → no discount
• Return final amount

---

📝 Summary

• Functions are reusable blocks of code
• Parameters allow input
• return sends output back
• Arrow functions are modern and concise
• Functions are the backbone of JavaScript & MERN

---

➡️ Next Lesson

JavaScript Arrays (JS-06)

---

🏅 Quiz & Badge

Quiz and badges will be enabled soon.