More on Functions, IF Statements and Operators

This lesson is part of the Web Programming 1 Course.

Functions, IF statements, and operators are fundamental building blocks in any programming language, not just JavaScript. Python, PHP, C#, and Java all use these basic constructs, but the syntax varies from one language to another. Luckily JavaScript uses a syntax that is very similar to what you would see in many other languages. So once you've become proficient in JavaScript, it will be relatively easy to learn many other languages.

Now that we've had some practice with the basics, let's now dig a little deeper into them.

Nested Function Calls

If you've had a class on algebra, then you know how to solve this equation:

(10 - ((3 + 1) * 2))

You start from the inner most parenthesis and work your way out.

In programming, you can do something similar by nesting function calls. Recall this example from a previous lesson:

let age = prompt("Enter your age in years");
age = parseInt(age); // parseInt() will convert the data type from string to number

We can condense these two lines into one by 'nesting' the function calls, like so:

let age = parseInt(prompt("Enter your age in years"));

Notice that the prompt function call is nested within the parseInt function call. In order to read this code, start from the inside and work your way out. The value returned by calling prompt will become the parameter that is passed into parseInt.

It's important for you to be able to read and understand nested function calls because you'll see them a lot in programming.

Nested IF Statements

You can nest an IF statement within another IF statement. Consider this code sample:

let answer = prompt("Do you like ice cream (yes/no)?");

if(answer == "yes"){

	answer = prompt("Do you prefer chocolate or vanilla?");

	if(answer == "chocolate"){
		alert("One chocolate ice cream cone coming right up!");
	}else{
		alert("One vanilla ice cream cone coming right up!");
	}

}

If the user enters 'yes' for the first prompt, indicating that they like ice cream, then the program will go on to ask another question. And then it will use another IF statement to evaluate the answer for the second prompt. This is an example of a 'nested' IF statement, in which an IF statement is 'nested' within the code block for another IF statement. Nested IF statements are common in programs.

Algorithms and IF Statements

And it can be helpful to write an algorithm to describe how a program should work before you begin to write the code for a problem. An algorithm is a sequence of steps that must be taken in order to complete a task. Here's an algorithm for the task of suggesting what one might do in their free time:

  1. Ask if the user likes books.
    1. If the user likes books, ask them if they like Sci Fi books:
      1. If the user likes Sci Fi books, then recommend Frankenstein.
      2. If the user does NOT like Sci Fi books, then recommend Gone With the Wind.
  2. If the user does NOT like books, then ask them if they like movies.
    1. If the user likes movies, then recommend the movie Social Networking.
    2. If the user does NOT like movies, then recommend that they take up knitting.

Here's how we can write code for the algorithm:

const likesBooks = prompt("Do you like books (enter 'yes' or 'no')?");

if(likesBooks == "yes"){
    // the user likes books...
    const likesSciFi = prompt("Do you like Sci Fi books (enter 'yes' or 'no')?");
  
    if(likesSciFi == "yes"){
        alert("I recommend Frankenstein!");
    }else{
        alert("I recommend Gone With the Wind!");
    }
}else if(likesBooks == "no"){
    // the user does NOT like books...
    const likesMovies = prompt("Do you like movies (enter 'yes' or 'no')?");
  
    if(likesMovies == "yes"){
        alert("I recommend Social Networking!");
    }else{
        alert("I recommend knitting!");
    }
}

When you write code such as the sample program above, it's very important to run the code and test all possible code branches.

More on Operators

There are a few operators that I left out of the last lesson because I didn't want to overload you. But now that you've had some practice with operators (hopefully you did the worksheet for the previous lesson), I can introduce you to a few more of them.

The Strict Equality Operator (===)

You know that variables can store different types of data (number, string, boolean, etc.). Consider what happens if you assign the number 7 to a variable, and assign the string "7" to another variable. The value of each variable is the same (they both store the value 7), but one is a number data type and the other is a string. You can use the strict equality operator to compare both the value AND the data type of two variables. The strict equality operator is three equals signs: ===.

Here's an example:

const someNumber = 7;
const someString = "7";

if(someNumber == someString){
    console.log("They have the same VALUE...");
}

if(someNumber === someString){
    console.log("They have the same VALUE...and they are the same DATA TYPE");
}

When you run this code, note that it will execute the console log in the first IF statement, because both variables are storing a value of 7. But it will not execute the console log in the second IF statement because the data types of the variables are different (one is a string and the other is a number).

We won't be using the strict equality operator much in this course, but was we get into more advanced JavaScript programming in later courses, we'll see it more.

The Negation Operator (!)

Another operator that I left out of the previous lesson is the negation operator, which is simply an exclamation mark (!). You can put this operator before a boolean expression to flip the result from true to false, or from false to true. You might wonder why you would ever want to use this operator, but there are times when you want to know if something is NOT true, or NOT false. Consider this example:

let doneWithHomework = false;

if(!doneWithHomework){
	console.log("Finish your homework");
}

When you read code that includes the negation operator, you can simply read it as 'NOT'. The code sample above could be read aloud like so: "If NOT doneWithHomework then console log 'Finish your homework'". The doneWithHomework variable is false, and in this case we want to execute the code inside the block. But remember that the code inside the block will execute only when the boolean expression is true. So we use the negation operator to flip (reverse) the result of the boolean expression.

The negation operator is a bit tricky for newbies, but it's quite commonly used, which is why I feel the need to show it to you now. I want to point out that you could avoid using it by re-writing the boolean expression like so:

if(doneWithHomework == false){
	console.log("Finish your homework");
}

In this course, I'm fine with either approach