Module 01

Full Stack Web Development

Conditional and loop

statements
Outline
● Conditional statements
● Loop statements
Conditional statements
What are conditional statements?

Conditional statements are code expressions used to tell the computer, which block of
code to execute.

In other words, conditional statements determine the flow of your computer program.
If statement
If statement are the basic foundation of conditional statements.

It takes a condition (which should result in a boolean), and a block of code that
executes when the condition’s result is true.
If statement
In this example, we have a variable called age which has a value of 21. Below that, we have
an if statement and a block of code right after it.

The condition of the if statement tells us that, the variable age should be greater than
equals to 17, for the block of code to be executed.
If statement
Now, since age has a value of 21 which is clearly greater than 17, the condition will result in
a true (boolean) and the block of code will now be executed.

So the code below will have an output of: “You can now create an ID Card”
Else statement
Now what happens if age does not meet the required condition ? What if age is less
than 17 ?

Surely, the code below will have no output. But it would be better if we were to give some
kind of message to the user that their age isn’t eligible. For this, we need else statement.
Else statement
An else statement will act as a backup plan for if statements. It does not require a
condition, it only needs a block of code to execute.

The block of code of an else statement executes when the condition of an if statement
does not meet its requirement.
Else statement
As you can see, we’ve added an else statement to the example below. This way, when age
is NOT greater than equals to 17, the else statement’s block of code will be executed. So
the output of the code below will now be “You are not old enough to create an ID card”
Else if statement
Now let’s take a look at a different case, let’s say we want to make a program to check if a
student has a passing grade. In that case, we’re gonna need to have multiple
conditions.

But currently, we can only make 2 possible outcomes. This is where else if statements
come to play.
Else if statement
An else if statement is basically an if statement combined with an else statement.

It will act as a backup plan for an if statement, however it will also need a condition
to be fulfilled.
Else if statement
Take a look at the code, grade has a value of
“B” which means it will not meet the
condition of the if statement.

Because the if statement’s code block isn’t

executed, it will continue to check the
condition of the else if statement.

The condition of the else if statement will

result in a true (boolean). This means that
the code block will be executed, and the
output of the code will be: “Great Result!”
Chaining conditions
We can also chain together several else if
statements to create even more possible
outcomes.

We can also add an else statement to

handle cases where grade has a value of other
than “A”, “B”, or “C”.
Switch Case
The JavaScript switch statement is used in decision
making.

The switch statement evaluates an expression and

executes the corresponding body that matches the
expression's result.

The syntax of the switch statement is:

Switch Case
The switch statement evaluates a
variable/expression inside parentheses ().

If the result of the expression is equal to value1:

its body of case 1 is executed.

If the result of the expression is equal to value2:

its body of case 2 is executed.

This process goes on. If there is no matching case,

the default body executes.

Switch Case - Example
Difference Between if else and Switch Statement

Parameter If-else Switch

Definition The if and else blocks are The switch statement has
executed depending on the multiple cases, and the code
condition in the if statement block corresponding to that
case is executed

Evaluation Used for integer, character, Used for character

pointer, floating-point type, expressions and integers.
or Boolean type.

Testing Tests both logical Tests only equality

expressions and equality

Expression Multiple statements for Single statements for

multiple decisions multiple decisions
Difference Between if else and Switch Statement

Parameter If-else Switch

Default Execution If the condition inside the if- If the condition inside switch
statement is false, then the statements does not match
code block under the else any of the cases, the default
condition is executed statement is executed.

Editing Difficult to edit nested if-else Easy to edit.

statements.

Values Based on constraint Based on user

Truthy and falsy values
Falsy and truthy are terms used in programming to determine values within a boolean
context.

For example in a boolean context, 1 is considered true which means 1 is a truthy value. 0
in a boolean context is considered false which means it is a falsy value.
Truthy and falsy values
At first glance, this seem quite simple but Falsy
Javascript can sometimes become
● "" (empty string)
confusing.
● 0
● null
Here is a list of some falsy and truthy
● undefined
values that can sometimes be confusing.
● NaN
If you're not sure whether a value is
Truthy
truthy or falsy, you can use an if
statement and input your value as the ● " " (blank character string)
condition. ● [] (empty array)
● {} (empty object)
If your value is truthy, then surely the if ● 1
statement should execute the code in the ● "1" (string)
● "0" (string)
block.
● "false" (string)
● "true" (string)
Logical Operators
Logical operators are used to determine the logic between variables or values.

Given that x = 6 and y = 3, the table below explains the logical operators:
Logical Operators Example
Ternary Operator
Short-Circuiting
Short-circuiting is a behavior exhibited by logical operators
(&&, ||) where the evaluation of the second operand is skipped
if the outcome can be determined by evaluating the first
operand alone.
The && Operator

The && operator returns the first falsy operand, or

the last truthy operand if all operands are truthy.
The || Operator
The || operator returns the first truthy operand, or the last
falsy operand if all operands are falsy.
Pseudocode in Conditional Statement
Since you have learn about
pseudocode in the last session.
Here is example of pseudocode
implemented in conditional
statement.

Remember, pseudocode will help

you to solve a problem with easier
approach!

Don’t forget to convert this

pseudocode into a programming
code!
Loop statements
What are loops?

In simple terms, loops are a sequence of commands or instructions that is repeatedly

executed until a certain condition is met.
For loop
A for loop consists of 3 statements in its
conditions.

● The first statement is executed once before

the execution of the code block, to initialize
the iteration variable.
● The second statement defines the condition
for executing the code block.
● The third statement is executed every time
after the execution of the code block.
While loop
● While loops are basically if conditions that are repeated.
● As long as the condition is true, the loop will continue.
While loop
This loop will result in an infinite loop. Which
means the loop will never stop.

Keep in mind that when using loops, we

should always set a condition so that the
loop will eventually break/stop.
While loop
This is how you should make a while loop
statement. In every iteration, the i variable
will be incremented, therefore the condition will
eventually result in a false boolean
Do … While loop
Do while loops are very similar to while loops.

The only difference it has is that it only starts checking the condition after the first
code block execution.
Do … While loop
In this example, the i variable already has a
value of 5.

The while loop will not execute since the

condition is checked before the code block
execution, and the condition itself results in
a false value.

However the do while loop will execute at

least once, because the condition is checked
only after the first code block execution
Break
Normally, a loop exits when its condition
becomes falsy. But we can force the exit at
any time using the special break directive.

In this code, the loop will stop when the

value of sum is 5.
Continue
The continue directive is a “lighter version”
of break. It doesn’t stop the whole loop.
Instead, it stops the current iteration and
forces the loop to start a new one (if the
condition allows).

We can use it if we’re done with the current

iteration and would like to move on to the
next one.
Pseudocode in Looping Statement
Check out this pseudocode
in order to solve a problem
that needs to implement
looping statement.

Try to solve this problem with

another looping such as
WHILE!
Exercise
● Write a code to check whether the number is odd or even
○ Example: 25 → odd number, 2 → even number
● Write a code to check whether the number is prime number or not
○ Example: 7 → 7 is a prime number
○ Example: 6 → 6 is not a prime number
● Write a code to find the sum of the numbers 1 to N
○ Example: 5 → 1 + 2 + 3 + 4 + 5 = 15
○ Example: 3 → 1 + 2 + 3 = 6
● Write a code to find factorial of a number
○ Example: 4! → 4 x 3 x 2 x 1 = 24
○ Example: 6! → 6 x 5 x 4 x 3 x 2 x 1 = 720
● Write a code to print the first N fibonacci numbers
○ Example: 15 → 610
Thank You!
Thank You!