Open Playground
JS FunctionsLesson #45

JavaScript Function Arguments

In JavaScript, function parameters and arguments are distinct concepts:

Parameters vs. Arguments

In JavaScript, function parameters and arguments are distinct concepts:

Parameters are the names listed in the function definition.

Arguments are the real values passed to, and received by the function.

Example

Example Code

javascript
Try it Yourself
function multiply(a, b) {

  return a * b;

}

let result = multiply(4, 5);

In the example above:

  • a and b are parameters
  • 4 and 5 are arguments

The argument 4 is assigned to the parameter a.

The argument 5 is assigned to the parameter b.


The Arguments Object

JavaScript functions have a built-in object called the arguments object.

The argument object contains an array of the arguments used when the function was called (invoked).

This way you can simply use a function to find (for instance) the highest value in a list of numbers:

Example

Example Code

javascript
Try it Yourself
x = findMax(1, 123, 500, 115, 44, 88);

function findMax() {

  let max = -Infinity;

    for (let i = 0; i   max) {

      max = arguments[i];

      }

    }

    return max;

}

Or create a function to sum all input values:

Example

Example Code

javascript
Try it Yourself
x = sumAll(1, 123, 500, 115, 44, 88);

function sumAll() {

  let sum = 0;

    for (let i = 0; i   If a function is called with too many arguments (more than declared),
> these arguments can be reached using the arguments object.

---

## The Order of Arguments Matters

Arguments are assigned to parameters in the order they appear.**

### Example

javascript function subtract(a, b) {

return a - b;

}

let x1 = subtract(10, 5);

let x2 = subtract(5, 10);

Example Code

html
Try it Yourself
> The two calls above return different results because the order is different.

---

## Arguments Can Be Variables

Arguments do not have to be values. They can also be variables.

### Example

javascript let x = 5;

let y = 6;

function multiply(a, b) {

return a * b;

}

multiply(x, y);

Example Code

html
Try it Yourself
---

## Argument Rules

JavaScript function definitions do not specify data types** for arguments.

JavaScript functions **do not perform type checking** on the passed arguments.

JavaScript functions **do not check the number** of arguments received.

---

## Incorrect Arguments

Incorrect arguments can return incorrect answers:

### Example

javascript function toCelsius(fahrenheit) {

return (5/9) * (fahrenheit-32);

}

let value = toCelsius("John");

Example Code

html
Try it Yourself
---

## Missing Arguments

If a function is called with fewer arguments than parameters, the missing values become **undefined**.**

### Example

javascript function multiply(a, b) {

return a * b;

}

multiply(4);

Example Code

html
Try it Yourself
In the example above, b** is **undefined**, so the result is **NaN**.**

> A JavaScript function does not perform any checking on parameter values (arguments).

---

## Default Parameters

If a function is called with missing arguments** (less than declared), the missing values are set to `undefined`.

Sometimes this is acceptable, but sometimes it is better to assign a default value to the parameter:

### Example

javascript function myFunction(x, y) {

if (y === undefined) {

y = 2;

}

}

Example Code

html
Try it Yourself
## Default Parameter Values

[**ECMAScript 2015**](js_es6.asp) allows function parameters to have default values.

You can now set a default value for a parameter.

The default value is used if no argument is provided.

### Example

javascript function myFunction(x, y = 10) {

return x + y; } myFunction(5);

Example Code

html
Try it Yourself
---

## Function Rest Parameter

The rest parameter (...) allows a function to treat an indefinite number of arguments as an array:

### Example

javascript function sum(...args) {

let sum = 0;

for (let arg of args) sum += arg;

return sum;

}

let x = sum(4, 9, 16, 25, 29, 100, 66, 77); ```


Arguments are Passed by Value

The parameters, in a function call, are the function's arguments.

JavaScript arguments are passed by value: The function only gets to know the values, not the argument's locations.

If a function changes an argument's value, it does not change the parameter's original value.

Changes to arguments are not visible (reflected) outside the function.


Objects are Passed by Reference

In JavaScript, object references are values.

Because of this, objects will behave like they are passed by reference:

If a function changes an object property, it changes the original value.

Changes to object properties are visible (reflected) outside the function.


Common Mistakes

  • ### Confusing Parameters and Arguments Parameters are names.Arguments are values.
  • ### Forgetting the Order Arguments are assigned by position.
  • ### Missing Arguments Use default values to avoid undefined.

Quiz > What happens when a function is called with fewer arguments than parameters?

Next Chapter > Function Expressions > A function expression is a function stored in a variable > The variable name can be used to call the function

Interactive Code Examples

JS Example 1

javascript
Try it Yourself
JavaScript syntax and algorithm demonstration.
function multiply(a, b) {

  return a * b;

}


let result = multiply(4, 5);

JS Example 2

javascript
Try it Yourself
JavaScript syntax and algorithm demonstration.
x = findMax(1, 123, 500, 115, 44, 88);

function findMax() {

  let max = -Infinity;

    for (let i = 0; i < arguments.length; i++) {

      if (arguments[i] > max) {

      max = arguments[i];

      }

    }

    return max;

}

JS Example 3

javascript
Try it Yourself
JavaScript syntax and algorithm demonstration.
x = sumAll(1, 123, 500, 115, 44, 88);



function sumAll() {

  let sum = 0;

    for (let i = 0; i < arguments.length; i++) {

    sum += arguments[i];

    }

    return sum;

}

JS Example 4

javascript
Try it Yourself
JavaScript syntax and algorithm demonstration.
function subtract(a, b) {

  return a - b;

}


let x1 = subtract(10, 5);

let x2 = subtract(5, 10);

JS Example 5

javascript
Try it Yourself
JavaScript syntax and algorithm demonstration.
let x = 5;

    let y = 6;


    function multiply(a, b) {

      return a * b;

    }


    multiply(x, y);

JS Example 6

javascript
Try it Yourself
JavaScript syntax and algorithm demonstration.
function toCelsius(fahrenheit) {

    return (5/9) * (fahrenheit-32);

}



let value = toCelsius("John");