Hello and welcome

Thanks for stopping by yet again.

Table of Content

Full table of content for the entire series is here

Today, we will continue the following

• Getting started (cont'd)
  • Learn Programming concepts (cont'd)

Programming Concepts

Here again to learn some more basic programming concepts.

Control Structures

Control structures in programming are a fancy name for ways to make decisions, repeat actions, and execute specific blocks of code based on certain conditions being true or false (Boolean).

Say for example you want to display a different message to a person depending on their age or gender, then you can use control structures to execute the code that handles each scenario.

Say you want the same block of code to run multiple times like print from 1 to 10 or continue to display the current time every second then control structures are for you.

We are JavaScript developers here so we will look at some control structures in JavaScript below. For ease of understanding we will broadly categorize them into 2 sub-groups; the Decision Control Structures and the Repetition Control Structures

Decision Control Structures

These are used to decide if to execute some block of code instead of others depending on a given condition and they include:

• if...else statement: This allows you to execute different blocks of code based on a given condition. It allows you to say ‘if’ a condition is true then do some code ‘else’ do another thing.

if (someConditionIsTrue) {
  // Code to execute if the condition is true
  // do something in your application
} else {
  // Code to execute if the condition is false
  // do something else in your application
}

It is important to note that any block of code whose condition is not true will not be executed

if (1 + 1 > 3){
  // 1 + 1 > 3 is true
}
else{
  // 1 + 1 > 3 is not true
}

From the example above, we see that the code 1 + 1 > 3 is true will not run because 1 + 1 > 3 will return false.
The code that will run in this case is 1 + 1 > 3 is not true

So the logic of the if else is:
if condition is true, do what is in the block of code in between the curly braces {} and jump to the code after the if…else block.

Otherwise, do what is in the curly braces {} in the else block and then continue

• if…else if...else statement: This here is the same as the if else statement, but it gives you the option of checking for multiple conditions instead of just 2

Say you want to do something different on each weekday, you can say

if (today === ‘Monday’){
  // do the Monday thing
}

else if(today === ‘Tuesday’){
  // do the Tuesday thing
}

else if(today === ‘Wednesday’){
  // do the Wednesday thing
}

else if(today === ‘Thursday’){
  // do the Thursday thing
}

else if(today === ‘Friday’){
  // do the Friday thing
}

else{
  // do nothing because it the weekend!!!
}

We can see that we are handling multiple cases in the if and else if blocks and if none of them meet the criteria set then the else block serves as a kind of catch all for any case that is not handled.

The final else block is not required but if it will be used then it must come last in the list

We will take more examples in the weeks to come. This is just to aid basic understanding and so we have a starting point when demos begin because we are here to help.

• switch statement: This allows you to pass an expression and then execute a block of code depending on the outcome of that expression.

switch (expression) {

  case value1:
    // Code to execute if expression is equal to value1
    break;
  case value2:
    // Code to execute if expression is equal to value2
    break;
  case value3:
    // Code to execute if expression is equal to value3
    break;

  // Add as many cases as needed

  default:
    // Code to execute if expression does not match any case
}

From the above, we see that what the computer does is dependent on if the expression that was given to the switch block matches any of the cases.

If no case is matched, there is the default block that serves as a catch all.

It is also important to note that the break is needed otherwise the code of the next case will be executed as well. The break is like saying move on to the next line of code outside the switch block so it must come after whatever you want to do for each case.
Example:

switch (dayOfTheWeek) {

  case ‘Monday’:
    // Code to execute if dayOfTheWeek is equal to ‘Monday’
    break;
  case ‘Tuesday’:
    // Code to execute if dayOfTheWeek is equal to ‘Tuesday’
    break;
  case ‘Wednesday’:
    // Code to execute if dayOfTheWeek is equal to ‘Wednesday’
    break;
  case ‘Thursday’:
    // Code to execute if dayOfTheWeek is equal to ‘Thursday’
    break;
  case ‘Friday’:
    // Code to execute if dayOfTheWeek is equal to ‘Friday’
    break;
  default:
    // Code to execute if dayOfTheWeek does not match any weekday 
    // So it may be weekend or some other value not matched above
}

If the condition you want to check for is based on the same unchanging expression like weekday above then switch statement can be a more concise replacement for if…else if…else statement.

Repetition Control Structures

These are used to execute the same block of code repeatedly until a condition is met or not met. They are sometimes referred to as loops because the code is run in a loop until something breaks the loop or ends it. And they are:

• while loop: This loop executes a block of code repeatedly as long as the specified condition is true. The syntax is

while (someCondition) {
  // Code to execute repeatedly as long as the someCondition is true
}

So lets say we have an integer or number variable called count and its value is 100. We can write a while loop to do something until the value of count is 0.

count = 100
while(count > 0){
  // do something interesting
  // or just print count
}

This code here will repeat everything in the code block until the value of count is 0.

In the code we have above, the code will run forever because the value of count is 100 and so, every time it runs the code block and then goes back to check again, count > 0 will still be true, so it will run again.

A loop that runs forever is called an infinite loop, it is a loop whose condition can never be false so it will continue to run until you manually stop it or the machine crashes or some other stopping event happens.

Infinite loops should be avoided unless you know what you are doing, and you want the code to keep repeating endlessly.

Since we do not want that here, we need to fix the above code by reducing the value of count in each iteration of the loop like so:

count = 100
while(count > 0){
  // do something interesting
  // or just print count
  count = count – 1
  // or count-- 
  // to reduce the value of count by 1
}

Now, the value of count will be reduced by 1 on each iteration of the loop and once count is no long greater than 0, the loop will break and move on to the next line of code after the loop block.

In the example above, the loop will run 100 times because the counter variable which we named count here is 100 and it is decremented by 1 each iteration.

There is no law that says we must only decrement by 1 so we can decrement by 2 or 5 or 10 in each iteration and the loop will adjust accordingly.

There is also no law that says we must start our counter from 100, it can be anything. We can start from 0 and count upwards and set the condition to be when count is up to a certain value like 1000. We can even use other data types as the ‘counter’. So long as we alter them in the loop until the at some point in the future, the loop ends (if we want it to). The counter is simply the controller of the loop that determines if the loop will break or continue.

• do…while loop: Almost the same as the while loop, but the code block is executed at least once before checking the condition. So the instruction is do what is in the code block while a given condition is true. But because you encounter the do block first then the code in it will run at least once before the while condition is checked and then repeated (or not) depending on the condition of the condition. Get it?. No?. Ok moving on. Example:

do {
  // Code to execute at least once then repeatedly 
  // as long as the condition is true
} while (condition);

• for loop: This is a more concise way of writing the other loops. It allows you put the counter, condition and the change on each iteration in one line. Syntax is as follows.

for (initialization; condition; change) {
  // Code to execute repeatedly as long as the condition is true
}

let us revisit out while loop from above. It now prints the count and uses the decrement operator to (well) decrement the value of count on each iteration

count = 100
while(count > 0){
  // just print count
  print(count)
  count-- 
  // to reduce the value of count by 1
}

Now let us do the same thing using the for loop.

for (count = 100; count > 0; count--) {
  // just print count
  print(count)
}

The 2 snippets above do the exact same thing but the for loop is more concise and cleaner too if you ask me but then what do I know right.

There are other ways to loop in Javascript like the for…in, for…of and some others that allow looping through certain data structures but we are here to do the basics and we will get into those when we start coding demos.

This is it for today. Stay frosty guys.

Previous post is here

Next post is here