Parameters

As you've seen, you can pass along parameters to functions that become variables inside the function. Let's take a deeper dive about parameters.

Parameters/Arguments

function add(a, b) {
  const c = a + b;
  return c;
}

const output = add(2, 2)

Here's what we've learned so far in a bit more detail.

When we create a function, we can create a series of variables that will receive some values when the function is called.

Those variables are known as the parameters of the function.

When we call the function, the values we're passing to the function here are called arguments; So the arguments are being passed into the parameters. The difference is arguments are real values.

Order Matters

function values(a, b, c) {
  console.log(a); // 1
  console.log(b); // 2
  console.log(c); // undefined
}

values(1,2);

The arguments are passed in the order they are received into the parameters.

So, if you have a function that accepts three parameters, but you only send two arguments, the third would initialize as a variable inside the function, but it would have a value of undefined.

Initializing

function add(a=0, b=0, c=0) {
  return a + b + c;
}

output = add(1,2);
console.log(output) //3

You can also pass along a default value when you declare the parameters. If a value isn't sent, then the default value will be applied. That can be pretty handy.

In this example, since the value of C would normally be undefined, the addition would return a value of null.

Arguments Object

function add() {
  let argsSum = 0;
  for (let x = 0; x < arguments.length; x++) {
    argsSum += arguments[x];
  }
  return argsSum;
}

output = add(1,2,3,4,5);
console.log(output) //15

There is a special array-like object that you can use to read the values of all of the arguments passed.

Not surprisingly, it's called arguments. Notice I'm saying that it's an array-like object. It doesn't have access to several of the pretty useful methods you can use with arrays like sort, filter and map.

Rest Parameters

function add(...theArgs) {
  let argSum = theArgs.reduce(function(sum, val) {
    return (sum + val)
  })
  return argSum;
}

output = add(1,2,3,4,5);
console.log(output) //15

In newer versions of javascript, you can also pass along a rest parameter as the last parameter of the function. These have three dots and then the variable name.

That special parameter that can accept an infinite number of arguments.

You can combine the rest parameter with other variables, but the rest parameter should always be at the end.

Whereas the arguments object isn't a real array, the rest parameter is, that means you can use any method you can use in an array, so here I'm using the javascript reduce methods, which lets me go through each of the elements in the array and add them up easily.

Objects as Arguments

const $ = document.querySelector.bind(document)

function displayCard(myObj) {
  return `${myObj.name}`
}

$('#output').innerHTML = 
  displayCard({ name: 'Ray Villalobos'})

Try it

In addition to passing along basic values, you can also pass along an object as a parameter to a function.

Sometimes, this is more useful since we can then pass along values by reference and we don't have to worry about the order of the arguments.

function displayCard(myObj) {
  return (
    `<b>Name</b>: ${myObj.name}<br>
    <b>Twitter</b>: ${myObj.twitter}`
  )
}