10. JavaScript: Comparisons & Conditionals

Welcome to JavaScript: Comparisons & Conditionals!

Conditionals

Comparison Operators

3 < 5
//=> true

4 >= 9
//=> false

7 === 7
//=> true

"karlie" === "karlie"
//-> true

"karlie" === "Karlie"
//-> false

3 !== 4
//=> true

5 !== 5
//=> false

4 !== 9
//=> true

11 % 2
//=> 1

32 % 6
//=> 2

16 % 3
//=> 1

15 % 3
//=> 0

Comparing Variables

var language = "JavaScript";

language === "Javascript"
//=> false

language === "JavaScript"
//=> true

"javascript" === language
//=> false

var year = 2024;
var nextYear = 2025;

year > 2000
//=> true

year != 2020
//=> true

year < nextYear
//=> true

var fakePassword = "KodeWithKlossy";
var passwordLength = fakePassword.length
console.log(passwordLength >= 8)

The Boolean Game!

🃏

Game Rules:

• You are given a boolean expression and 9 boxes (3 colors x 3 numbers).

• Put an X in the corresponding light green boxes on the right that satisfy the boolean expression.

• You will receive 1 point for every correct box you click on.

• The game is over if you select an incorrect box.

• As you get more points, the boolean expression will get harder.

• When the status bar says you've solved the level, proceed to the next level by clicking the next tab along the bottom of the screen.

In the example to the right, you would put an X in the corresponding light green boxes that contain a two, no matter the color!

 

🟰

Basic Boolean Operations Used in the Game:

• & (conjunction), denoted x & y, satisfies x & y = 1 if x = y = 1 and x & y = 0 otherwise.

• or (disjunction), denoted x or y, satisfies x or y = 0 if x = y = 0 and x or y = 1 otherwise.

• not (negation), denoted not x, satisfies not x = 0 if x = 1 and not x = 1 if x = 0.

• nor (negation of or), denoted not x & not y, satisfies x nor y = 1 if x = y = 0 and x nor y = 0 otherwise.

Logical Operators

var language1 = "JavaScript";
var language2 = "Swift";

console.log(language1 === "JavaScript" || language2 === "JavaScript");
// true

console.log(language1 === "Swift" || language2 === "Swift");
// true

console.log(language1 === "Python" || language2 === "Python");
// false

console.log(language1 === "JavaScript" && language2 === "JavaScript");
// false

console.log(language1 === "Swift" && language2 === "Swift");
// false

Conditionals

var queen = "Beyoncé";

if (queen === "Beyoncé") {
  alert("You are correct!")
} else {
  alert("Beyoncé is the only queen.")
}

var queen = "Beyoncé";          // new variable created

if (queen === "Beyoncé") {       // program checks for this condition
                                // if it evaluates to true, it will execute this block
  alert("You are correct!")
} else {                        // if it evaluates to false, it will execute this block
  alert("Beyoncé is the only queen.")
}

• If the condition evaluates to true, the code in the block below it will execute or run. It will then ignore the rest of the options.

• If it evaluates to false, it will check the condition in the next block.

var luckyNumber = 10; // Note: Your luckyNumber can be any number!

if (luckyNumber === 13) {
  console.log("You got it!")
} else if (luckyNumber < 13) {
  console.log("Guess higher...")
} else if (luckyNumber > 13) {
  console.log("Guess lower...")
}

if (luckyNumber === 13) {
 console.log("You got it!")
} else if (luckyNumber >= 3 && luckyNumber <= 24) {
 console.log(`So close! You are just ${Math.abs(13 - luckyNumber)} off!`)
} else {
  console.log(`Not even close. Off by ${Math.abs(13 - luckyNumber)}`)
}

var queen = "Beyoncé";

if (queen === "Beyoncé") {
  console.log("You are correct!")
} else if (queen === "Elizabeth II") {
  console.log("I guess you are technically right...")
} else {
  console.log("Beyoncé is the only queen.")
}

var uncheckedString = "steminism"
var countedString = uncheckedString.length
var checkedString = countedString % 2

if (checkedString == 0) {
  console.log("Your string is even.")
} else {
  console.log("Your string is odd.")
}

JavaScript: Comparisons & Conditionals

var number = 10 // Note: Your number can be any number!
if (number % 15 == 0) {
  console.log("FizzBuzz")
}
else if (number % 3 == 0) {
  console.log("Fizz")
}
else if (number % 5 == 0) {
  console.log("Buzz")
}
else {
  console.log(number)
}

var fakePassword = "securePassword"
if (!(fakePassword.length >= 8 && fakePassword.length <= 14)) {
  console.log("Enter a password that is between 8 and 14 characters");
}
else if (fakePassword.includes('0') || fakePassword.includes('1') || fakePassword.includes('2') || fakePassword.includes('3') || fakePassword.includes('4') || fakePassword.includes('5') || fakePassword.includes('6') || fakePassword.includes('7') || fakePassword.includes('8') || fakePassword.includes('9')) {
  console.log("Valid password!");
}
else {
  console.log("Enter a password that contains at least 1 number.")
}

For a summary of this lesson, check out the 11. JavaScript: Comparison & Conditionals One-Pager!