🔍 JavaScript Functions Deep Dive #1: How Functions Are Defined, Named, and Used
pushpesh kumar4 min read
Functions are at the heart of JavaScript — powering everything from event handling to API interactions. In this article, we’ll dive deep into:
Function declarations vs expressions
Named vs anonymous functions
Parameters, arguments, and return values
1️⃣ Function Declarations vs Function Expressions
✅ Function Declaration
function greet(name) {
return `Hello, ${name}`;
}
console.log(greet("Alice")); // "Hello, Alice"
📜 Language Rules:
| Rule | Explanation |
| ✅ Hoisted | You can call it before its definition |
| 🧠 Scoped to nearest block or function | Traditionally, function declarations were only allowed at the top level (global or inside a function).Since ES6, JavaScript allows function declarations inside blocks like if, for, etc., and those functions are scoped only to that block (just like let and const). "Scoped to the nearest block or function" means It’s accessible only within the block or function where it's defined. |
| ⚠️ Name required | Function declarations must have a name |
| 🔁 Can be recursive | Name allows internal recursive calls |
✅ Example:
console.log(add(2, 3)); // ✅ Works
function add(x, y) {
return x + y;
}
✅ Function Expression
const greet = function(name) {
return `Hi, ${name}`;
};
console.log(greet("Bob")); // "Hi, Bob"
📜 Language Rules:
| Rule | Explanation |
| ❌ Not hoisted | Must be defined before use |
| ✅ Can be anonymous or named | Useful for debugging or recursion |
| 🧠 Expression | Treated like any variable or constant |
❌ Common Mistake:
console.log(add(2, 3)); // ❌ Error: Cannot access before initialization
const add = function (x, y) {
return x + y;
};
2️⃣ Anonymous vs Named Functions
🔸 Anonymous Function
A function without a name, often used in callbacks or expressions:
setTimeout(function () {
console.log("Timer done");
}, 1000);
📜 Language Rules:
| Rule | Explanation |
| ✅ Allowed only in expressions | Cannot be used in declarations |
| ⚠️ No internal name | Hard to reference itself or show in stack trace |
| 🔍 Useful in callbacks | Common in array methods, event handlers, timeouts |
🔸 Named Function Expression
const greet = function sayHi(name) {
return `Hello, ${name}`;
};
console.log(greet("Tom")); // ✅ Works
// sayHi("Tom"); // ❌ ReferenceError: sayHi is not defined
const greetings = function sayHello(name) {
if (!name) return sayHello("Guest"); // ✅ works here
return `Hello, ${name}`;
};
📜 Language Rules:
| Rule | Explanation |
| ✅ Name scoped only inside the function | sayHi is available only within its own body.Inside the function, you can use name of the function to reference itself — useful for recursion or internal debugging. |
| ✅ Used for recursion/debugging | Can self-reference |
3️⃣ Parameters, Arguments, and Return Values
🔹 Definitions
| Term | Meaning |
| Parameter | Variable listed in function definition |
| Argument | Value passed to the function |
| Return | Value the function gives back |
✅ Example:
function multiply(x, y) { // x, y are parameters
return x * y; // return value
}
console.log(multiply(3, 4)); // 12. Here 3, 4 are arguments
🔸 Language Rules for Parameters & Return:
| Rule | Behavior |
✅ Parameters default to undefined if not passed | |
✅ Can use default parameter values like function greet(name = "Guest") | |
| ✅ Only one return per call | return ends function execution immediately |
✅ Functions without return return undefined by default |
🧪 Advanced Tip: Default Parameters
function say(message = "Hi", name = "Guest") {
return `${message}, ${name}`;
}
console.log(say()); // Hi, Guest
function showValue(x = 10) {
console.log(x);
}
showValue(undefined); // ✅ 10 (default kicks in)
showValue(); // ✅ 10 (default kicks in)
showValue(null); // ❌ null (no default)
showValue(0); // ❌ 0 (no default)
showValue(false); // ❌ false (no default)
✅ Default values only kick in when the argument is undefined (not null or falsy).
🧠 Bonus: Arrow Functions (Sneak Peek)
You'll often see anonymous function expressions written with arrow functions:
const greet = (name) => `Hi, ${name}`;
We’ll dive into arrow functions (and their this behavior) in the next article.
✅ Recap Table
| Feature | Function Declaration | Function Expression | Anonymous Function |
| Hoisted | ✅ Yes | ❌ No | ❌ No |
| Named | ✅ Required | ✅ Optional | ❌ No |
| Can be Recursive | ✅ Yes | ✅ Yes (if named) | ❌ No |
| Use Case | General logic | Callbacks, assignment | Short inline use |
0
Subscribe to my newsletter
Read articles from pushpesh kumar directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by