JavaScript Tutorial
JavaScript Functions
A function is a named block you can call. Parameters go in, a return value comes out.
A named block
A function packages a list of statements behind a name. You write the steps once. You call the name whenever you need those steps. Without functions, every total, every greeting, and every click handler would be copy-pasted.
A function declaration starts with the keyword function, then a name, then parentheses, then a brace body. The function does not run when you declare it. It runs when something calls it.
Declare and call
The name in the declaration is how you call it. Write the name, then (). Each call runs the body from the top. After the body finishes, the program continues on the next line after the call.
Example
function greet() {
console.log("Hello, JavaScript.");
}
greet();
greet();
greet is the function. greet() is a call. Two calls print two lines. Forgetting the parentheses does not run the body — it just refers to the function value.
Click Try it in JavaScript to open /javascript/try. The console under the page shows each greeting.
Parameters go in
Names inside the parentheses are parameters. Values you pass at the call site are arguments. Inside the body, the parameter is a local name for that argument. A new call can pass a different argument.
Example
function greet(name) {
console.log("Hello, " + name + ".");
}
greet("Mina");
greet("Omar");
function area(width, height) {
console.log(width * height);
}
area(8, 3);
area(12, 5);
greet("Mina") binds name to "Mina" for that call only. The next call binds name to "Omar". area takes two parameters, in order: first width, then height.
A return value comes out
return hands a value back to the caller and stops the function. The call is then replaced by that value. You can print it, store it, or send it into another call.
Example
function square(x) {
return x * x;
}
console.log(square(3));
const result = square(5);
console.log(result);
function fullName(first, last) {
return first + " " + last;
}
console.log(fullName("Mina", "Costa"));
square(3) becomes 9. fullName("Mina", "Costa") becomes"Mina Costa". After return, nothing else in that function runs.
No return means undefined
If the body has no return, the call evaluates to undefined. That is fine when the function's job is to print, or to change the page. It is a bug when you writeconst n = greet(); and expected a string.
Return a value when the caller needs a result. Skip return when the function's only job is a side effect — console.log, or setting textContent.
return is not console.log. Logging shows a value in the console. Returning gives the caller a value to use. A function can do both, but they are different jobs.
Functions that change the page
A function can read the DOM and write back to it. That is how a button updates a heading. Put the work in a function, then call it from a click — the events chapter covers the listener. Here, the script calls the function itself so you can see the page change.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Functions</title>
</head>
<body>
<h1 id="title">Untitled</h1>
<p id="out"></p>
<script>
function headline(text) {
document.getElementById("title").textContent = text;
}
function sum(a, b) {
return a + b;
}
headline("Order total");
document.getElementById("out").textContent = "Pay " + sum(12, 8);
</script>
</body>
</html>Other ways to write a function
A function declaration is the form this tutorial uses first. You can also store a function in aconst:
const square = function (x) { return x * x; };
Or an arrow function:
const square = (x) => x * x;
All three are callable as square(3). Declarations are hoisted (you can call them above the line that defines them). const functions are not. Use declarations until you have a reason not to. Arrow functions show up in array methods later.
Next: objects — named values behind one name, with dot notation and brackets.