Javascript programmers benefit from encapsulating code into functions: duplication is removed, both readability and maintenance improve, and some protections are conferred because code inside a function executes in its own scope. This blog post covers how to pass arguments (also known as parameters) to Javascript functions.

Javascript Functions — A Refresher

Javascript functions allow a programmer to define a common block of code, the expected inputs (the parameters), and the value returned from the function’s computations. Functions are the first big step towards writing large-scale maintainable software.

Javascript function definitions have the syntax

function function_name( parameters ) {
// function body - code to be executed
return value ;
}

Unlike some other programming languages, Javascript does not:

• specify the data types for parameters
• check the number of passed parameters
• perform type-checking on the parameters

Default Parameter Values

If fewer parameters are passed to a function than have been declared the missing values are set to the special value undefined. While it’s technically acceptable to rely upon this behavior, best practices dictate providing some sanity-checking to your code. The following checks the value of the variable a_parameter and sets it to zero if it was omitted from the function call:

function function_name( a_parameter ) {
  if ( a_parameter === undefined ) {
    a_parameter = 0 ;
  }
  // function body - code to be executed
}

Javascript ES6, 2015 provided syntax for a more compact, in-line way of specifying default parameter values:

function function_name( a_parameter = 0 ) {
  // function body - code to be executed
}

Passing Variables Versus Objects

Simple variables are passed into functions "by value" while objects are passed "by reference" — the difference is noteworthy.

Variables Are Passed By Value

Javascript functions get the value of the variables passed in as parameters, but not their locations.

A function changing a parameter’s value does not change the parameter’s original value. Changes made to parameters are not visible outside the function. This mean that the function definition:

function an_example( i ) {
  i = 12345 ;
}

refers to a variable named i that exists only within the function body, resulting in the behavior of the following code snippet:

let i = 1 ;
an_example( i ) ;
console.log( "variable i has the value " + i ) ;

prints out the string variable i has the value 1 (that is to say, i was changed to be 12345 within the function body but restored to 1 when the function ended). To change the outer version of i would require:

function an_example( i ) {
  return 12345 ;
}

let i ;
i = an_example( i ) ; // capture the function's return value
console.log( "variable i has the value " + i ) ;

Objects Are Passed By Reference

In contrast, objects are "passed by reference" — rather than copying the entire (possibly large) object the location of the object is passed into functions. This has the effect that if a function changes an object property, it changes the original value. Changes to object properties are visible outside the function.

A Real-World Example

Consider the following lines of code:

let mean_average_height_cm = ( 177 + 183 + 201 + 191 + 162 ) / 5 ;
let mean_average_weight_kg = ( 90 + 88 + 97 + 100 + 79 ) / 5 ;

They perform the same operation — returning the mean average of the five parameters passed — on different sets of data. This is a deceptively simple example; the advantages of using a Javascript argument won’t become apparent until we cover a few more steps.

Creating the function mean_average() and passing the data as a comma-delimited list winds up with more code, which seems to be making things more complicated. In the short term, yes, but not for long.

function mean_average( n1, n2, n3, n4, n5 ) {
  return ( n1 + n2 + n3 + n4 + n5 ) / 5 ;
}

mean_average_height_cm = mean_average( 177, 183, 201, 191, 162 ) ;
mean_average_weight_kg = mean_average( 90, 88, 97, 100, 79 ) ;

This design pattern fails because it rigidly assumes that there will always be five values to be averaged.

The Javascript Arguments Object

The JavaScript built-in arguments object provides functions with the ability to be flexible in this regard. arguments is an array of the parameters used when the function was called.

The mean_average() function can be written more flexibly using the arguments object:

function mean_average() {
  let total = 0 ;
  for ( let i = 0 ; i < arguments.length ; i++ ) {
    total += arguments[i] ;
  }
  return total / arguments.length ;
}

Now calls to mean_average() with arbitrary numbers of parameters succeed:

mean_average( 1, 2 ) ;
mean_average( 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13 ) ;

Conclusion

This blog post covered passing parameters (arguments) into functions, setting up default parameter values, the difference between call by reference and by value, and how to flexibly write functions which take a variable number of parameters with the Javascript argument object.

Start Learning

To learn more about Javascript, check out other Javascript blog posts and enroll in our Javascript Nanodegree programs, including Intermediate Javascript.