JavaScript Tutorial
Functions are the foundation of reusable and testable JavaScript. Strong function design directly improves architecture quality.
Why this matters
Most business logic is implemented through functions. Understanding syntax and behavior prevents many runtime issues.
Function declarations are hoisted with implementation. Function expressions depend on assignment timing.
Arrow functions provide concise syntax and lexical this. They are useful for callbacks but not always suitable for methods.
Choose style based on behavior needs, not only syntax preference.
Use default parameters to prevent undefined edge cases and rest parameters for flexible argument counts.
Return explicit values from utility functions to avoid hidden undefined behavior in chains.
console.log(add(2, 3)); // 5
function add(a, b) {
return a + b;
}
const subtract = function (a, b) {
return a - b;
};
console.log(subtract(8, 3));Declaration hoists fully, expression does not.
const profile = {
name: "Nina",
normal() {
return this.name;
},
arrow: () => this?.name,
};
console.log(profile.normal()); // Nina
console.log(profile.arrow()); // usually undefinedArrow functions inherit outer this, so avoid them for object methods needing local context.
function invoice(tax = 0.18, ...amounts) {
const subtotal = amounts.reduce((sum, n) => sum + n, 0);
return subtotal + subtotal * tax;
}
console.log(invoice(0.18, 120, 80, 50));Cleaner APIs with default values and flexible argument handling.
Use method syntax or function keyword for dynamic this binding.
Split into smaller composable helpers with clear input-output.
Return explicit output in utility functions.
No. They are concise, but not ideal where method-level this behavior is required.
A function that accepts another function or returns one.
Yes, due to hoisting behavior.
Yes, when sensible defaults prevent undefined edge-case bugs.