Javascript Module 9

 Module 9 : Functions: Declaration & Invocation. 

📖 1.Introduction to Functions

A function in JavaScript is a block of reusable code designed to perform a specific task.

Functions are first-class citizens in JavaScript, meaning they can be:

Assigned to variables

Passed as arguments

Returned from other functions

📘 2. Function Declaration

Syntax:

javascript

code

function functionName(parameters) { // Code to execute }

Example:

javascript

 code

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

Explanation:

function is the keyword

greet is the function name

name is a parameter

Inside the block, the function uses console.log() to display output

✅ Invocation:

javascript

 code

greet("Alice"); // Output: Hello, Alice!

📘 3. Function Expressions

Functions can also be stored in variables. This is called a Function Expression.

Syntax:

javascript

code

const greet = function(name) { console.log("Hi, " + name); };

✅ Invocation:

javascript

 code

greet("Bob"); // Output: Hi, Bob

❗ Note:

Function expressions are not hoisted, unlike declarations.

📘 4. Arrow Functions

Introduced in ES6, arrow functions are a concise way to write function expressions.

Syntax:

javascript

 code

const greet = (name) => { console.log(`Hey, ${name}`); };

✅ Invocation:

javascript

 code

greet("Charlie"); // Output: Hey, Charlie

Shortcut for single expression:

javascript

 code

const square = x => x * x; console.log(square(5)); // Output: 25

🧠 5. Return Statement

A function can return a value using the return keyword.

Example:

javascript

code

function add(a, b) { return a + b; } const result = add(3, 4); console.log(result); // Output: 7

⚙️ 6.Exercises

🧪 Exercise 1: Write a function that calculates the factorial of a number.

javascript

 code

function factorial(n) { if (n === 0) return 1; return n * factorial(n - 1); } console.log(factorial(5)); // Output: 120

Explanation:

Recursive function

Uses if condition to stop recursion at 0

🧪 Exercise 2: Convert Celsius to Fahrenheit

javascript

code

function toFahrenheit(celsius) { return (celsius * 9/5) + 32; } console.log(toFahrenheit(25)); // Output: 77

🧪 Exercise 3: Check if a number is even or odd using arrow function

javascript

 code

const isEven = num => num % 2 === 0; console.log(isEven(4)); // true console.log(isEven(5)); // false

🎯 Goal:

Demonstrate function declaration, expression, and invocation in a single  application.

🧪  Build a Simple Calculator

javascript

code

// Function Declarations function add(a, b) { return a + b; } function subtract(a, b) { return a - b; } const multiply = function(a, b) { return a * b; }; const divide = (a, b) => b !== 0 ? a / b : "Cannot divide by zero"; // Test Cases console.log(add(10, 5)); // 15 console.log(subtract(10, 5)); // 5 console.log(multiply(10, 5)); // 50 console.log(divide(10, 5)); // 2 console.log(divide(10, 0)); // Cannot divide by zero

💡 Observation:

Demonstrates multiple declaration methods

Uses validation in arrow function

Encourages debugging and experimentation

🔍  Insights

🔎 A.Behavior

Function declarations are hoisted, but function expressions are not.

javascript

code

// Works hoisted(); function hoisted() { console.log("I'm hoisted!"); } // Error notHoisted(); // TypeError: notHoisted is not a function var notHoisted = function() { console.log("I'm not hoisted!"); };

🔎 B. Memory Optimization

Functions reduce redundancy and optimize memory usage by reusing blocks of logic.

In large-scale applications, thousands of lines of logic are encapsulated in functions for maintainability and reusability.

📌 Summary Table

Feature

Function Declaration

Function Expression

Arrow Function

Hoisted

Yes

No

No

Syntax Length

Long

Medium

Short

this Binding

Dynamic

Dynamic

Lexical (fixed)

Use Cases

Utility functions

Dynamic assignment

Callbacks, short logic

📘 Assignment

1. Create a function to check if a string is a palindrome.

2. Create a function to generate Fibonacci numbers up to N.

3. Use function expressions and arrow functions to reimplement common array methods like map, filter.

📊 Assessment Quiz

What’s the difference between a function declaration and expression?

Can arrow functions access the this keyword from an object?

What will happen if you invoke a function expression before its definition?

🧠 Review Questions

Why are functions considered first-class citizens in JavaScript?

How do arrow functions handle this differently than traditional functions?

When should you use a named function vs an anonymous one?