Language Tutorials/JavaScript/If Statements

This tutorial discusses if statements in Scratch and compares them to if statements in JavaScript.

If Statements

In Scratch, this is an if statement:

if <> then
    ...
end

This is an if statement in JavaScript:

if (condition) {
   // ...
}

In both cases, if the condition after the word "if" evaluates to "true", then the code inside the if statement will be run. For example, this code will result in the (wonGame) variable being set to "true":

when gf clicked
set [wonGame v] to [false]
set [score v] to (15)
if <(score) > [10]> then
    set [wonGame v] to [true] // Since score is greater than 10, this code will be run.
end

The code above can be written in JavaScript like this:

let wonGame = false;
let score = 15;

if (score > 10) {
   wonGame = true; // Since score is greater than 10, this code will be run.
}

If-Else Statements

Scratch has a separate block for if-else statements:

if <> then
    ...
else
    ...
end

In JavaScript:

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

In both cases, if the condition after the word "if" evaluates to "false", then the code in the "else" section of the block will be run. For example, this code would result in the (balance) variable having a value of 50:

when gf clicked
set [balance v] to [10]
set [goodJob v] to [true]
if <(goodJob) = [false]> then
    change [balance v] by [20] // goodJob does not equal false, so this code will be skipped over.
else
    change [balance v] by [40] // Since goodJob does not satisfy the condition of the if statement, this code will be run.
end

The code above can be written in JavaScript like this:

let balance = 10;
let goodJob = true;

if (goodJob === false) {
   balance += 20; // goodJob does not equal false, so this code will be skipped over.
} else {
   balance += 40; // Since goodJob does not satisfy the condition of the if statement, this code will be run.
}

If-Else if-Else Statements

JavaScript also introduces the concept of If-Else if-Else Statements. Here is an example:

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

If the first condition is false, then the second condition will be checked. If the second condition is also false, then the code after "else" will be run. This can be achieved in Scratch like so:

if <> then
    ...
else
    if <> then
        ...
    else
        ...
    end
end

In this example, the num variable will end up equalling 2:

let num = 0;

if (3 > 5) {
   num = 1; // Since 3 is not greater than 5, this code will be skipped over.
} else if (2 > 1) {
   num = 2; // Since 2 is greater than 1, this code will be run.
} else {
   num = 3; // Since the condition after "else if" was true, this code will be skipped over.
}

To achieve this in Scratch, this could be done:

when gf clicked
set [num v] to [0]
if <[3] > [5]> then
    set [num v] to [1] // Since 3 is not greater than 5, this code will be skipped over.
else
    if <[2] > [1]> then
        set [num v] to [2] // Since 2 is greater than 1, this code will be run.
    else
        set [num v] to [3] // Since the condition after "else if" was true, this code will be skipped over.
    end
end

Theoretically, an "if-else if" chain could be extended infinitely. For example:

if (false) {
   // ...
} else if (false) {
   // ...
} else if (false) {
   // ...
} else if (false) {
   // ...
} else if (false) {
   // ...
} else if (false) {
   // ...
} // ...

In Scratch:

if <> then
    ...
else
    if <> then
        ...
    else
        if <> then
            ...
        else
            if <> then
                ...
            else
                if <> then
                    ...
                else
                    if <> then
                        ...
                    else
                        ...
                    end
                end
            end
        end
    end
end