Arguments vs Parameters in JavaScript
Tags: javascript, webdev, beginners, programming
Published: 2022-10-11 14:14:14

People often use arguments and parameters interchangeably, but they are different. So, let's discuss their differences.

## What Is the Difference between Arguments and Parameters?

**Arguments** are the optional values you pass to a function through an invocator. And **parameters** are the names you assign to the values.


![Arguments vs. parameters anatomy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dcbridp2keat6tqza7e8.png)

<figcaption>
  Arguments are values. Parameters are the names of the values.
</figcaption>

## Syntax of Arguments vs. Parameters

We specify parameters and arguments in the parentheses that follow your function's name. Here's the syntax:

```js
function nameOfFunction(parameter1, parameter2) {
  // function's body
}

nameOfFunction(argument1, argument2);
```

## Example of Arguments vs. Parameters

```js
// Define a function with two parameters:
function bestColors(first, second) {
  return first + " " + second;
}

// Invoke the bestColors() function with two arguments:
bestColors("White", "Blue");

// The invocation above will return: "White Blue"
```

In the snippet above, `"White"` and `"Blue"` are the arguments (values) we passed to the function's `first` and `second` parameters.

## Important Stuff to Know about Arguments and Parameters

Here are two essential facts to remember when using JavaScript arguments and parameters.

### 1. Arguments and parameters are optional

Arguments and parameters are optional components of a function. In other words, you can omit the parameters if your function won't use any argument.

For instance, JavaScript's [`trim()`](https://codesweetly.com/javascript-string-trim-method) method has no parameter because it takes no arguments.

On the other hand, [`match()`](https://codesweetly.com/javascript-string-match-method) has a single parameter that accepts one argument.

### 2. Arguments vs. `arguments` object

JavaScript automatically adds an [array-like](https://codesweetly.com/array-vs-array-like-objects) object (called `arguments`) to every non-[arrow function](https://codesweetly.com/javascript-function-object#what-is-a-javascript-arrow-function-expression) you define.

The `arguments` object stores all the arguments (values) you pass to your function's parameter.

In other words, JavaScript will put each value (argument) you pass to your function's parameter into the function's built-in `arguments` object.

**Here's an example:**

```js
// Define a function with two parameters:
function bestColors(first, second) {
  return arguments;
}

// Invoke the bestColors() function with two arguments:
bestColors("White", "Blue");

// The invocation above will return:
["White", "Blue"]

// Note: Some browser's returned value may look like so:
{0: "White", 1: "Blue"}
```

`bestColors()` returned an array-like object having the values we passed to its parameters because we programmed it to return its built-in `arguments` object's content.

## Overview

Arguments are the values users pass to a function's parameters. 

## Thanks for reading

I hope you've found this article helpful. Please, feel free to reach out if you have any questions.

You can also visit my [website](https://codesweetly.com/) for more articles like this.

Want to connect? Follow me on [Twitter](https://twitter.com/oluwatobiss).