Lesson 2 covers functions in Javascript. The basic idea of a function is to simplify input and reduce repetition. For example we can write:
var myAnswer = (prompt("Do you prefer Apples or Pears"));
if ( myAnswer === "Apples") {
console.log("I eat Apples");
}
else {
console.log("I eat Pears");
}
But if we use a function we can reduce the complexity by not having to repeat the command.
var myAnswer = function(fruit) {
console.log("I eat " + fruit);
}
myAnswer(prompt("Do you prefer Apples or Pears"));
What's basically happening is this: We create a variable called "myAnswer". This variable's value (output) is then determined by a function applied to some kind of input (fruit) - this is called a "parameter".
We tell the browser to run this function using the syntax myVariable(myInput) which runs var myVariable = function(myInput) {...}. In short myVariable is equal to whatever happens inside the curly brackets based on the input value.
I feel like I'm talking in circles. But I get it now.
Part 6 of this lesson has an interesting acronym: D.R.Y - Do Not Repeat Yourself.
Functions are used to prevent unnecessary repition, as in the above example where we were able to remove one console.log from the code. Imagine if our original question was "What kind of fruit do you prefer?", we'd literally have to create an else if statement for each type of fruit. With the function we can just change the question and it would still work. Sweet!
Return
Like console.log return provides us with a result, but instead of logging it to the console it returns it to wherever the function was called from. Apparently return also ends the function; ie. it stops at the return. For example:
// declare the myAnswer function, perform it and keep the value for later use
var myAnswer = function(fruit) {
return("I eat " + fruit);
};
// create a new variable "myActualAnswer" and make it equal to the returned value for "myAnswer" add an extra string
var myActualAnswer = (myAnswer(prompt("What kind of fruit do you prefer?")) + ", but I also like vegetables.");
//log it to the console
console.log(myActualAnswer);
Btw. you can copy and paste this code into the console to see how it works.
For the record, I tried the below first, but that failed horribly. So we learn. The var "myAnswer" can't stand on it's own, since it's a function it must include (parameter). Which is why part 2 and 3 of this code must be combined like in the above example.
// declare the myAnswer function, perform it and keep the value for use later
var myAnswer = function(fruit) {
console.log("I eat " + fruit);
return("I eat " + fruit);
};
//get the parameter for the myAnswer function
myAnswer(prompt("What kind of fruit do you prefer?"));
// create a new variable "myActualAnswer" and make it equal to the returned value for "myAnswer" and an extra string
var myActualAnswer = (myAnswer + ", but I also like vegetables.");
//log it to the console
console.log(myActualAnswer);
I'm leaving this here for posterity, but heed my advise, this is not how you write a function.
Multiple parameters
You can add multiple parameters to function by using a commas. Here's a simple example used to calculate the volume of a box.
var myBoxVolume = function (h,l,w) {
return h * l * w
}
console.log(
"Your box is " +
myBoxVolume(
(prompt("How high is your box?")),
(prompt("How long is your box?")),
(prompt("How wide is your box?"))
) +
" cubic units."
)
Scope
Scope is a term to describe the area within which something is valid. Like a guest actor on a TV show. While the scope of the main character is the show, the scope of the guest actor is the episode.
Variables can have scope; they're either global (or global variables) and available throughout the entire body of the code), or local (local variables) and only available inside a function. Here's a super simple example:
var globalVariable = "Everywhere";
var myFunction = function(parameter) {
var localVariable = "Inside this Function";
};
This is the super easy to understand snippet from part 10, with a catch. Even if the variables have the same name (my_number) they will have different values on local and global scope.
var my_number = 7; //this has global scope
var timesTwo = function(number) {
var my_number = number * 2; //this has local scope
console.log("Inside the function my_number is: ");
console.log(my_number);
};
timesTwo(7);
console.log("Outside the function my_number is: ")
console.log(my_number);