A couple more Javascript topics

Function return values

1let myFunction = function (number){
2  number = number + 5
3  console.log(number)
4}
5
6let myNumber = 10;
7myFunction(myNumber);
8console.log(myNumber)

What do you think this will output?

As we learned last class, functions allow us to repeat the same code over and over so we dont have to rewrite code multiple times. There's one important detail I left out when explaining functions: return values.

If we have a portion of code that I will call A, and it calls a function to run another portion of code called B, return values allow B to send any result it wants back to A.

Let's say we wanted to use myFunction to add 5 to myNumber and have that change stick. Return values let us do this! We could add a return value to our function like this:

1let add5 = function (number){
2  let result = number + 5;
3  return result;
4}
5
6let myNumber = 10;
7console.log(myNumber);
8myNumber = add5(myNumber);
9console.log(myNumber);

Now see what we get in the console!

Functions do not have to have return values. They can just do something without returning anything. But if the code that calls the function wants to know something about the result of a function, a return value will send the result out of the function back to the place it was called. This is.... REALLY HELPFUL!!

if/else Statements

Boolean logic

This is a really critical topic in computer science. Recall that a boolean variable is a data type that is either true or false. With boolean operators, we can create logical statements that combine boolean values, and will evaluate to a boolean variable itself.

The boolean operators we will use in the course are:

1let a = 10;
2let b = 12;
3console.log(a < b)
4// Outputs: true
5console.log(a > b)
6// Outputs: false
7console.log(a > 10)
8// Outputs: false

1console.log(a <== b)
2// Outputs: true
3console.log(a >== b)
4// Outputs: false
5console.log(a >== 10)
6// Outputs: true
7console.log(a <== 10)
8// Outputs: true

1console.log(a === b)
2//Outputs: false
3console.log(a === 10)
4//Outputs: true

1console.log(a !== b)
2//Outputs: true
3console.log(a !== 10)
4//Outputs: false

1console.log(a === 10 && b === 12)
2//Outputs: true
3console.log(a === 10 && b === a)
4//Outputs: false
5
6//We can use parentheses to group things together!
7
8console.log((a === 10 && b === 12) && (a < b))
9//Outputs: true

1console.log(a === 10 || b === 100000)
2//Outputs: true
3console.log(a === 10000 || b === 1000)
4//Outputs: false
5
6//We can use parentheses to group things together!
7
8console.log((a === 10) || (a !== b))
9//Outputs: true

We can use all of these rules together to create very expressive boolean statements. These statements can help our program decide what to do, as you will see in the next section!

1let person = {
2    name: "henry",
3    age: 28
4  };
5  if(person.age < 23){
6    console.log(person.name+" is youthful and young.")
7  } else {
8    console.log(person.name+" is old :(")
9  }
10}

If statements evaluate a boolean condition within the parentheses, and decide which block of code to run. In this case, unfortunately, the code decides to run the "else" block because I am old.

1function describeNameLength(person){
2  let name = person.name;
3  if(name.length < 5){
4    console.log(name+" has a short name.")
5  } else {
6    console.log(name+" has a long name.")
7  }
8}
9
10function describeGeneration(person){
11  let age = person.age;
12  let name = person.name;
13  if(age < 10){
14    console.log(name+" is Generation alpha.");
15  } else if(age < 25){
16    console.log(name+" is Gen Z.");
17  } else if(age < 41){
18    console.log(name+" is a Millenial.");
19  } else if(age < 57){
20    console.log(name+" is Gen X.");
21  } else if(age < 76){
22    console.log(name+" is a Boomer.");
23  } else {
24    console.log("I'm not sure which generation "+ name + "belongs to.");
25  }
26}
27
28let people = [
29  { name: "Ada", age: 9 },
30  { name: "Auberon", age: 56 },
31  { name: "Albrecht", age: 71},
32  { name: "Aitland", age: 36 },
33  { name: "Arlen", age: 24 },
34  { name: "Amalaric", age: 15 },
35  { name: "Arne", age: 45 }
36]
37for(var i=0;i < people.length;i++){
38  describeNameLength(people);
39  describeGeneration(people);
40}

Global variables

When writing javascripts, we don't only have access to variables that create. There are many helpful variables that are created for you to use.

These are called global variables, because they are always there, whenever the programmer needs them.

Here are some of the most important global variables in Javascript:

window

a massive object with important information of our page. Please explore the object in your console by typing in window and pressing enter.

Also test these out:

The window object has lots of helpful properties we will use throughout our web pages.

document

The document is also a huge elaborate object with important functions. We used document.innerHTML in assignment 2. It has tons of other helpful stuff we will want to use to modify our page. Here are 3 more useful functions we will use later:

Math

Ok this is where it starts to get really fun in my opinion. The math object has a lot of helpers to do common math operations. Try a few out in the console:

How can we make a random number between 0 and 10?

setTimeout, setInterval

1const message = function(){
2  console.log("5 seconds have passed.")
3}
4setTimeout(message,5000)

1const message = function(){
2  console.log("This runs every 5 seconds.")
3}
4setInterval(message,5000)