JavaScript Day Two: Comparisons, Math, and Logic

JavaScript Day Two: Comparisons, Math, and Logic

In JavaScript Day One, we covered some of the essential fundamentals of programming: variables, data types, comments, and how to write a simple “Hello, World!” program. In this lesson, I’ll be going over comparison, arithmetic (math), and conditional statements (logic).

Comparison Operators

Comparison Operators are used to determine equality or differences between values.

In lesson one, we covered that a single equals sign (=) applies a value to a variable.

  • var language = "English"; applies the string "English" to the variable language.

This is not to be confused with comparison operators, which use two (==) or three (===) equals signs, among other symbols. While one equals sign applies value to a variable, the comparison operators check the equality or differences between values. Here is a list of comparison operators.

Operator Comparison
== Equal
=== Strict Equal
!= Not Equal
!== Strict Not Equal
< Less Than
> Greater Than
<= Less Than or Equal
>= Greater Than or Equal

Some of these are familiar from grade school math class, and a few are new. Comparison operators return a true or false result.

There are very few situations in which equal (==) and not equal (!=) will be necessary. It’s best to stick with strict equal (===) and strict not equal (!==) in all situations unless you have a specific reason to use the other.

Assume we’ve defined a variable called amount and assigned it a value of 5. Assume that on each line, amount is equal to 5.

var amount = 5; // assigning the number 5 to amount.

amount == 5; // true: 5 is equal to 5.
amount == "5"; // true: "5" is equal to 5 in value, but not in type ("5" is a string, not a number).
amount === 5; // true.
amount === "5"; // false: "5" is not equal in both type and value to 5.
amount != 6; // true: 6 is not equal to 5.
amount !== 6; // true: 6 is not equal to 5.
amount != "5"; // false: "5" is equal in value, but not type, to 5.
amount !== "5"; // true: "5" is not equal in value and type to 5.
amount < 6; // true: 5 is less than 6.
amount > 4; // true: 5 is greater than 4.
amount <= 4; // true: 5 is less than or equal to 5
amount >= 4;// false: 4 is neither greater than nor equal to 5.

Arithmetic Operators

Arithmetic Operators perform mathematical calculations and return a value.

You can do basic math with JavaScript just like a calculator. Most of these math functions will be very familiar to you.

Operator Description
+ Addition
- Subtraction
* Multiplication
/ Division
% Modulus (Remainder)
++ Increment
-- Decrement

Adding, subtracting, multiplying and dividing work exactly as you would expect. Less familiar ones are the modulus operator, incrementing and decrementing.

The modulus operator prints the remainder of a division operation.

  • In the case of6 / 3 = 2, the quotient (result) is 2, and the remainder is 0, as it is a clean, whole number division.
  • In the case of 6 / 4 = 1.5, however, the quotient is 1, as 4 divides into 6 cleanly once, with a remainder of 2.
  • Therefore, 6 % 3 = 0, and 6 % 4 = 2.

The increment operator increments by one, and the decrement operator decrements by one. These become very useful with loops, which we’ll cover soon.

var amount = 5; // assigning the number 5 to amount.

amount + 5; // returns 10.
amount - 5; // returns 0.
amount / 5; // returns 1.
amount * 5; // returns 25.
amount % 3; // returns 2.
++amount; // returns 6.
--amount; // returns 4.

If you try to add a string and a number, it will convert into a string. 5 + "5" does not return 6, it returns "55". Most other operations that shouldn’t work will result in NaN, Not a Number.

var amount = 5; // assigning the number 5 to amount.

amount + "5"; // returns the string "55".
amount / "Five"; // returns NaN (Not a Number).

Conditional Statements

Conditional statements execute an action based on whether specified conditions are true or false.

Conditionals are similar to a “Choose Your Own Adventure” book – you might have choice A, B, and C, and you’ll skip over the A pages if you select choice B. There are two types of conditional statements in JavaScript – the if...else statement, and the switch statement.

With conditionals, we can finally begin to start performing actions with the knowledge we’ve learned. At this point, indentation becomes very useful for readability in the code, since now our code blocks are going to be longer than a single line. You can indent by using tabs or spaces, just be consistent throughout your code.

Conditional statements are logic, and we have a few logical operators to help evaluate our statements.

Operator Description
&& And
|| Or
! Not

If…Else

There are three keywords that you can use in an if statementif, else, and else if. A basic statement will look like this.

if (condition) {
  // do something.
} else {
  // do something else.
}

In English, that translates to “If this condition is met, do something. Otherwise, do something else”.

There are two important bits of syntax involved – the parentheses (()), and the curly braces ({}). The condition to be met must always be contained within parentheses, and the action that will be performed will be contained in the curly braces, which is known as a code block.

Do not end a code block with a semi-colon.

Using some of what we’ve already learned, we can execute some code. Imagine an adventure through a mysterious dungeon. You come across a door and try to open it.

var doorIsLocked = true; // the door is locked

if (doorIsLocked) {
  document.write("The door is locked!");
} else {
  document.write("The door is not locked. You open the door.");
}

Since doorIsLocked is a true statement, “The door is locked!” will print to the document. An if statement checks for truth by default, so I do not need to specify if (doorIsLocked === true), though both will work. In this case, if and else are like true and false. What if we have more options than just two?

var doorIsLocked = true; // the door is locked.
var hasKey = true; // you have the key.

if (doorIsLocked && hasKey) {
  // the door is locked, and you have the key
  document.write("You unlocked the door! You open the door.");
} else if (doorIsLocked && !hasKey) {
  // the door is locked, and you don't have the key (!hasKey is the same as hasKey === false)
  document.write("The door is locked.");
} else {
  document.write("The door is not locked. You open the door.");
}

Demo

Since the door is locked and you have the key, “You unlocked the door! You open the door.” will print to the document.

Conditional statements don’t just check for true and false – you can use any of the conditional operators to evaluate an expression. Let’s say you’re at the weapon shop and want to buy a sword.

var money = 1000; // you have 1000 in your inventory
var swordCost = 1200; // the sword costs 1200

if (money < swordCost) {
  document.write("You don't have enough money to buy this sword!");
} else {
  document.write("You buy the sword!")
}

Demo

Since you have less in your inventory than the cost of the sword, “You don’t have enough money to buy this sword!” will print to the document.

Switch

A switch statement becomes useful when we have many expressions to evaluate. It’s similar to using an if statement with many else if blocks, but it’s cleaner and easier to read.

switch (expression) {
  case x:
    // do something
    break;
  case y:
    // do something else
    break;
  case z:
    // do something else
    break;
  default:
    // default code block
    break;
}

As an example, let’s print some activities you might do based on the season.

var season = "Autumn";

switch (season) {
  case "Winter":
    document.write("Go sledding!");
    break;
  case "Autumn":
    document.write("Drink a pumpkin spice latte!");
    break;
  case "Spring":
    document.write("Fly a kite!");
    break;
  case "Summer":
    document.write("Go to the beach!");
    break;
  default:
    document.write("Study JavaScript.");
    break;
}

Demo

Since the season was “Autumn”, “Drink a pumpkin spice latte!” gets printed to the document. For each case, a different bit of executes. The break keyword causes the switch code to stop running when a match is found. If no matches are found, the default code will execute, just like an else. In this case, “Study JavaScript” is always a good activity, no matter the season (but you’re less enthusiastic about it, so no exclamation point).

Conclusion

At this point, we’ve covered data types, variables, comments, conditionals, math, and logic, all very important concepts in any programming language. Next, we’ll cover loops and functions, and begin manipulating the DOM (Document Object Model), so we can start interacting with HTML and CSS.

Leave a Reply

Your email address will not be published.

Markdown is enabled in comments. If you would like to post code in your comments, please wrap it in a <pre><code>. HTML/PHP code must be escaped. Failure to do so will make me sad.

Example:

<pre><code>def print_hi(name)
  puts "Hi, #{name}"
end
print_hi("Tania")</code></pre>

2 comments on “JavaScript Day Two: Comparisons, Math, and Logic”

  • Brinkie Pie says:

    I nopticed two small issues:
    1. in the section about Arithmetic Operators:
    javascript
    var amount = 5; // assigning the number 5 to amount.

    amount++; // returns 6.
    amount--; // returns 4.

    This is wrong. amount++ would return 5 because a postfix increment/decrement returns the previous value before increasing/decreasing it; amount would then be 6. The following amount-- would return 6, because again it’s returning the previous value, which we just increased to 6 in the line before; amount would then be back to 5.
    Even if you used the prefix equivalents, ++amount would actually return 6, however --amount would still not be 4 but actually be back to 5.

    Maybe it would be better to give those two operators (and their prefix equivalents) a small separate section, possibly even leave them out here and cover them later.
    “`javascript
    var amount;
    amount = 5;
    amount++; // increase amount by one
    amount; // is now 6

    amount = 5;
    amount--; // decrease amount by one
    amount; // is now 4

    “`

    • Tania says:

      Ah, thanks – you’re right – it keeps the same amount on the first iteration. I actually didn’t intend for any of the “amounts” to be sequential, I meant for them to be standalone, but now I can see how that might be confusing. (In other words, amount is supposed to be reset to 5 for each example). I think the easiest thing to do would be just change it to ++amount and --amount to get the basic idea down, and go into it more later.