We said it once, twice, and now three time’s a charm. A computer program is just a set of instructions that we give to the computer. In the previous sections, we learned how to create and store data in our code using variables and how to control the flow of our programs with that data using conditionals.
When developers create programs, we not only ask ourselves the question 'what instructions could we give to the computer to solve this problem?' but also 'how do we create the most efficient instructions?
From what we’ve learned with programming so far, we’ve focused mostly on the former instead of the latter question. For instance let’s take a look at this example from the conditionals exercise:
var hour = 11;
if (hour < 12) {
console.log('Its morning');
} else if (hour < 16) {
console.log('Its the afternoon');
} else {
console.log('Its night time!');
}This code will accurately tell us whether it’s morning, afternoon, or night given an hour value (in military time), but what is the best way to test our conditional for multiple cases? Is it actually efficient to have to create a variable for every possible hour?
What if there was a way to create an instruction for our computer to execute - whether it be a simple console.log() expression or a conditional statement - and have that instruction be applicable to any possible value we gave it? This would make our code much more efficient, and would allow us to repeat ourselves less when creating programs!
Luckily, there exists a feature in JavaScript (and all programming languages) that does just this! They’re called functions.
A function allows us to encapsulate a block of code, and execute that block of code whenever we want and however many times we want. This way, we won’t have to keep writing new instructions for our program every time we want to perform a certain action - especially if that action is applicable to many different values.
There are two stages to creating a function:
Function Declaration/Definition Function Call/Invocation/Execution
In stage one, which is either referred to as the function declaration or the function definition, you create the action or instruction you want the computer to perform. That can include everything we’ve learned so far - from creating a variable for a value to a conditional statement, to an advanced mathematical equation.
Since we want this action to be performed on multiple possible values we don’t put any concrete values in the function declaration . We only use placeholders that act as stand-ins for the values that the function will be used on.
These placeholders are called parameters. They exist in our function as a stand-in for anytime we need to have our instructions act on a value.
For instance, let’s revisit the proposed calculator example from the variables section. Let’s create a simple add function that will allow us to add any two number values together.
function add(num1, num2) {
return num1 + num2;
} In this function declaration example, the function add takes two parameters : num1 and num2. These will act as placeholders for any value we want to use the function on.
Inside the curly braces {} in what is known as the function body we have the actual code or instruction our function will perform. In this case, our function will return the value of the sum of two numbers.
The general structure of a function declaration/definition looks like this:
function functionName(parameter1, parameter2, … , parameterN) {
// function body - code goes here!
}To recap, a function declaration/definition consists of:
The function keyword, which lets the JavaScript Interpreter know that the following code will be a function.
The function name which we as a programmer gives to the function. When we assign a name to a function, it must be something that relates to the action being performed inside the function body. Also make sure to use camel case like the example above.
The parameters a function can have n number of parameters, even 0 if it takes no inputs.
The function body , enclosed in curly braces {}, that contains the action that our function performs. That action will usually involve returning a value which can be used later in our program.
After we declare a function we have to call on it to actually use it on some values. Remember, parameters are only placeholders for our values. In order to use the function on our data, we have to invoke our function by creating a function call.
A function call/invocation consists of two parts:
The function name - the name of the function you’d like to call or invoke.
Arguments - The actual values you’d like to invoke the function on, enclosed in parenthesis ()
Let’s revisit our add function example. If we wanted to use our function to add the numbers 10 and 25. We’d call the function like so:
add(10, 25);This line of code calls the add function, and gives it the inputs of 10 and 25. These arguments basically take the place of the parameters we created in the function definition. Now, whatever instructions we specified in the function body will be performed on the arguments we specified in the function call.
The general structure of a function call looks like this:
functionName(argument1, argument2, … , argumentN);Once again, a function call consists of the function name and arguments, surrounded by parenthesis (). An important last thing to note is this:
The number of arguments we give the function call should be the same as the number of parameters you gave the function declaration.
Remember parameters serve as placeholders for the arguments you’ll use in the function call. Therefore, you should not give more arguments than there are parameters.
<iframe width="560" height="400" src="https://www.youtube.com/embed/N8ap4k_1QEQ" frameborder="0" allowfullscreen></iframe>
The following hints and resources should aid you in your completion of the code exercises.
Reusable Functions
- Refer to this website: W3Schools - Functions
Return Statement
- Refer to this website: Mozilla - Return statement
Understanding Undefined Value Returned from a Function
- Make sure to erase any pseudocode in the addFive function or you will not pass the tests
Record Collection
- Use bracket notation