JavaScript: Functions & Scope: Declarations & Expressions

📘 Functions & Scope: Function Declarations & Expressions

1️⃣ What is a Function?

A function is a reusable block of code designed to perform a specific task. Functions help make code modular, readable, and reusable.

2️⃣ Function Declaration

A function declaration defines a named function using the function keyword. It is hoisted, meaning you can call it before it is defined in the code.

// Function Declaration
function greet(name) {
  return "Hello, " + name + "!";
}

// Can be called before declaration (hoisting)
console.log(greet("Shivshanker")); // Hello, Shivshanker!
  

3️⃣ Function Expression

A function expression defines a function inside an expression and assigns it to a variable. It is not hoisted, so it can only be called after it is defined.

// Function Expression
const greetUser = function(name) {
  return "Hi, " + name + "!";
};

// Must be called after definition
console.log(greetUser("Shivshanker")); // Hi, Shivshanker!
  

4️⃣ Differences Between Declaration & Expression

Feature	Function Declaration	Function Expression
Syntax	function name() { }	const fn = function() { }
Hoisting	✅ Can be called before definition	❌ Cannot be called before definition
Name	Always has a name	Can be anonymous or named
Use Case	Good for defining reusable functions globally	Good for inline functions, callbacks

5️⃣ Scope Reminder

Scope defines where variables and functions are accessible:

• Global Scope → Accessible everywhere.
• Function Scope → Variables declared inside a function are only accessible inside it.
• Block Scope → Variables declared with let or const inside { } are only accessible within that block.

function testScope() {
  let localVar = "I'm local";
  console.log(localVar); // Accessible here
}
// console.log(localVar); ❌ Error: not defined
  

✅ Quick Recap

• Function Declaration → Named, hoisted, reusable.
• Function Expression → Assigned to variable, not hoisted, often anonymous.
• Scope → Controls where variables/functions can be accessed.

📌 Mini Project: Greeting Function

// Function Declaration
function greetMorning(name) {
  return "Good Morning, " + name + "!";
}

// Function Expression
const greetEvening = function(name) {
  return "Good Evening, " + name + "!";
};

console.log(greetMorning("Alice"));  // Good Morning, Alice!
console.log(greetEvening("Bob"));    // Good Evening, Bob!
  

✅ Best Practices for Functions

• Give functions descriptive names that indicate their purpose.
• Keep functions small and focused on a single task.
• Use default parameters to handle missing arguments.
• Avoid using too many global variables; prefer local scope.
• Use arrow functions for short callbacks and function expressions.
• Document functions with comments for clarity.
• Return values explicitly; avoid hidden side effects when possible.
• Prefer pure functions (no changes to external state) for reusability and testability.
• Reuse code by modularizing common logic into separate functions.