10  JS Functions

Functions allow you to reuse code and be more efficient in your programming.

If you know you’ll be doing the same math over and over, you can build that into a function, and then pass in the numbers that you want calculated and return the result.

Let’s look at an example:

/*
If you had a function that took two arguments and returned their difference ...
*/
function subtractionMachine(argument1, argument2) {
  let newValue = argument1 - argument2;
  return newValue;
}

/*
We can create a variable "difference" and set it to the result or "return"
of the subtractionMachine function. In this case below, we are giving the
subractionMachine the "arguments" of 5 and 3.
*/
let difference = subtractionMachine(5, 3);

/*
You can the log the function's value by logging the variable ...
*/
console.log(difference);

/*
If I didn't want to create a variable first, I can 
log the returned value directly:
*/
console.log(subtractionMachine(5, 3));

10.1 How functions work

You can use the same yourname-javascript repo and files for this lesson that that we used for our first JavaScript lesson. We’ll just keep writing in the same file and script tag.

Let’s write a function that takes a single argument — a number — and squares it, then uses return to give us back the squared number.

  1. Add a console.log with the text “Using functions:”.
  2. Add a comment with the intent of your function // function to make square numbers. You should always comment a function with its purpose so others and your future self will know what it does.
  3. Create a new function called makeSquare with one argument called theNumb:
console.log("Using functions:");

// function to make square numbers
function makeSquare(theNumb) {

}

OK, we want our function to do two things:

  • Square our passed-in number and store it in a new variable. To square a number, you multiply it times itself.
  • Return the value of the new variable.

So, inside your function:

  1. Create a variable (name it what you want) and assign it “theNumb * theNumb”.
  2. return your new variable.
function makeSquare(theNumb) {
  let squared = theNumb * theNumb;
  return squared;
}
  1. In your code, call your function to make sure it works, logging the returned value to the console. For example:
  let try01 = makeSquare(3);
  console.log(try01);
  1. Call the function two more times with a different value.

BONUS: Update your function to use JavaScript’s Math Object to perform the squaring.

Note

In the code above, the variable that was declared inside the function, squared, cannot be referenced outside the scope of the function. If we try to add console.log(squared) outside the function, we would get an error. You can read more about variables and scope here.

10.2 Functions on your own

  1. Add a comment with the intent of your function // Functions on my own.
  2. Write another function (and name it anything you want, but I named mine makeName) that takes three arguments – firstName, middleName and lastName – and uses the + operator to combine the three arguments to form a full name. Make sure you add spaces (’ ’) in between the arguments so the returned value doesn’t look like ChristianClayMcDonald, or whatever.
  3. In your code, call the function with three different sets of names to make sure it works and log the returned value to the console each time.
  4. For one of those names, I want you to use Robert “Beto” O’Rourke. Note that his name has both a single quote and double quotes, so you will have to escape one or the other depending the quote style you used in your function.

10.3 Save it

  1. Commit your changes to git. It’s important to add and commit and your changes so I can see your history at this point.