Lesson 3

Functions

Oh, go on an admit it. It's hard to talk about this lesson without thinking about School House rock! You know you want to sing the song. In the case of JS, the function is quite important. It keeps you from having to write code over and over, when you can just make a function that evaluates one condition against another.

Plus, there have been updates to streamline the function writing process, as in concise body. I'll be honest with you though, they really only save you typing a few charachters here and there. For the most part, people just don't use the fat arrow too much. Honestly, I think it's because there is actually more to remember. Your code changes based on the number of parameters. Whereas the older way you used the same syntax no matter what. Less to remember. Maybe that's why I prefer it.

When it comes to your work for me, you may do either, but I'm a lot more familiar with the non-concise method. For one, it just makes more sense to me. So if you want to use the concise body, go for it, but keep in mind, it's harder for me to find your errors, therefore, while I'll definately try to find them, I may not be as successful.

Here are the basics, at least in the older way.

function
Like using var. It creates a var name and indentifies it as a function at the same time.
identifier
This is the name of your variable/function. This needs to include () after it. Example: greetInFrench()
function body
After the identifier, such as greetInFrench() you need your brackets {}. These hold the body of the function. What your function does is coded within the brackets.
Calling a function
This is used outside of the current function. It usually just means typing the function();
parameter
These are the values that you pass to your funtion. Such as when you are trying to calculate the area of a room, your parameters are length and width. Or calculating the volume of a space uses the parameters of length, height, and width.

A few things things to note here:

  1. This is what your syntax for a basic function looks like:
    An example of a JavaScript function in its simplest syntax.
  2. A simple working function: Incidentally, look at the example below. Can you tell me why the 3rd parameter had to be called something other than length?
    A simple working function in JavaScript that has 3 parameters to determine the volume of a cube.
  3. In the above example you have the very basics taking place.
    • A variable is define in two ways - It's identified as a function and it's named (function myVolumeFunction).
    • Three parameters are identified - width, height, and theLength. You are still thinking about why the last one wasn't call 'length' aren't you?)
    • The function body contains a console.log that produces a sentence that also does a little math (multiplying the width * height * length (oops theLength)).
    • Last the function is called or executed, which simply means to code (type) the function name and "pass" any information for the parameters.
  4. You could also use interpolation (think backticks, dollar signs, and more curly brackets) here, but hey, I warned you that I'm used to concatenation.

Activities

  1. Complete Functions in Codecademy.
  2. Show your checkmark of the completed Functions section to Mrs. Gilmore.
  3. Complete the Functions Exercises from W3Schools. There are only 4 little exercises. Show Mrs. Gilmore your 4 checkmarks for completing them. Be carful, if you move on or go back you may lose your checkmark. Luckily, they are very easy.
  4. Complete the checkpoint, which will be released in Google Classroom. This will take you through the steps of creating a Rock, Paper, Scissors game. Be aware, that I have called for you to name things in very specific manners.

Resources