JavaScript Functions
A function is a reusable block of code that runs only when you call it, letting you organize logic into named, repeatable units.
What Is a Function?
A function is a named container for a set of statements that perform a task. Instead of writing the same instructions over and over, you define them once inside a function and then run them whenever you need by calling the function's name. This keeps your programs shorter, easier to read, and much easier to change, because a fix made in one place applies everywhere the function is used.
Declaring a Function
The most common way to create a function is a function declaration. You start with the function keyword, followed by a name, a pair of parentheses that may hold parameters, and a body wrapped in curly braces. The code inside the braces does not run when the function is defined. It runs only when the function is called by writing its name followed by parentheses.
Declaring and calling a function
<!DOCTYPE html>
<html>
<body>
<h2>Declaring and calling a function</h2>
<script>
function greet() {
console.log("Hello there!");
}
// Nothing prints until we call it
greet(); // "Hello there!"
greet(); // "Hello there!" (call it as often as you like)
</script>
</body>
</html>Returning a Value
Many functions produce a result you want to use elsewhere. The return statement sends a value back to wherever the function was called and immediately stops the function. If a function has no return statement, or the statement has no value after it, the function returns undefined by default.
Using return to send back a result
<!DOCTYPE html>
<html>
<body>
<h2>Using return to send back a result</h2>
<script>
function add(a, b) {
return a + b;
}
const sum = add(4, 6);
console.log(sum); // 10
// Code after a return never runs
function firstPositive(n) {
if (n > 0) return "positive";
return "zero or negative";
}
console.log(firstPositive(3)); // "positive"
</script>
</body>
</html>Function Expressions
You can also store a function in a variable. This is called a function expression. The function on the right side can be anonymous (no name), and you call it through the variable. Unlike declarations, function expressions are not hoisted, so you must define them before you use them.
A function stored in a variable
<!DOCTYPE html>
<html>
<body>
<h2>A function stored in a variable</h2>
<script>
const square = function (x) {
return x * x;
};
console.log(square(5)); // 25
</script>
</body>
</html>Declarations vs Expressions
Why Functions Matter
- Reuse: write logic once and call it many times.
- Readability: a well-named function documents what the code does.
- Maintenance: fix or improve behavior in a single place.
- Testing: small focused functions are easier to verify.
Exercise: JavaScript Functions
Can a regular function declaration be called before it appears in the code?
