06- This time I learned conditional statements in JavaScript

This is the 8th day of my participation in the August Text Challenge.More challenges in August

Hello everyone, I am a bowl of zhou, not you think of the “bowl of porridge”, is a front-end do not want to be drunk 👨🏻💻, if I write an article lucky can get your favor, very lucky ~

This series of articles in the nuggets first, preparation is not easy to reprint please obtain permission

Writing in the front

In this article we’ll look at conditional statements in JavaScript, and you’ll learn the following:

What is a conditional statement

The so-called conditional statement is to determine whether to execute or skip some specified statement block by the result of the specified expression. If the specified expression evaluates to true, the specified block is executed. If false, skip a block or execute another block. The following code is as follows:

if (true) {
    console.log('Conditional statement executed')}Copy the code

The above code is only for demonstration at present, so it is not necessary to understand it temporarily.

The two conditional statements provided in JavaScript are as follows:

if… Else statements
A switch statement

If statement

The if statement is the most common and basic conditional statement in JavaScript. If statements can be subdivided into the following types:

If statement
if… Else statements
if… else if… Else statements

If statement

An if statement determines whether to execute or skip statements based on the result of an expression. The syntax structure is as follows:

if(conditional expression) {// Block of statements to execute when the expression is true
}
Copy the code

According to the above syntax structure, the following flow chart can be drawn:

If the conditional expression in the if statement is true, the specified code block is executed; otherwise, the code block is skipped.

Example code is as follows:

var x = 10
var y = 9

// Prints the largest value in x and y
if (x > y) {
    console.log("The maximum value is x and the value of x is:" + x)
}

if (x < y) {
    console.log("The maximum value is y and the value of y is:" + y)
}
// The result is as follows:
// The maximum value of x is: 10
Copy the code

If the result is true, execute the code in the following statement block. Proceed to the conditional expression in the second if, resulting in false, and skip the following code block.

In an IF statement, curly braces can be omitted from a code block if there is only one statement in the block. Example code is as follows:

var x = 10
var y = 9
if (x > y)
    console.log("The maximum value is x and the value of x is:" + x)

// Can also be written on a single line
if (x < y) console.log("The maximum value is y and the value of y is:" + y)
Copy the code

if… Else statements

In the most basic if statement, blocks of code are executed only if the conditional expression is true, but not if the conditional expression is false. JavaScript provides if… Else statements, which consist of two blocks of code, one executed when true and one when false. The syntax is as follows:

if(conditional expression) {// Block of statements to execute when the expression is true
} else {
  // Block of statements to execute when the expression is false
}
Copy the code

According to the above syntax structure, the following flow chart can be drawn:

Statement block 1 is executed when the conditional expression is true, and statement block 2 is executed for fasle.

Our above code could be rewritten as follows:

var x = 10
var y = 9
if (x > y) {
    console.log("The maximum value is x and the value of x is:" + x)
} else {
    console.log("The maximum value is y and the value of y is:" + y)
}

Copy the code

It’s written the same way up here, and it’s written with less code.

Similarly, several statement blocks have only one statement, and curly braces can be omitted as follows:

if (x > y)
    console.log("The maximum value is x and the value of x is:" + x)
else
    console.log("The maximum value is y and the value of y is:" + y)
Copy the code

if… Else statements can also be nested, as shown in the following example:

var score = 88

/** * Requirements * Output when your score is 100 -> You have taken a full score * Output when your score is greater than 85 -> Your score is Excellent * Output when your score is less than 85 and greater than 60 -> Your score is good * Output when your score is less than 60 -> Your score is failed * Output when the score is 0 -> Your score is 0 */
if (score >= 60) {
    if (score === 100) {
        console.log('You got a perfect score')}else {
        if (score > 85) {
            console.log('Your grades are excellent')}else {
            console.log('Your grades are good')}}}else {
    if (score === 0) {
        console.log('I can't believe you got a zero.')}else {
        console.log('Your grades are failing')}}Copy the code

The execution flow of the above code is as follows:

According to the flow chart, you can clearly see what the code execution flow is like

Else if statement

We used if… Else nested code, increase the complexity of the code structure not to say, and very difficult to read. In most cases, if… Else nested structures can be overwritten with else if statements.

Else if statement is in the original if… Add an else if statement to the else statement.

ifConditional expression1) {
  // The block of code that executes when condition expression 1 is true
} else ifConditional expression2) {
  // The block of code that executes when conditional expression 2 is true
} else ifConditional expression3) {
  // The block of code that executes when conditional expression 3 is true
} else if(conditional expression N) {// The block of code that executes when the conditional expression N is true
} else {
  // None of the above satisfy the code block to execute
}
Copy the code

According to the above syntax structure, the following flow chart can be drawn:

We can now rewrite the above code with an else if statement:

var score = 88

/** * Requirements * Output when your score is 100 -> You have taken a full score * Output when your score is greater than 85 -> Your score is Excellent * Output when your score is less than 85 and greater than 60 -> Your score is good * Output when your score is less than 60 -> Your score is failed * Output when the score is 0 -> Your score is 0 */
if (score === 100) {
    console.log('You got a perfect score')}else if (score > 85) {
    console.log('Your grades are excellent')}else if (score >= 60) {
    console.log('Your grades are good')}else if (score === 0) {
    console.log('I can't believe you got a zero.')}else {
    console.log('Your grades are failing')}Copy the code

It is obvious that code written using the else if statement is flatter and easier to read.

A switch statement

The switch statement is also a conditional statement in JavaScript. Specifically, it is an on/off statement in JavaScript, which is very similar to the if statement. The syntax structure is as follows:

switch(conditional expression) {case value1:
    // The code to execute according to value1
    break // End the switch statement
  case value2:
    // The code to execute according to value2
    break.case valueN:
    // Execute the code that conforms to valueN
    break
  default:
  // The block of code executed when none of the above values match
}
Copy the code

According to the above syntax structure, the following flow chart can be drawn:

The switch statement compares the result of the conditional expression with the value in the case, and executes the block if it does. Default: execute the statement block if none of the preceding conditions are met.

Now our requirement is to have a fixed meal every day, through the program to achieve. Example code is as follows:

// What day is it today
var date = 1

/** * What to eat based on today's date */

switch (date) {
    case 1:
        console.log("Roast duck today");
        break;
    case 2:
        console.log("Beef in sauce today.");
        break;
    case 3:
        console.log("Chili chicken for today.");
        break;
    case 4:
        console.log("Braised pork in soy sauce today.");
        break;
    case 5:
        console.log("Potato and chicken today.");
        break;
    case 6:
        console.log("Hot Pot today");
        break;
    case 7:
        console.log("Take-out today.");
        break;
    default:
        console.log("Your input is incorrect.");
        break;
}

// Final result
// Roast duck today

Copy the code

Break the keyword

We use the break keyword in the switch statement, but it is not required and can be omitted.

However, if the keyword is omitted, the result is different. Example code is as follows:

// What day is it today
var date = 1


switch (date) {
    case 1:
        console.log("Roast duck today");
    / / omit break;
    case 2:
        console.log("Beef in sauce today.");
        break;
    case 3:
        console.log("Chili chicken for today.");
        break;
    case 4:
        console.log("Braised pork in soy sauce today.");
        break;
    case 5:
        console.log("Potato and chicken today.");
        break;
    case 6:
        console.log("Hot Pot today");
        break;
    case 7:
        console.log("Take-out today.");
        break;
    default:
        console.log("Your input is incorrect.");
        break;
}
// Execution result
// Roast duck today
// Today we have beef with sauce
Copy the code

We found that after the omitted break keyword, the execution of the case 1 statement block did not end, but the execution of the case 2 statement block continued.

In fact, as long as the break keyword is not encountered in a switch statement, execution continues, regardless of whether the following criteria are met, until the switch statement is finished.

Default statement

In the standard syntax structure of switch statements, there is a default statement, which is usually placed at the end of the switch statement. This statement is executed when none of the values in the case value satisfy the condition expression.

But in practice, the default statement doesn’t need to be at the end, it can be anywhere. Example code is as follows:

var date = 1

switch (date) {
    case 1:
        console.log("Roast duck today");
        break;
    case 2:
        console.log("Beef in sauce today.");
        break;
    default:
        console.log("Your input is incorrect.");
        break;
    case 3:
        console.log("Chili chicken for today.");
        break;
    case 4:
        console.log("Braised pork in soy sauce today.");
        break;
    case 5:
        console.log("Potato and chicken today.");
        break;
    case 6:
        console.log("Hot Pot today");
        break;
    case 7:
        console.log("Take-out today.");
        break;
}

// Final result
// Roast duck today
Copy the code

As you can see from the code, the position of the default statement does not affect our results, but it is best to leave it last for the sake of readability.

conclusion

Notice: In the next article we’ll look at looping statements in JavaScript

Excellent articles

05- Detailed explanation of the 35 operators in JavaScript

04- Understand basic data types in JavaScript

03- This time I understand variables in JavaScript

02-JavaScript lexical structure

01- What is JavaScript

06- This time I learned conditional statements in JavaScript

Writing in the front

What is a conditional statement

If statement

If statement

if… Else statements

Else if statement

A switch statement

Break the keyword

Default statement

conclusion

Excellent articles

Related Posts

The Hooks useMemo

Introduction to the front-end | JavaScript BOM & DOM manipulation

See breadth and depth algorithms from implementing a simple Webpack