JavaScript

Conditionals

Comparisons

Comparisons using <, >, ==, ===, !=, !==, <=, and >= have been discussed a lot in the previous notes. Here's the summary.

• Return boolean values
• Strings are compared letter by letter just like in dictionary. Order is Unicode order. Case sensitive, with the uppercases comes before (smaller than) the lowercases as listed in the Unicode.
• When values of different types are compared using non-strict equality, they are converted to numbers.
• In strict equality, values of different types are never the same.
• null == undefined and they don't equal to anything else
• Be extra careful when comparing variables that the value might be null or undefined as they have specific behaviours.

Check out the complete reference here: JavaScript: Comparison

Conditional Statements

When it's more like conditional inclusions and exclusions, use if system.

When it's more like options, especially when there are many, use switch.

If and else

It reads:

• If condition 1 is true: Execute code block 1. Exit.
• Otherwise, if condition 2 is true: Execute code block 2. Exit.
• Anything else: Execute code block x. Exit.

We can have more than have one else if.

Note that only exclusion from previous condition goes to the next. When a condition is met, its code block is run, then it exits.

Conditions can be as many as needed. But in the case there are a lot of conditions (especially options type), consider using switch instead of if that's more like a list than inclusion-exclusion conditions.

today = new Date();
time = today.getHours();

if (time < 12) {
    console.log("Good morning!");
} else if (time < 17) {
    console.log("Good afternoon!");
} else {
    console.log("Good evening!");
}

Switch

Switch statement

• break
  • The break statement is used to stop execution inside the switch block.
  • It's not necessary in the last case because it will end there anyway.
  • Warning: Without break statement, it will continue to the next case and execute even when it's not a match.
• default
  • The default case is for when there is no match.
  • It doesn't have to be written at the end. When it's not located at the end, don't forget to use break.
  • Without default value, if there's no match, program will leave the switch block without execute anything.
• multiple cases sharing a code block
  • It is possible. Just list all the cases before the code block.
• Multiple cases matches a case value
  • The first case is selected.
• Strict comparison ===
  • Switch uses strict comparison. It can only a match if it's the same data type.

today = new Date();
month = today.getMonth();
monthName;

switch (month) {
    case 0:
        monthName = "January";
        break;
    case 1:
        monthName = "February";
        break;
    case 2:
        monthName = "March";
        break;
    case 3:
        monthName = "April";
        break;
    case 4:
        monthName = "May";
        break;
    case 5:
        monthName = "June";
        break;
    case 6:
        monthName = "July";
        break;
    case 7:
        monthName = "August";
        break;
    case 8:
        monthName = "September";
        break;
    case 9:
        monthName = "October";
        break;
    case 10:
        monthName = "November";
        break;
    case 11:
        monthName = "December";
}

dateName = `${today.getDate()} ${monthName} ${today.getFullYear()}`
console.log(`Today is ${dateName}.`);

Without break statement:

month = 1;
let correctMonth;
let forgetSomeBreaks;
let forgetAllBreaks;

switch (month) {
    case 0:
        correctMonth = "January";
        break;
    case 1:
        correctMonth = "February";
        break;
    case 2:
        correctMonth = "March";
        break;
    default:
        correctMonth = "December";
}

switch (month) {
    case 0:
        forgetSomeBreaks = "January";
    case 1:
        forgetSomeBreaks = "February";
    case 2:
        forgetSomeBreaks = "March";
        break;
    default:
        forgetSomeBreaks = "December";
}

switch (month) {
    case 0:
        forgetAllBreaks = "January";
    case 1:
        forgetAllBreaks = "February";
        case 2:
        forgetAllBreaks = "March";
    default:
        forgetAllBreaks = "December";
}

console.log("Correct month: " + correctMonth);
console.log("Forget some breaks: " + forgetSomeBreaks);
console.log("Forget all breaks: " + forgetAllBreaks);

/*
Correct month: January
Forget first break: February
Forget all breaks: December
*/

Switch range

When the case is in range format, set the switch's paranthesis value into true: switch (true) and range can be safely written in each case's parenthesis: case (varName <= 4).

Ternary

In ternary, we are giving 1 condition. If it's true, run the left side code. If it's false, run the right side code.

let greeting = (isBirthday) ? "Happy Birthday" : "Good morning";

Example: Select theme

<label for="theme">Select theme: </label>
<select id="theme">
    <option value="light">Light theme</option>
    <option value="dark">Dark theme</option>
</select>

<script>
    const userTheme = document.querySelector('#theme');
    const userHtml = document.querySelector('html');

    function update(bgColor, textColor) {
        userHtml.style.backgroundColor = bgColor;
        userHtml.style.color = textColor;
    }

    theme.addEventListener('change', () => ( userTheme.value === 'dark' ) ? update('black','white') : update('white','black'));
</script>