JavaScript Function Parameters

What You'll Learn

You will learn how to define functions with parameters, how to pass values to these parameters, and how to handle different types of parameters, including default and rest parameters.

Positional Parameters

In JavaScript, positional parameters are the most common way to pass values into a function. These parameters must be provided in the exact order in which they are defined in the function.

function greet(name, age) {
  console.log(`Hello ${name}, you are ${age} years old.`);
}

greet("Tom", 25);

function greet(name, age) {
  console.log(`Hello ${name}, you are ${age} years old.`);
}

greet("Tom", 25);

How It Works:

• greet: This is the name of the function you are calling.
• "Alice": This is passed to the name parameter. The function expects the first argument to be a name.
• 25: This is passed to the age parameter. The function expects the second argument to be an age.
• The order of the arguments matters: the first argument is assigned to the first parameter, the second to the second, and so on.

Output

Hello Tom, you are 25 years old.

Hello Tom, you are 25 years old.

Default Parameters

In JavaScript, default parameters allow you to set a default value for a parameter. If no value is provided for that parameter when the function is called, the default value will be used instead.

function greet(name, age = 30) {
  console.log(`Hello ${name}, you are ${age} years old.`);
}

greet("Tom");  // Uses default age
greet("Peter", 25);  // Overrides default age

function greet(name, age = 30) {
  console.log(`Hello ${name}, you are ${age} years old.`);
}

greet("Tom");  // Uses default age
greet("Peter", 25);  // Overrides default age

How It Works:

• age = 30: This sets a default value of 30 for the age parameter.
• If you call the function with only the name parameter, the function will use the default value for age (which is 30).
• If you provide a value for age, it will override the default value.

Output

Hello Tom, you are 30 years old.
Hello Peter, you are 25 years old.

Hello Tom, you are 30 years old.
Hello Peter, you are 25 years old.

Rest Parameters

Rest parameters allow you to pass any number of arguments to a function, and they will be collected into a single array. You don’t need to define each argument separately—just use `...` to gather all extra values into an array.

function greet(...names) {
  console.log(names); 
}

greet("Tom", "Jules", "Charlie");

function greet(...names) {
  console.log(names); 
}

greet("Tom", "Jules", "Charlie");

How It Works:

• ...names: The three dots (`...`) before names collect all arguments passed to the function into a single array.
• The function prints the entire array, which contains all the names passed to it.
• You can pass as many arguments as you want, and all of them will be included in the array names.

Output

["Tom", "Jules", "Charlie"]

["Tom", "Jules", "Charlie"]

Destructured Parameters

Destructuring allows you to unpack values from arrays or properties from objects directly into variables. When used in function parameters, it helps you extract specific values from objects or arrays passed as arguments in a clean and readable way.

function greet({ name, age }) {
  console.log(`Hello ${name}, you are ${age} years old.`);
}

greet({ name: "Tom", age: 25 });

function greet({ name, age }) {
  console.log(`Hello ${name}, you are ${age} years old.`);
}

greet({ name: "Tom", age: 25 });

How It Works:

• { name, age }: This is destructuring. The function expects an object with the properties name and age, and these properties will be extracted directly into their own variables.
• The argument { name: "Alice", age: 25 } is passed, and JavaScript automatically extracts the values for name and age and assigns them to the corresponding variables.
• This makes it easy to access specific values from an object without having to refer to them using object notation (e.g., obj.name).

Output

Hello Tom, you are 25 years old.

Hello Tom, you are 25 years old.

Frequently Asked Questions

What's Next?

Next, you'll learn about JavaScript's return statement, which is used to send back a result from a function. The return statement allows you to pass values out of a function so you can use them elsewhere in your code.