Syntax and Basic Constructs (Pt b) - Part 8 of Frontend Development Series

In the previous article in this series, we looked at some basic constructs used in javascript. In this article, part b, we would look at more constructs.

You could find a list of all articles in this series here - Frontend development series

Continuation from the previous part...

Syntax and Basic Constructs

7. Loops

The term looping is used in several programming languages. Sometimes, you would want to execute a code several times. Imagine we wanted to add the value of 1 to a variable for 5 times, without looping we would have;

var number = 5;
number = number + 1; // add 1st time
number = number + 2; // add 2nd time
number = number + 3; // add 3rd time
number = number + 4; // add 4th time
number = number + 5; // add 5th time
console.log(number);
// Expected output: 10

This procedure is obviously tasking. Imagine we had to do this 100 times.

Types of Loops in Javascript

Some of them are:

• While loop
• Do...while loop
• for loop ...amongst others

While loop

This is a looping method in which a code is continuously executed as long as a given condition remains true.
For our code above, we could have a condition - count <= 5, which means that a count variable should be less than or equal to 5 for the code in the loop to run. We could use this variable to monitor how many times 1 is added to the variable. We would have,

var number = 5;
// we have to initialize the count variable
var count = 0;
// while loop
while(count <= 5) {
  variable = variable + 1;
  count = count + 1;
};
console.log(variable);
// Expected output: 10

This is how the while loop is used. It takes in the condition in parentheses and executes the codes given in curly braces.


Notice at the end we had to increase the count variable also?
If we do not increase the count variable, it would always be 0, which makes the condition always true, hence, an infinite loop. An infinite loop can destroy our website or make the webpage completely inaccessible.

What our loop does is it checks if the count variable is less than or equal to 5, if true it executes the code. Within the code, it increases the number and count variable, then checks the condition again before executing the code. When the count variable became 11, the condition resulted to false which ensured that our codes were not executed again.

Do...while loop

This method is similar to the while loop. The only difference is that the while loop checks the condition to be true before executing the code but the do...while loop executes the code at least once, before checking the condition to be true for further executions. A good example would be:

var number = 5;
// we have to initialize the count variable
var count = 6;
do {
  number = number - 1;
  count = count - 1;
} while (count <= 5 && count >= 0);
console.log(number);
Expected output: 10

Notice that two conditions were used? You can many conditions with the && (AND) operator. You would discover the reason for the second condition shortly.

As we can see, despite the fact that the number variable was not less than or greater than 5, the code was executed. The first run made the count variable 5, which made it pass the condition and allowed further executions until the count variable became -1. If the second condition wasn't set, we would also have an infinite loop as -1, -2 and so on would be less than or equal to 5.

for loop

This, still similar to the above methods comes in a well-defined way. It's syntax is;

for(initialization; condition; incremental) {
  // run this code
}

For our program above, we would have:

var number = 5;
for(var count = 0; count <= 5; count ++) {
  number = number + 1;
}
console.log(number);
Expected output: 10

Notice how well-defined it is? It handles the initialization, condition, and increments in the parentheses and executes the codes given in the curly braces.

Learn more on loops in this simplified article

8. Conditions

When coding, you wouldn't get a one-path program all the time. Sometimes, you would need to have different directions for a program to run. The path which the program would choose would be dependent on a condition.

Conditions are handled with if statements and switch statements.

if statements

'If' just as it means grammatically controls the flow of program execution with given conditions. If this, that. If them, those. Example;

var number = 5;
if(number > 5) {
  console.log("The number is greater than 5");
}
// Expected output is nothing

There'd be no output in the console because the condition isn't meant. This resulted in the program skipping that part.
We could also add other options such that if a condition isn't meant, another program can be run. Example:

var number = 5;
if(number > 5){
  console.log("The number is greater than 5");
} else if (number = 10) {
  console.log("The number is equal to 10");
} else {
    console.log("The number is not greater than 5 and not equal to 10");
}
// Expected output: The number is not greater than 5 and not equal to 10

else if could be numerous providing other options if the previous if statements are false, while the else statement contains the default code to be run if all if statements return false. It is like the last card.

Switch statements

This is similar to if statements but it is more readable. For our program above, we would have;

var number = 5;
switch(number) {
  case (number > 5):
    console.log("The number is greater than 5");
    break;
  case (number > 5):
    console.log("The number is equal to 10"");
    break;
  default:
    console.log("The number is not greater than 5 and not equal to 10");
}
// Expected output: The number is not greater than 5 and not equal to 10

default is similar to else such that if no cases are found, the code within it runs.

9. Functions

A javascript function is a block of codes created to perform a particular task or a couple of tasks. It is advisable to always design functions to perform one task.

Syntax for declaring functions is

function myFunction1(args) {
    // block of codes
}

args are arguments which are passed to the function.

For example, a function which performs addition on two numbers passed to it and returns the answer

function addTwoNumbers(a, b) {
    return a + b
}

a and b are similar to variables which the function uses to produce the result.

Functions are not executed until they are called or invoked. For the above function to be executed, we'd have to call it like this;

let answer = addTwoNumbers(5, 6);
console.log(answer);
// Expected output
// 11

There's more to functions than this but this is a great starting point.

Conclusion

These are the basics syntax and constructs used in javascript.

You could reach out to me with any questions or contributions on twitter - @iamdillion or just leave them below in the comment section.

Thanks for reading : )