Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
A JavaScript function is a reusable action: you define what it does, call it to run it, and can pass in values and get a result back. Once you separate a function’s definition from its call—and its parameters from its arguments—the syntax becomes much easier to read.
What a JavaScript function does
A function groups instructions under a reusable name or value. Instead of writing the same action repeatedly, you define it once and call it whenever you need it. A function can receive input, perform work, and return an output. Functions are fundamental building blocks in JavaScript; see MDN’s JavaScript function guide.
Define a function, then call it
A definition describes the behavior. A call runs that behavior. In this example, the definition is the whole greet function; the call is greet("Mina").
function greet(name) {
return `Hello, ${name}!`;
}
const message = greet("Mina");
console.log(message); // Hello, Mina!The function’s body is inside the braces. When called, it uses the supplied name to build a greeting. The call’s result is stored in message.
#1 Best Overall
Parameters are slots; arguments are the values you pass
In function greet(name), name is a parameter: a named slot the function can use. In greet("Mina"), "Mina" is an argument: the value supplied to that slot. This distinction is useful when explaining code, although documentation and everyday usage sometimes use the two terms interchangeably.
With more than one input, the order matters: the first argument is assigned to the first parameter, the second to the second, and so on.
function add(a, b) {
return a + b;
}
const total = add(2, 3);
console.log(total); // 5return determines the function’s result
A call evaluates to the value provided by the return statement that runs. In add(2, 3), the expression a + b evaluates to 5, and that is what the call produces. You can store that value, pass it to another function, or use it in an expression.
Rank #2
If execution reaches the end of the function without a return, the call produces undefined. Displaying a value with console.log is not the same as returning it:
function showSum(a, b) {
console.log(a + b);
}
const result = showSum(2, 3); // displays 5
console.log(result); // undefinedThe first log displays the sum, but showSum has no return statement, so its call evaluates to undefined. For the language’s declaration and return rules, see MDN’s function reference.
Function declarations and expressions differ in when they can be called
Declaration
A declaration uses the function keyword followed by a name. In its applicable scope, a function declaration can generally be called before the declaration appears in the source:
sayHi(); // Hi
function sayHi() {
console.log("Hi");
}This behavior is commonly called hoisting. It is a practical distinction, not a promise that declarations behave identically in every context; scope rules, including those for blocks, matter.
Expression assigned to a variable
A function expression creates a function value that can be assigned to a variable. Use it after the variable has been initialized:
const sayHi = function () {
console.log("Hi");
};
sayHi();Unlike a function declaration, a function expression assigned to a variable is not hoisted as a callable function definition in the same way. With const, calling it before initialization also runs into the variable’s initialization rules.
Rank #4
Arrow functions offer concise syntax, with different behavior
An arrow function is a kind of function expression. When its body is a single expression without braces, JavaScript returns that expression’s value automatically:
const square = (number) => number * number;
console.log(square(4)); // 16If you use braces for a block body, write return when you want to produce a value:
const squareWithBlock = (number) => {
return number * number;
};
const squareWithoutReturn = (number) => {
number * number;
};
console.log(squareWithBlock(4)); // 16
console.log(squareWithoutReturn(4)); // undefinedThe second function evaluates an expression but does not return it. The braces mark a block body, where an explicit return is needed. More syntax details and semantic differences are covered in MDN’s arrow function reference.
Arrow functions also do not have their own this or arguments; they use this from their surrounding context. That difference matters in code that relies on method context or constructor behavior, so an arrow function is not simply a shorter substitute for every traditional function.
Functions can keep access to surrounding variables
A function can refer to variables in the scope where it was created. A closure is a function together with access to that surrounding lexical environment, even after the outer function has finished:
function makeGreeter(name) {
return function () {
return `Hello, ${name}`;
};
}
const greetMina = makeGreeter("Mina");
console.log(greetMina()); // Hello, MinamakeGreeter finishes, but the returned function still has access to the name value it was created with. Closures are a useful next topic once definitions, calls, and return values feel familiar; MDN introduces them in its function guide.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Quick comparison of the three forms
| Form | Example shape | When the binding is usable | Return behavior | this and arguments |
|---|---|---|---|---|
| Function declaration | function name() { ... } |
Hoisted within its applicable scope, subject to scope rules. | Use return to produce a value; otherwise the call evaluates to undefined. |
Traditional function behavior; it has its own function context. |
| Function expression | const name = function () { ... } |
Use after the variable is initialized; not hoisted as a callable function definition in the same way. | Use return to produce a value; otherwise the call evaluates to undefined. |
Traditional function behavior; it has its own function context. |
| Arrow function | const name = () => ... |
Use after the variable is initialized; it is an expression. | A concise expression body returns implicitly; a block body needs an explicit return. |
Has no own this or arguments; takes this from its surrounding context. |
Choose based on the needed behavior and surrounding code. For a beginner, the key is to recognize whether you are looking at a declaration or an expression, and whether an arrow function’s body is an expression or a block.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
