Function Parameters vs Arguments in JavaScript

Function Parameters vs Arguments in JavaScript

The terms "parameter" and "argument" are often confused. Here is the precise difference and the related features.

Parameters vs Arguments

• Parameters: the variables listed in the function definition.
• Arguments: the actual values passed when the function is called.

function greet(name, greeting) {  // name, greeting are parameters
  console.log(`${greeting}, ${name}`);
}
greet("Kunal", "Hello");          // "Kunal", "Hello" are arguments
``
### Default Parameters

```js
function greet(name = "friend", greeting = "Hi") {
  console.log(`${greeting}, ${name}`);
}
greet();              // "Hi, friend"
greet("Asha");        // "Hi, Asha"
greet(undefined, "Yo"); // "Yo, friend"
``
Defaults apply when the argument is `undefined` or omitted. Other falsy values (`0`, `""`, `null`) do not trigger the default.

### Rest Parameters

```js
function sum(...nums) {
  return nums.reduce((a, b) => a + b, 0);
}
sum(1, 2, 3, 4); // 10
``
Rest must be the last parameter. It is a true array (has `map`, `filter`, etc.), unlike `arguments`.

### Spread in Calls

```js
const nums = [1, 2, 3];
Math.max(...nums); // 3
``
Spread expands an array into individual arguments.

### Destructuring Parameters

```js
function render({ name, age = 0 }) {
  console.log(name, age);
}
render({ name: "Kunal" }); // "Kunal 0"
``
### The `arguments` Object

Available in regular (non-arrow) functions. Array-like, has `length` and indices, but no array methods:

```js
function show() {
  console.log(arguments.length, arguments[0]);
}
show("a", "b"); // 2 "a"
``
Arrow functions do not have their own `arguments`. Use rest parameters in arrows.

### Passing by Value vs Reference

- **Primitives** (number, string, boolean): passed by value. Changes inside the function do not affect the outer variable.
- **Objects and arrays**: passed by reference (the reference is passed by value). Mutating the object inside the function affects the outer object.

```js
function mutate(arr) {
  arr.push(4); // affects the outer array
}
const list = [1, 2, 3];
mutate(list);
console.log(list); // [1, 2, 3, 4]
``
### The Takeaway

Parameters are names in the definition; arguments are values you pass. Defaults apply for `undefined`. Rest collects extras into a real array. Spread expands an array into arguments. `arguments` is array-like (regular functions only). Primitives pass by value; objects pass by reference (mutation is visible).