Syntax and Basic Constructs (Pt b) - Part 8 of Frontend Development Series
Tags: javascript
Published: 2020-01-05 03:11:18

In the [previous article](https://dev.to/dillionmegida/syntax-and-basic-constructs-65) 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](https://dev.to/dillionmegida/frontend-development-series-3004)_

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;
```javascript
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,
```javascript
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.
<br/>
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:

```javascript
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;
```javascript
for(initialization; condition; incremental) {
  // run this code
}
```

For our program above, we would have:
```javascript
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](https://dev.to/dillionmegida/javascript-for-loop-jcn)

#### 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;
```javascript
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:
```javascript
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;
```javascript
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
```javascript
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
```javascript
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;
```javascript
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](https://twitter.com/iamdillion) or just leave them below in the comment section.

Thanks for reading : )