Set up a place to try the examples

You need a modern web browser with JavaScript enabled and access to its developer console. The examples use standard function syntax and console.log; no library or package installation is needed. Open your browser’s developer tools, find the Console tab, and paste in each example to see its output. If you prefer a local JavaScript runtime, one that supports ECMAScript 2015 or newer will also run these examples.

A function is a named block of code that you can call when you need it. Instead of repeating the same calculation in several places, you define it once and pass in the values it should use. Three terms describe that exchange: parameters name the inputs in the function definition, arguments supply values when you call it, and a return value carries a result back to the caller.

Parameters are names for inputs

Consider this function: function add(a, b) { return a + b; } The names a and b are parameters. They act as local names for values the function receives. The function definition describes what to do, but it does not perform the addition until you call add. Choosing descriptive parameter names can make a larger function easier to read; a function that calculates a price might use price and quantity instead of a and b.

Parameters belong to the function’s own scope. Code outside add cannot use its parameter a as though it were a separate variable in the surrounding program. That separation lets different calls use different inputs without requiring you to rename the parameters each time. Parameters also do not specify a JavaScript type: add(3, 4) performs numeric addition, while add('Hello, ', 'Sam') joins two strings. When the type matters, give the function a clear name and check or document the inputs it expects.

Arguments are the values you pass

Try this call after defining add: console.log(add(3, 4)); It prints 7. Here, 3 and 4 are arguments. JavaScript evaluates each argument expression before the function uses its resulting value. For example, add(1 + 2, 4) also produces 7. You can call the same function again with other values; the parameter names stay the same, but the values assigned to them for that call change.

The order of arguments matters. In function subtract(first, second) { return first - second; }, subtract(10, 3) returns 7, while subtract(3, 10) returns -7. If you omit an argument, its corresponding parameter normally has the value undefined. For example, add(3) returns NaN because 3 + undefined is not a valid numeric result. Extra arguments do not automatically become additional named parameters: add(3, 4, 5) still returns 7. These behaviors are useful to know, but a beginner-friendly function should make its expected inputs clear.

Return sends a result back

A return statement ends the current function call and supplies its value to the code that called it. In add(3, 4), the expression a + b becomes the return value, which console.log then prints. You can also save that result: const total = add(3, 4); console.log(total); The variable total receives 7, so other code can use it without calling add again.

Printing and returning are different. This function prints a value but does not return it: function showDouble(number) { console.log(number * 2); } If you run const result = showDouble(5); console.log(result); the console displays 10 from inside the function, then undefined for result. A function without an explicit return value returns undefined. Use console.log when you want to inspect or display something; use return when the caller needs a value for another calculation. A function can do both, but a return value makes a calculation easier to reuse.

Practice tracing a function call

Try function square(number) { return number * number; } followed by console.log(square(6)); The argument 6 is assigned to the parameter number for that call. The expression number * number evaluates to 36, and return passes 36 to console.log. Next, try console.log(square(2 + 3)); The argument expression evaluates to 5 before the function uses it, so the printed result is 25.

When a result surprises you, trace those steps in order: identify the arguments, match them to parameters, evaluate the statements, and locate the return. Check for a missing argument, a different argument order, or a function that logs a result without returning it. You can add temporary console.log calls inside a function to inspect parameter values, then remove them once the behavior is clear. This small habit makes longer functions less mysterious.

Back to category ↗