If statements
In decision making, if there is only one condition, we use the if statement. If the condition is true, perform a particular block of code, else don’t.
Let us understand this using code.
let s: string = "coffee"
console.log("Taking orders")
if(s==="coffee"){
console.log("Your coffee will be ready in 5 minutes!")
}
In the above code, the console.log statement outside the if block gets executed irrespective of the value of string s. On the other hand, since the value of s is coffee, the statement inside the if block will get executed.
Let us see what happens when the value of s is not coffee.
let s: string = "tea"
console.log("Taking orders")
if(s==="coffee"){
console.log("Your coffee will be ready in 5 minutes!")
}
console.log("Next order please")
As you can see in the above code, after the “Taking orders” statement, “Next order please” gets executed directly, skipping the code in if block. This is because our condition, s===”coffee” is false as s= ”tea”.
We can use if statements when there are many conditions that are not related to each other. Let’s see:
let s: string = "coffee"
let s2: string = "tea"
console.log("Taking orders")
if(s==="coffee"){
console.log("Your coffee will be ready in 5 minutes!")
}
if(s2==="tea"){
console.log("Your tea is ready!")
}
console.log("Next order please")
As you can see, both the statements within if block got executed irrespective of each other’s condition being true or false.
If-else statement
We use if-else statement in decision making, when we want the program to perform a particular task when the condition is true. And if the condition is false, we want it to perform the other task.
Source
let cost: number = 32
if(cost<500){
console.log("This product is cheap")
}else{
console.log("This product is expensive")
}
Since the condition (cost>500) is true, the code inside the if block gets executed. Otherwise, if (cost>500) becomes false, the code in the else block gets executed.
let cost: number = 1000
if(cost<500){
console.log("This product is cheap")
}else{
console.log("This product is expensive")
}
If-else-if ladder
We have a complex condition that can have more than two values and not just true or false. In such a case, we use the if-else-if ladder. We can also use it when we have many interrelated conditions.
Source
Let us understand this using an example code:
let coffee: string ="coffee"
let tea: string="tea"
let juice: string="juice"
let order1:string=coffee
let order2:string=tea
if(order1==coffee&&order2==tea){
console.log("Serving coffee and tea")
}else if (order1==tea&&order2==juice){
console.log("Serving tea and juice")
}else if (order1==juice&&order2==coffee){
console.log("Serving juice and coffee")
}else{
console.log("Please give your order again")
}
We have three options for drinks: coffee, tea, and juice. Since order1 is coffee and order2 is tea in the above code, the first condition (if statement) becomes true. The block of code inside the if statement gets executed.
Let us change the values of order1 and order2 to tea and juice, respectively, and see what happens:
let order1:string=tea
let order2:string=juice
We see that now the first else if block is executed as order1==tea and order2==juice.
Let us look at what happens when all the if and else if conditions are false by changing the values of our orders:
let order1:string=coffee
let order2:string=juice
We see in the above case that the code in the else block is run.
What happens when more than one is true? Let us see what happens by adding two new conditions.
let coffee: string ="coffee"
let tea: string="tea"
let juice: string="juice"
let order1:string=juice
let order2:string=coffee
if(order1==coffee&&order2==tea){
console.log("Serving coffee and tea")
}else if (order1==tea&&order2==juice){
console.log("Serving tea and juice")
}else if (order1==juice&&order2==coffee){
console.log("Serving juice and coffee")
}else if(order1==coffee||order1==tea){
console.log("What is it? coffee or tea?")
}else if(order1==juice||order1==tea){
console.log("What is it? juice or tea?")
}else{
console.log("Please give your order again")
}
From the above example, we see that even though both conditions:(order1==juice&&order2==coffee) and (order1==juice||order1==tea)are true, only the first one is executed. After executing the first true condition, the program’s control comes out of the whole if-else-if ladder code.
Nested-if
We can have another if-else statement inside an if-else statement for decision making. This is called nested-if.
Source
Let us see a demonstration of it through code:
let num1:number =300
if(num1<=100){
if(num1<50){
console.log("number less than 50")
}else if(num1>50&&num1<100){
console.log("number is less than 100")
}else{
console.log("number is 100!")
}
}else if(num1>100&&num1<200){
console.log("number between 100 and 200")
}else{
if(num1<1000){
console.log("number is less than 1000 but more than or equal to 200")
}else{
console.log("this number is huge")
}
}
In the above example, since num1 is 300, it only satisfies the else condition. Within the else statement, there is another if-else statement from which (num1<1000) is satisfied, which is the if block.
Let us see what happens when we change the value of num1 to 100.
let num1:number =100
The control goes inside the if statement, where there is an if-else-if ladder. The else block gets executed in this if-else-if ladder since num1 is 100.
Switch
A switch statement compares a variable's value to the values supplied in case statements. When a case statement with the same value as the variable is discovered, the code in that case statement is executed.
The break keyword terminates a switch statement, and it's usually used at the end of each case.
let ch : string = '@';
switch (ch) {
case '!':
console.log("Hello!");
break;
case '@':
console.log("How are you?");
break;
case '#':
console.log("Let us code.");
break;
case '$':
console.log("Reading articles is fun!");
break;
case '%':
console.log("We should work hard!");
break;
case '^':
console.log("This is a switch.");
break;
case '&':
console.log("TypeScript");
break;
default:
console.log("We are in default case");
break;
}
Ternary Operator
The ternary operator returns the first expression if the condition is true. Else it yields the second expression. In the example below, the condition is a==b. Since, in this case, both variables a and b are equal, the first expression gets executed.
let a: number = 4;
let b: number = 4;
console.log(a == b? 'a is equal to b':'a is not equal to b')
FAQs
-
Why is the ternary operator special?
The ternary operator is the only operator that takes three values. A ternary operator is a shortcut for an if..else statement.
-
What is the flow of control in programming?
The flow of control in programming refers to the sequence in which function calls, instructions, and statements are executed or evaluated while a program is running. An if/else statement is an example of a control flow statement.
-
Can an if/else statement control the flow of the program?
Yes, an if/else statement is an example of a control flow statement. As soon as it finds where the condition is true, the control of the program goes into that if/else block, executes the code in it, and then skips the rest of the body of if/else and goes to code which comes after the if/else body.
Key Takeaways
From this article, we learned about decision making statements in TypeScript. We learned why we need them. We saw the if, if-else, if-else-if ladder, nested-if, switch, and ternary operator theoretically and practically in code.
But this is not enough; you need something extra to excel in Vue.js truly. If you want to learn more about Vue.js, you can read our articles on Vue.js or take our highly curated Web Development course.
310+ registered 
