~ Contribute

Suggest a correction or improvement. The author reviews it before it goes live.

Comment0 / 300

en/tutorials/js/10js-parameters-arguments

# JavaScript Parameters & Arguments

Parameters are variables in function definitions. Arguments are values passed when calling.

## Parameters vs Arguments

```javascript
function greet(name, age) {  // name, age = parameters
  console.log(`Hello ${name}, you are ${age}`);
}

greet("John", 25);  // "John", 25 = arguments
```

## Default Parameters

Use defaults when no argument is provided:

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

greet("John");  // "Hello, John!"
greet();         // "Hello, Guest!"
```

## Multiple Defaults

```javascript
function createUser(name = "Anonymous", age = 0, role = "user") {
  return { name, age, role };
}

createUser("John", 25, "admin"); // { name: "John", age: 25, role: "admin" }
createUser("Jane");               // { name: "Jane", age: 0, role: "user" }
```

## Rest Parameters

Collect any number of arguments into an array:

```javascript
function sum(...numbers) {
  return numbers.reduce((total, n) => total + n, 0);
}

sum(1, 2, 3);      // 6
sum(1, 2, 3, 4);   // 10
```

## Rest with Regular Parameters

```javascript
function log(level, ...messages) {
  console.log(`[${level}]`);
  messages.forEach((msg) => console.log(msg));
}

log("INFO", "User logged in", "Session started");
// [INFO]
// User logged in
// Session started
```

## Spread in Function Calls

Expand an array into individual arguments:

```javascript
function add(a, b, c) {
  return a + b + c;
}

let numbers = [1, 2, 3];
add(...numbers);  // 6
```

## Complete Example: Calculator

```javascript
function calculate(a, b, operation = "+") {
  if (operation === "+") return a + b;
  if (operation === "-") return a - b;
  if (operation === "*") return a * b;
  if (operation === "/") return b !== 0 ? a / b : "Cannot divide by zero";
  return "Invalid operation";
}

calculate(10, 5);       // 15
calculate(10, 5, "*");  // 50
```

## Best Practices

1. **Use default parameters** — prevent undefined values
2. **Use rest parameters** — instead of the old `arguments` object
3. **Use spread to pass arrays** — as function arguments
4. **Use destructuring for many parameters** — `{ name, age }` pattern

## Common Mistakes

1. **Too many positional parameters** — use an object instead
2. **Using `arguments` with arrow functions** — not available
3. **Forgetting to provide defaults** — results in undefined
4. **Mutating parameters** — avoid side effects

No changes yet

cancel