Functions basics, function parameters & scope
var keywordA function is a repeatable process or procedure. A real world analogy of a function is the brew button on a coffee machine. The coffee machine has inputs (hot water, and coffee grounds), and outputs (hot coffee). When you press the button to brew a pot of coffee, you are starting a process that should return an expected output to you. The same thing is true in programming. A function takes a set of variables as inputs and returns a value as an output.
We have already seen many functions in action. For example, in the array section, we learned about push and pop. In Glitch you created functions that deleted or added songs and playlists.These are all functions that operate on an array. Consider the following example:
var arr = [5,4,3,2,1];
var poppedVal = arr.pop();
console.log(arr);
console.log(poppedVal);In the example, we are using the pop function. It takes no inputs, and it returns a value which is the last item in the array that has been removed from the array. When you run the code in your console, you'll see the array is now [5,4,3,2] and the value of poppedVal is 1.
To be a knowledgeable JavaScript programmer, we need to learn to write our own functions as well. There are multiple ways to write functions in JavaScript. We will cover the differences in more detail later. For now, let's start with one way: a function declaration.
In general, we declare a function in the following way:
function anyNameYouWantForTheFunction() {
// As many lines of code as you want
}In general, this type of function syntax consists of four parts:
function keyword,anyNameYouWantForTheFunction),It might seem silly, but it would be good to practice typing this syntax out a few times. You'll be writing functions constantly in JavaScript, so the syntax is something you should commit to muscle memory. Try typing these out in your browser console window:
function myFunction() {
}
function myOtherFunction() {
}
function yetAnotherFunction() {
}
function okayIGetItThisIsTheSyntaxForFunctions() {
}The functions above aren't very interesting, because none of them have a function body. Let's look at an example of a function that actually does something:
// this is called the function definition - we are ONLY defining the function here
function firstFunction(){
console.log("I just wrote my first function!");
}Now we have declared a function called firstFunction, but we have not used the function yet. To execute the code within the function, we must invoke the function. A function is invoked by adding a () after the name of the function:
// to call or invoke the function
firstFunction();If you run this code in the Chrome console, you will see the output is "I just wrote my first function" and on the next line, undefined. Next, we'll learn where the undefined is coming from.
If you want to call a function from a html page you could use the following:
<a href="#" onClick="firstFunction();">Function Call</a>You must make sure you include the script link (in the head section of the html file) to the js file that holds your firstFunction()
<script src="functions-02.js"></script>You will practice this in step 04
In JavaScript, if we do not specifically tell the function to return something, it will return undefined when it is finished executing. So how do we tell a function to return something? We use the return keyword!
// this is called the function definition -
// we are ONLY defining the function here
function firstFunction(){
return "I just wrote my first function!";
}
// to call or invoke the function
firstFunction(); // now we don't see undefined anymore!Now our function is returning "I just wrote my first function". To capture that string, let's use a variable:
var returnValue = firstFunction();
console.log(returnValue);Now in the console, you should see "I just wrote my first function". That is the value that was returned from our function call and that is now saved in the returnValue variable.
Remember, the return keyword can ONLY be used inside of a function. let's take a look at another example.
function secondFunction(){
return "Hello";
return "Goodbye";
}
secondFunction(); // "Hello"We see from this example that the return keyword can only be executed once in a function. Once it is executed, the function is complete and no other lines of code will be executed.
Now that we have an idea of how functions work, let's explore a previous topic and see how we can refactor some boolean logic. Let's imagine we want to write a function that returns true if a random number is over .5 - otherwise the function should return false. Here is one way we can write it
function isOverPointFive(){
if (Math.random() > .5){
return true;
} else {
return false;
}
}This code will work just fine, but remember, the return keyword exits from a function. So if the random number is greater than .5 we will exit the function early and never reach the else condition. So we don't even need the "else" condition! We can refactor our code to look like this:
function isOverPointFive(){
if(Math.random() > .5){
return true;
}
return false;
}Much better! If the number is greater than .5, return true and exit the function. Otherwise just return false.
Simplifying it even further, we can take advantage of the fact that Math.random() > .5 returns true or false.
function isOverPointFive(){
return Math.random() > .5;
}So far our functions have not been taking in any input; they simply are returning an output. So when would we want an input to our functions? Let's imagine we want to calculate the sum of two numbers. If our numbers are 5 and 5, well, that's easy.
5 + 5; // 10But what happens if we don't know what our numbers are? How could we possibly do this? Better yet, what if we want to do 4 + 6, and 2 + 8 and 7 + 3...we would have to start writing a whole bunch of code that's does basically the same function. This is a great example of when we want to add inputs and use a function. Inputs to a function are called parameters or arguments.
So what does a function look like with parameters? Let's write a function called add that takes in two parameters - number1 and number2 - and returns their sum.
function add(number1, number2){
return number1 + number2;
}Now our add function will work for any two numbers that we want to add together. It's important to note that the name of the paramters, number1 and number2, are arbitrary names that we have chosen. If we change the names of the parameters to a and b, the function would do exactly the same thing:
// This function will do the same thing as our previous function
function add(a, b){
return a + b;
}Now we can define a function with parameters. Let's see how we invoke that function:
add(4, 6); // returns 10
add(2, 8); // returns 10
add(7, 1); // returns 8In the example above, we are now invoking the add function with parameters. A parameter can be a literal number like we have above, or we could even use variables:
var num1 = 5;
var num2 = 8;
add(num1, num2); // returns 13It is important to understand that the variable names we are using when we invoke the function are not related at all to the variable names we have defined inside of the function. The values of num1 and num2 are being copied into the parameters number1 and number2 that are defined in the function.
For these exercises, create:
And use the developer tools in chrome to run and monitor the script.
<html>
<head>
<title>JavaScript Test Site</title>
<script src="functions-02.js"></script>
</head>
<body>
<p>Nothing going on yet.</p>
</body>
</html>In functions-02.js,
Introduce this object:
const playList =
{
id: "01",
title: "Beethoven Sonatas",
artist: "Beethoven",
songs: [ "Piano Sonata No. 3","Piano Sonata No. 7","Piano Sonata No. 10"],
rating: 4
};If we wanted the output presented in the html page rather than the console we could use the return keyword in our songOutputReverse() function. In html use the following code so that you can see the songs output on the web page:
<div><script>document.write(songOutputReverseReturn(""))</script></div>add, subtract, multiply, and divide. Each of these functions should accept two parameters and return the sum, difference, product and quotient.add(2,2); // 4
subtract(2,2); // 0
multiply(2,2); // 4
divide(2,2); // 1myName that logs your full name. Save your full name to a variable inside of the function body, then use console.log to print your name to the console.myName(); // if your full name was Elie Schoppik this function would return "Elie Schoppik"Create a variable called numbers which is an array that contains the numbers 1 through 10.
Write a function called displayOddNumbers which iterates over the numbers array and console.logs out all of the numbers that are odd. Here is what that might look like:
displayOddNumbers();
// 1
// 3
// 5
// 7
// 9displayEvenNumbers which iterates over the numbers array and console.logs out all of the numbers that are even. Here is what that might look like:displayEvenNumbers();
// 2
// 4
// 6
// 8
// 10returnFirstOddNumber which iterates over the numbers array and returns the first odd number it findsreturnFirstOddNumber();
// 1returnFirstEvenNumber which iterates over the numbers array and returns the first even number it findsreturnFirstEvenNumber();
// 2returnFirstHalf which returns the first half of the numbers arrayreturnFirstHalf();
// [1,2,3,4,5]returnSecondHalf which returns the first half of the numbers arrayreturnSecondHalf();
// [6,7,8,9,10]You can find the solutions here
myName
function myName(){
var myName = 'Elie Schoppik';
console.log(myName);
}displayOddNumbers
var numbers = [1,2,3,4,5,6,7,8,9,10];
function displayOddNumbers(){
for(var i = 0; i < numbers.length; i++){
// if the value we are at in the array is not divisible by 2 (it's an odd number)
if(numbers[i] % 2 !== 0){
// print out that value!
console.log(numbers[i]);
}
}
}displayEvenNumbers
var numbers = [1,2,3,4,5,6,7,8,9,10];
function displayEvenNumbers(){
for(var i = 0; i < numbers.length; i++){
// if the value we are at in the array is divisible by 2 (it's an even number)
if(numbers[i] % 2 === 0){
// print out that value!
console.log(numbers[i]);
}
}
}returnFirstOddNumber
var numbers = [1,2,3,4,5,6,7,8,9,10];
function returnFirstOddNumber(){
for(var i = 0; i < numbers.length; i++){
if(numbers[i] % 2 !== 0){
// print out that value, using return gets us out of the function!
return numbers[i];
}
}
}returnFirstEvenNumber
var numbers = [1,2,3,4,5,6,7,8,9,10];
function returnFirstEvenNumber(){
for(var i = 0; i < numbers.length; i++){
if(numbers[i] % 2 === 0){
// print out that value!
return numbers[i];
}
}
}returnFirstHalf
var numbers = [1,2,3,4,5,6,7,8,9,10];
function returnFirstHalf(){
return numbers.slice(0,numbers.length/2);
}returnSecondHalf
var numbers = [1,2,3,4,5,6,7,8,9,10];
function returnSecondHalf(){
return numbers.slice(numbers.length/2);
}Write a function that uses a loop to iterate through the songs array and console.log all of the songs.
const playList =
{
id: "01",
title: "Beethoven Sonatas",
artist: "Beethoven",
songs: [ "Piano Sonata No. 3","Piano Sonata No. 7","Piano Sonata No. 10"],
rating: 4
};
function songOutput()
{
for (let i=0;i<playList.songs.length; i++)
{
console.log(playList.songs[i]);
}
}Write another funciton that again uses a loop to iterate in the reverse direction, logging the people starting at 'James' and finishing with 'Greg'
function songOutputReverse()
{
for (let i=playList.songs.length; i>-1; i--)
{
console.log(playList.songs[i]);
}
}write a function that uses the return keyword.
function songOutputReverseReturn(tempString)
{
for (let i=playList.songs.length; i>0; i--)
{
tempString = tempString + " <br>" + playList.songs[i-1];
}
return tempString;
}<html>
<head>
<title>JavaScript Test Site</title>
<script src="functions-02.js"></script>
</head>
<body>
<p>Nothing going on yet...</p>
<a href="#" onClick="getPlaylists();">Display Playlists</a><hr>
<a href="#" onClick="songOutput();">Output songs of Playlist 1</a><hr>
<a href="#" onClick="songOutputReverse();">Output songs of Playlist 1 in reverse</a><hr>
<div><script>document.write(songOutputReverseReturn(""))</script></div>
</body>
</html>