Control Structures in JavaScript - If-Else, Switch-Case


Basic control structure in JavaScript, if-else, and switch-case statements, how they work in JavaScript, Along with them this article includes the ternary operator also. You can watch the video along with this to know it better.

Control Structures

The control structures are the language construct that allows the branching of the flow of the control within a program. Very familiar to any language is if-else control structure, and so is in JavaScript. First we are going to start with the if-else, than we will proceed to the if-else-if ladder and finally moving to switch case we will conclude the article. But wait, there is one tiny little thing we missed, the ternary operator, this is more like an operator than the control structure but in some cases it can be called as the control structure.

The if-else

the simplest example we can take is the if-else so lets see how it works.


var value = true;
if(true){
	console.log("inside if");
}
else{
	console.log("inside else");
}

Output: When value = true
inside if

Output: When value = false
inside else

The expression is passed in the if statement and based on the evaluation of the expression we get either true or false, which decides if the if block is to be executed or not, if the expression result in true the if is executed else the control goes to the else block.

We can nest if-else like


if(<expression>){
	if(<expression>){

	}
	else{
		
	}
}
else{

}

Another form of the if-else is if-else if-else structure, in this we can check for multiple conditions, and hence we get to evaluate multible expression, the example below shows this


var a = 5;
var b = 6;

if(a<b){
  console.log("inside if");
}
else if(a>b){
  console.log("inside else if");
}
else{
  console.log("inside else");
}

Output:
inside if

Output: when a = 7, b = 6
inside else if

Output: when a = 6, b = 6
inside else

In this code sample we see the else if working, we use else if, where we can have more than one condition, however there are other ways to do this(using && or || in same if), however in this example we have used it to display the concept. In first case a is less than b so first if is evaluated true and executed, in second case we have a greater than the b so the else if condition is true and finally we have a and b equal than else is executed.

Note: we have only displayed the results here but not separate a and b in program, you can try the inputs as per the output shown.

Now that we know if-else and if-else if-else we are good to go for Switch-case statements

Switch-Case

we use switch case where we have very limited or predefined cases of values, The concept is, we place a field in the switch and then on the basis of case evaluation we perform specific actions.

In the example below we will use the day of Week scenario to demonstrate the switch case. We will switch a variable in which we will pass the value of day and on the basis of that value the switch-case will result the name of the day.


var day = 1;

switch(day){
  case 1:
     console.log("Monday");
      break;
  case 2:
     console.log("Tuesday");
      break;
  case 3:
     console.log("Wednesday");
      break;
  case 4:
     console.log("Thursday");
      break;
  case 5:
     console.log("Friday");
      break;
  case 6:
     console.log("Saturday");
      break;
  default:
     console.log("Sunday");
      break;

}

output:
Monday

Output: when day = 3
Wednesday

Output: when day = anything other than {1,2,3,4,5,6}
Sunday

Hence we see that it matches the case and results accordingly.

So, this is most of everything we would like you to know about control structures in JavaScript, however there is a little something more to that.

Ternary Operator

Though its a part of operators but We would like to introduce it here with control structures, its a
(expression)?result:result;
if?then:else

if the expression is true the value after '?' will be assigned else value after the ':' is assigned.

Note: the word assigned is used here because it is used in most of assignment cases.


var a = 5;
var b = 6;
var c = (a>b)?a:b;
console.log("greater of a and b is: "+c);

Output:
greater of a and b is: 6

In this cute little program we have only compared two values, to show which one is greater.

So here we leave you in this part, Hope you enjoyed learning and leave the comments if you have to say something about the article.