JS Functions
In this page:
Function Declaration
A function declaration defines a named, reusable block of code using the function keyword, which can then be called by that name anywhere it's in scope.
Note: Name functions with verbs that describe their action, like calculateTotal or greetUser, it makes calling code self-explanatory.
Warning: Two function declarations with the same name in the same scope silently overwrite each other, only the last one remains callable.
Example: Function Declaration
function greetUser() {
console.log("Hello!");
}
greetUser();Parameters and Arguments
Parameters are the named placeholders listed in a function's definition, while arguments are the actual values supplied when the function is called, parameters describe what a function expects, arguments provide it.
Note: A function can accept multiple parameters separated by commas, and you can name them anything that clearly describes their purpose.
Warning: Calling a function with fewer arguments than parameters simply leaves the missing ones as undefined, JavaScript does not throw an error by default.
Example: Parameters and Arguments
function add(a, b) {
console.log(a + b);
}
add(2, 3); // 2 and 3 are argumentsReturn Values
The return keyword sends a value back out of a function to whatever called it, and as soon as return runs, the function stops executing immediately, skipping any code after it.
Note: Store a function's returned value in a variable so you can use it later, rather than only logging it directly inside the function.
Warning: Without an explicit return statement, a function always produces undefined, even if it internally calculates something useful.
Example: Return Values
function square(n) {
return n * n;
}
console.log(square(4));Default Parameters
Default parameters let you specify a fallback value directly in the function definition, which is used automatically whenever the caller doesn't provide an argument for that parameter.
Note: Default parameters are a cleaner alternative to manually checking if (value === undefined) inside the function body.
Warning: A default parameter only applies when the argument is undefined or omitted, passing null explicitly does not trigger the default.
Example: Default Parameters
function greet(name = "Guest") {
console.log(`Hello, ${name}!`);
}
greet();
greet("Amit");Function Expressions and Hoisting
A function expression stores a function inside a variable rather than giving it a standalone name, and unlike function declarations, which are hoisted and callable anywhere in their scope, function expressions are only usable after the line where they're defined.
Note: Function expressions are especially useful when you need to pass a function as a value, like into another function or an event handler.
Warning: Calling a function expression before its definition line throws an error, since only the variable itself, not its function value, is hoisted.
Example: Function Expressions and Hoisting
const sayHi = function () {
console.log("Hi!");
};
sayHi();- Forgetting the return keyword, a function without an explicit return always produces undefined, even if it looks like it computes something.
- Confusing a function's parameters, the placeholders in its definition, with its arguments, the actual values passed in when it's called.
- Calling a function expression before its declaration line, unlike function declarations, expressions are not hoisted the same way.
- A function declaration defines a reusable, named block of code that can accept parameters and return a value.
- Default parameters let a function fall back to a preset value when an argument isn't provided.
- Function declarations are hoisted and usable before their definition line, function expressions are not.
Function declarations, expressions, and default parameters are all standard JavaScript features supported in every modern browser.
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: