What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
A JavaScript function is reusable behavior: define what it should do, call it to run that behavior, and use return to send a result back. Once you can distinguish a function’s definition from its call—and its parameters from the arguments you pass—the syntax becomes much easier to read.
What a function does
A function packages instructions so they can be run when needed. It can accept input, perform work, and produce an output. A function may also perform an action without returning a useful value, such as displaying a message.
As an Amazon Associate I earn from qualifying purchases.
Think of the definition as the reusable recipe and the call as asking JavaScript to follow it. Writing a definition alone does not run the function.
Recommended Free Tools
Define a function, then call it
This function takes a name and creates a greeting:
function greet(name) {
return `Hello, ${name}!`;
}
const message = greet("Mina");
console.log(message); // Hello, Mina!function greet(name) { ... } defines the function. The line greet("Mina") calls it; the parentheses trigger execution. In the definition, name is a parameter—a named slot for input. In the call, "Mina" is an argument—the value supplied for that slot. Documentation and everyday conversation sometimes use “parameter” and “argument” less strictly, but this distinction is useful when learning.
#1 Best Overall
Use return to get a result
A function call evaluates to the value produced by the last return statement it reaches. You can store that result, pass it to another function, or use it in an expression.
function add(a, b) {
return a + b;
}
const total = add(2, 3);
console.log(total); // 5Here, add(2, 3) evaluates to 5, which is assigned to total. If execution reaches the end of a function without reaching a return, the call evaluates to undefined.
Rank #2
function announce() {
console.log("Ready!");
}
const result = announce();
console.log(result); // undefinedconsole.log displays a value; it does not return that value from announce. Displaying something and returning a result are separate jobs.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchesChoose a function form
Declarations, function expressions, and arrow functions all define functions, but they differ in syntax and behavior. There is no universally best form: choose according to when the function needs to be available and how it must behave.
| Form | Example | When usable | Return and behavior |
|---|---|---|---|
| Function declaration | function greet() { ... } |
Hoisted within its applicable scope, so it can generally be called before its declaration. Scope details matter, including in strict-mode blocks and modules. | Use an explicit return to return a value. Has its own function behavior, including its own this binding. |
| Function expression | const greet = function () { ... }; |
Use after the variable has been initialized; the function expression is not hoisted as a callable definition in the same way as a declaration. | Use an explicit return to return a value. A traditional function expression has its own this binding. |
| Arrow function | const greet = () => ...; |
Use after the variable has been initialized, as with a function expression assigned to a variable. | An expression body returns implicitly; a block body needs explicit return. It inherits this from its surrounding context and has no own arguments. |
Function declarations
A declaration names the function directly:
sayHi(); // Hi
function sayHi() {
console.log("Hi");
}This works because declarations are hoisted within their applicable scope. Hoisting is a practical difference, not a reason to assume every declaration behaves identically in every scope.
Function expressions
A function expression creates a function that is commonly assigned to a variable:
Rank #4
const sayHi = function () {
console.log("Hi");
};
sayHi(); // HiCall it after the variable has been initialized. Do not rely on calling this expression before its assignment.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Arrow functions
Arrow functions provide a concise function-expression syntax. With an expression body, the expression’s value is returned automatically:
const square = (number) => number * number;
console.log(square(4)); // 16If the body uses braces, it is a block body, so write return when you want to return a value:
const squareWithBlock = (number) => {
return number * number;
};
const squareWithoutReturn = (number) => {
number * number;
};
console.log(squareWithBlock(4)); // 16
console.log(squareWithoutReturn(4)); // undefinedThe second arrow function calculates an expression but does not return it. Arrow functions also differ from traditional functions in contexts involving this, arguments, and constructor use; they are not simply interchangeable shorter syntax.
How scope leads to closures
A function can refer to variables in the scope where it was created. A closure is a function together with continued 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 from its surrounding scope. Closures are a useful next topic once defining, calling, and returning from functions feels familiar.
A quick way to read function code
- Find the definition: where is the reusable behavior written?
- Find the call: where do parentheses run that behavior?
- Match each argument in the call with its parameter in the definition.
- Look for the executed
returnto see what value the call produces; if none is reached, the result isundefined. - For an arrow function, check whether its body is an expression or a braced block.
For reference, MDN’s JavaScript function guide covers definitions, calls, parameters, scope, closures, and arrow functions. Its function reference explains declaration and return behavior, and the arrow function reference details arrow syntax and its semantic differences.
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.
