JS Functions: Parameters, Arguments, and Return

Learn how to make your code reusable and powerful by mastering the core building blocks of JavaScript functions.

☕

Welcome! Let's explore how JavaScript functions work, using the analogy of a coffee machine.

/* Our coffee machine is ready... */

Parameters: The Blueprint

Parameters are the names you list in a function's definition. Think of them as placeholders or empty parking spots waiting for a car. They define what kind of data the function expects to receive. For example, in function greet(name), `name` is the parameter.

Arguments: The Real Data

Arguments are the real values you pass to the function when you call it. They are the "cars" that fill the parking spots. For instance, when you call greet("Alice"), the string `"Alice"` is the argument that fills the `name` parameter.

The 'return' Statement: Getting a Result

The return statement stops the execution of a function and sends a value back to where the function was called. If you don't use a return statement, the function automatically returns undefined. It’s how a function gives you an answer or result.

Putting It All Together: The Full Flow

When you call a function, the arguments are assigned to the parameters. The code inside the function's curly braces { } runs. When it hits a return statement (or the end of the function), the flow goes back to the caller, often with a resulting value.

Practice Zone

Interactive Test 1: Identify the Parts

Drag the labels to correctly identify each part of the code.

Arrastra en el orden correspondiente.

Arrastra las opciones:

num2

return

Completa el código:

function add(num1, ______) {

______num1 + num2; }

add(5, ______);

Unlock with Premium

Interactive Test 2: Complete the Function

Complete the function to make it work as intended.

Rellena los huecos en cada casilla.

 multiply(a, b) {
  return a * ;
}

let result = (7, 3);

Unlock with Premium

Practice Example: Code Your Own Function

Write a function called `subtract` that takes two parameters, `x` and `y`, and returns their difference (`x - y`).

Enunciado:

* Escribe el código a continuación. Los caracteres correctos se mostrarán en verde y los incorrectos en rojo.

function subtract(x, y) {
    return x - y;
}

Unlock with Premium

Knowledge Check

In the code 'let total = sum(10, 20);', what is '10'?

Unlock with Premium

← Previous Next →

Advanced Function Concepts

Once you master the basics, you can make your functions more flexible and powerful. Here are some common advanced techniques.

1. Default Parameters

You can provide a default value for a parameter in case an argument is not provided when the function is called. This prevents errors and makes your function more robust.

function greet(name = "Guest") {
  return `Hello, ${name}!`;
}

greet("Ana");  // "Hello, Ana!"
greet();      // "Hello, Guest!"

Hello, Guest!

2. The Rest Parameter

The rest parameter syntax (`...`) allows you to represent an indefinite number of arguments as an array. This is useful for functions that can accept a variable number of inputs.

function sumAll(...numbers) {
  let total = 0;
  for (const num of numbers) {
    total += num;
  }
  return total;
}

sumAll(1, 2, 3); // Returns 6

Result: 6

3. Arrow Functions & Implicit Return

Arrow functions provide a shorter syntax. If the function has only one expression, you can omit the curly braces and the `return` keyword—the result is returned automatically (implicitly).

// Traditional function
function double(x) {
  return x * 2;
}

// Arrow function with implicit return
const double = x => x * 2;

double(5); // Returns 10

Result: 10

Practical Takeaway: These techniques help you write cleaner, more efficient, and more adaptable code. Using default parameters prevents bugs, the rest parameter handles multiple inputs gracefully, and arrow functions make your code more concise.

JavaScript Function Glossary

Function Declaration: The definition of a function using the `function` keyword, a name, a list of parameters, and a block of code to be executed.
Parameter: A named variable listed in a function's definition that acts as a placeholder for an argument.
Argument: The actual value that is passed to a function when it is called (invoked).
Return Statement: The `return` keyword, which terminates function execution and specifies a value to be returned to the function caller.
Return Value: The value that a function passes back to the caller. If no value is specified, the return value is `undefined`.
Function Call (Invocation): The act of executing the code within a function, done by using the function's name followed by parentheses `()` containing any necessary arguments.
Scope: The context in which variables are accessible. Variables declared inside a function are typically only available within that function (local scope).