Lesson 22: Mastering JavaScript Functions basics (Part-1)
manoj ymk4 min read
🔷 1. Core Concepts: Understand the Base Mechanics
| Topic | Concept |
| Function Declaration | function name(params) { body } — creates a reusable block of code |
| Calling a Function | funcName(args) — runs the function |
| Local Variables | Declared inside a function, not accessible outside |
| Outer Variables | Accessible inside the function unless shadowed |
| Global Variables | Declared outside any function, available everywhere |
🔷 2. Parameter Handling
| Type | Behavior |
| Parameter | Declared in function signature |
| Argument | Actual value passed during call |
| Missing Argument | Becomes undefined unless a default value is provided |
| Default Parameters | function fn(p = 5) — used if arg not passed or is undefined |
| Old-style Defaults | if (param === undefined) or `param = param |
| Nullish Coalescing | param = param ?? defaultVal (only null/undefined triggers default) |
🔷 3. Return Values
| Feature | Behavior |
return value | Ends function and returns value |
No return / return; | Returns undefined |
| Newline after return | 🧨 Syntax trap! Use: return (value) not return\nvalue |
🔷 4. Function Naming Best Practices
| Prefix | Meaning |
show | Displays something (e.g., UI alert) |
get | Retrieves a value |
set | Assigns or updates a value |
calc | Returns computed value |
check | Returns true/false |
create | Makes something new |
🧠 Rule of Thumb:
📌 "One function, one responsibility."
🔷 5. Function Organization Best Practices
| Tip | Benefit |
| Keep functions short | Easier to test and debug |
| Use descriptive names | Code reads like a story |
| Split big logic into small functions | Improves clarity and reuse |
| Think of functions like comments | Good names = self-explanatory docs |
🔷 6. Advanced Example: Prime Number Demo
function showPrimes(n) {
for (let i = 2; i < n; i++) {
if (!isPrime(i)) continue;
alert(i);
}
}
function isPrime(num) {
for (let i = 2; i < num; i++) {
if (num % i === 0) return false;
}
return true;
}
🔍 Why this rocks:
showPrimeshandles display logic.isPrimehandles logic check.Each function does ONE thing.
🔷 7. Common Pitfalls & Quirks
| Quirk | Gotcha |
return on a new line | JS inserts a semicolon — leads to empty return |
| Default parameters run on every call | Expressions inside defaults are executed per call |
| Local variable shadows global | Function will ignore global if a same-named local exists |
| Objects/arrays passed as arguments are by reference | Modifying them affects the original outside the function |
🔷 8. Real-World Usage Examples
validateForm(formData)sendNotification(user, message)createButton(label)getCurrentLocation()checkLoginStatus(token)
🔷 9. Interview Must-Know
| Question Type | Examples |
| ✍ Syntax | What’s the difference between parameter vs argument? |
| ⚙ Behavior | What is the return value of a function with no return? |
| 🧠 Debugging | Why does my global variable change after calling a function? |
| 💡 Tricky | What happens if I use return on a new line? |
🔷 10. Memory Hack Mnemonics
| Concept | Mnemonic |
| Function Definition | "Fun starts with func!" |
| Parameters vs Arguments | "Parameters are promises, Arguments are deliveries" |
| Return Quirk | "Don't return and walk away!" → Stay on the same line |
| Local scope | "What happens in a function, stays in the function." |
🔷 11. Mind Map Overview
Functions
│
├─ Declarations
│ └─ function name(params) { body }
│
├─ Variables
│ ├─ Local
│ ├─ Outer
│ └─ Global
│
├─ Parameters
│ ├─ Default values
│ ├─ Nullish handling (??)
│ └─ Legacy defaults (||)
│
├─ Return
│ ├─ return value
│ └─ return;
│
├─ Naming
│ ├─ Prefixes (get, show, check)
│ └─ Short, descriptive
│
├─ Best Practices
│ └─ One function = one task
│
└─ Debug & Traps
├─ Return newline issue
└─ Shadowing variables
0
Subscribe to my newsletter
Read articles from manoj ymk directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by