JavaScript - difference between parameters and arguments in JavaScript

1. Definition

2. Example

function greet(name) {       // "name" is a parameter
    console.log(`Hello, ${name}!`);
}

greet("Alice");             // "Alice" is an argument
greet("Bob");               // "Bob" is an argument

Output:

Hello, Alice!
Hello, Bob!

Explanation:

• Parameter → name → acts like a placeholder variable.

• Argument → "Alice" and "Bob" → real data passed to the function.

3. Multiple Parameters & Arguments

You can define multiple parameters and pass multiple arguments.

function add(a, b) {
    console.log(a + b);
}

add(5, 10);   // 5 and 10 are arguments
add(20, 30);  // 20 and 30 are arguments

Output:

15
50

• a and b → parameters.

• 5, 10, 20, 30 → arguments.

4. Missing Arguments (Default Value undefined)

If you don’t pass enough arguments, the missing ones become undefined.

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

greet("Alice");  

Output:

Alice is undefined years old.

5. Default Parameters (ES6) ✅

To avoid undefined, you can set default values for parameters.

function greet(name = "Guest", age = 18) {
    console.log(`${name} is ${age} years old.`);
}

greet();                    // No arguments passed
greet("John");              // One argument passed
greet("Emma", 25);          // Two arguments passed

Output:

Guest is 18 years old.
John is 18 years old.
Emma is 25 years old.

6. Extra Arguments (Ignored by Default)

If you pass more arguments than parameters, JavaScript ignores the extra ones.

function show(a, b) {
    console.log(a, b);
}

show(1, 2, 3, 4);

Output:

1 2

But we can handle extra arguments using the arguments object or rest parameters.

7. The arguments Object (Old Way)

Inside a function, arguments contains all arguments passed.

function sum() {
    let total = 0;
    for (const num of arguments) {
        total += num;
    }
    console.log(total);
}

sum(10, 20, 30);  // 60
sum(5, 5);        // 10

8. Rest Parameters (Modern Way) ✅

Instead of using arguments, ES6 introduced rest parameters (...), which collect all arguments into an array.

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

console.log(sum(10, 20, 30)); // 60
console.log(sum(5, 5));       // 10
console.log(sum());           // 0

9. Quick Summary

10. Visual Example

// Function definition → name, age = PARAMETERS
function introduce(name, age) {
    console.log(`My name is ${name} and I am ${age} years old.`);
}

// Function call → "Alice", 25 = ARGUMENTS
introduce("Alice", 25);
introduce("Bob", 30);

Output:

My name is Alice and I am 25 years old.
My name is Bob and I am 30 years old.