JavaScript Function Parameters

❮ Previous Next ❯

A JavaScript function doesn't check the values of its parameters (arguments).

Function Parameters and Arguments

In the previous part of this guide, you discovered that functions can include parameters:

function functionName(parameter1, parameter2, parameter3) {
// code to be executed
}

Function parameters are the names mentioned in the function definition.

Function arguments are the actual values that get sent to (and received by)a function.

Parameter Rules

JavaScript functions don't mention the data types for parameters in their definitions.

JavaScript functions do not check the types of the arguments they receive.

JavaScript functions do not verify the number of arguments they receive.

Default Parameters

If a function is used without providing all the required information (fewer than specified), the absent values are assigned the value undefined.

At times, it's fine, but in some cases, it's preferable to set a default value for the parameter.

Default Parameter Values

ES6 lets you set default values for function parameters.

Function Rest Parameter

The rest parameter (…) enables a function to handle a variable number of arguments in the form of an array.

The Arguments Object

In JavaScript, there is a special object called the arguments object that comes with functions.

The argument object holds a list of the values used when the function was called.

You can easily employ a function to locate the highest value in a list of numbers using this method:

Make a function that adds up all the given input values.

If you use more arguments than declared when calling a function, you can access these extra arguments using the arguments object.

Arguments are Passed by Value

In a function call, the parameters refer to the arguments of the function.

In JavaScript, arguments are transferred by value. This means that a function receives only the values of the arguments, not their specific locations.

If a function alters the value of an argument, it does not affect the original value of the parameter.

Modifications to inputs are not apparent outside the function.

Objects are Passed by Reference

In JavaScript, values represent object references.

Due to this, objects will act as if they are being handled as a reference:

When a function alters a property of an object, it modifies the original value.

Modifying object properties can be seen outside the function.

<!DOCTYPE html>
<html>
  <body>
    <p>Setting a default value to a function parameter.</p>
    <p id="demo"></p>
    <script>
      function myFunction(x, y) {
        if (y === undefined) {
          y = 2;
        }
        return x * y;
      }
      document.getElementById("demo").innerHTML = myFunction(4);
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript Functions</h1>
    <h2>Default Parameter Values</h2>
    <p>If y is not passed or undefined, then y = 10:</p>
    <p id="demo"></p>
    <script>
      function myFunction(x, y = 10) {
        return x + y;
      }
      document.getElementById("demo").innerHTML = myFunction(5);
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript Functions</h1>
    <h2>The Rest Parameter</h2>
    <p>The rest parameter (...) lets a function handle lots of arguments like they're in an array.</p>
    <p id="demo"></p>
    <script>
      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);
      document.getElementById("demo").innerHTML = x;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Functions</h2>
    <p>Finding the largest number.</p>
    <p id="demo"></p>
    <script>
      function findMax() {
        let max = -Infinity;
        for (let i = 0; i < arguments.length; i++) {
          if (arguments[i] > max) {
            max = arguments[i];
          }
        }
        return max;
      }
      document.getElementById("demo").innerHTML = findMax(4, 5, 6);
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Functions</h2>
    <p>Sum of all arguments:</p>
    <p id="demo"></p>
    <script>
      function sumAll() {
        let sum = 0;
        for (let i = 0; i < arguments.length; i++) {
          sum += arguments[i];
        }
        return sum;
      }
      document.getElementById("demo").innerHTML = sumAll(1, 123, 500, 115, 44, 88);
    </script>
  </body>
</html>

❮ Previous Next ❯

JavaScript Tutorial

JS Math

JS Versions

JS Objects

JS Functions

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web APIs

JS AJAX

JS JSON

JS vs jQuery

JS Graphics