Câu lệnh if...else trong JavaScript

Trong bài viết này, chúng ta sẽ cùng nhau tìm hiểu về câu lệnh if...else trong Javascript thông qua các ví dụ nhé.

JavaScript if...else Statement

Trong lập trình, có thể nảy sinh các tình huống mà bạn muốn làm một việc nào đó tùy theo từng trường hợp cụ thể. Ví dụ, đặt điểm A, B hoặc C dựa theo điểm trung bình của một học sinh.

Trong những tình huống như vậy, bạn có thể sử dụng câu lệnh if...else của JavaScript.

Trong JavaScript, có ba dạng của câu lệnh if...else.

1. if statement
2. if...else statement
3. if...else if...else statement

JavaScript if Statement

Cú pháp của câu lệnh if là:

if (condition) {
    // Phần thân của câu lệnh if
}

Với câu lệnh if, bên trong dấu ngoặc đơn (parenthesis) () ta sẽ truyền điều kiện - condition vào trong đó.

1. Nếu điều kiện có kết quả là true, code trong phần thân của if sẽ được thực thi (execute).
2. Nếu điều kiện có kết quả là false, code trong phần thân của if sẽ được bỏ qua (Không chạy vào phần thân).

Ví dụ:

// Kiểm tra số dương

const number = 3;

// Nếu number lớn hơn 0 sẽ chạy code trong {}
if (number > 0) {
 // Phần thân của câu lệnh if
  console.log("Đây là một số dương");
}

console.log("Chương trình của bạn đã chạy đến dòng này 🤗");

Ở ví dụ trên nếu number là một số dương thì number > 0 là true thì code trong phần thân của câu lệnh if hay code trong {} sẽ được thực thi. Sau khi thực thi code trong phần thân của if, chương trình tiếp tục chạy từ trên xuống như bình thường 😄.

Kết quả sẽ như sau:

Đây là một số dương
Chương trình của bạn đã chạy đến dòng này 🤗

Đoạn code trên, Javascript đã chạy lần lượt từ trên xuống. Nếu gặp điều kiện if nó sẽ kiểm tra giá trị mà bạn truyền vào trong () và nếu kết quả là true thì code trong {} sẽ được thực thi. Ngược lại nếu là false thì Javascript sẽ bỏ qua đoạn code trong phần thân của if.

Giả sử chúng ta nhập một số âm:

const number = -3;

// Kiểm tra -3 < 0 nên không chạy code trong phần thân của if
if (number > 0) {
  // -3 < 0 nên không chạy vào đây 🤪
  console.log("Đây là một số dương"); // Không chạy ở đây luôn 🥱
  // Không chạy ở đây nữa 😆
}

console.log("Chương trình của bạn đã chạy đến dòng này 🤗");

Kết quả sẽ như sau:

Chương trình của bạn đã chạy đến dòng này 🤗

Do dòng console.log("Chương trình của bạn đã chạy đến dòng này 🤗"); nằm ngoài phần thân của câu lệnh if, nên nó luôn được thực thi.

Các toán tử so sánh và logic sẽ được sử dụng trong các điều kiện. Để tìm hiểu thêm về các toán tử so sánh và logic, bạn có thể xem lại bài viết trước để tìm hiểu thêm nhé ^^.

JavaScript if...else statement

Một câu lệnh if còn có thể kết hợp với else. Cú pháp của câu lệnh if...else là:

if (viết điều kiện ở đây) {
    // Nếu điều kiện là *true* thì chạy vào đây 🎉
} else {
   // Nếu điều kiện là *false* thì chạy vào đây 🥱
}

Có đúng thì sẽ có sai, nếu bộ đồ này đẹp mà giá cả ok thì mình mua, còn không thì mình mua chỗ khác 😂. Câu lệnh if...else cũng hoạt động y như vậy.

Nếu điều kiện trả kết quả là true:

1. code trong phần thân của if được thực thi
2. code trong phần thân của else bị bỏ qua khỏi quá trình thực thi (Vì đã thực thi tại if)

Nếu điều kiện trả kết quả là false:

1. code trong phần thân của else được thực thi
2. code trong phần thân của if bị bỏ qua khỏi quá trình thực thi (Vì đã thực thi tại else)

Ví dụ:

// Kiểm tra số truyền vào là dương hay âm hoặc 0

const number = 3;

// kiểm tra nếu number > 0 thì chạy vào trong if và bỏ qua else
if (number > 0) {
  console.log("Bạn vừa nhập số dương");
}
// nếu số truyền vào <= 0, chạy vào else
else {
  console.log("Số vừa nhập có thể là số âm hoặc 0");
}

console.log("Chương trình chạy đến đây rồi nè 🤗");

Kết quả chương trình trên sẽ là:

Bạn vừa nhập số dương
Chương trình chạy đến đây rồi nè 🤗

Bạn thấy nếu nhập số dương thì chương trình sẽ chạy vào phần thân if và phần thân else sẽ bị bỏ qua. Nếu ta nhập số < 0 thì chương trình sẽ chạy vào phần thân else và bỏ qua mọi thứ trong if.

Kết quả khi nhập số âm sẽ là:

Số vừa nhập có thể là số âm hoặc 0
Chương trình chạy đến đây rồi nè 🤗

Chương trình sẽ vẫn chạy từ trên xuống dưới 😊.

JavaScript if...else if statement

Câu lệnh if...else được sử dụng để thực thi một khối code trong số hai lựa chọn (Không được cái này thì được cái kia). Tuy nhiên, nếu bạn muốn có nhiều hơn hai lựa chọn (Không được cái này thì được cái kia, hoặc được cái kia), thì chúng ta có thể dùng if ... else if ... else.

Cú pháp của câu lệnh if ... else if ... else là:

if (condition1) {
    // code block 1
} else if (condition2){
    // code block 2
} else {
    // code block 3
}

1. Nếu condition1 kết quả là true, khối code 1 được thực thi.
2. Nếu condition1 kết quả là false, thì kiểm tra condition2.
3. Nếu condition2 kết quả là true, khối code 2 được thực thi.
4. Nếu condition2 kết quả là false, chạy vào khối code 3 😋.

Ví dụ:

// Kiểm tra số truyền vào là dương, âm hoặc 0

const number = 0;

// kiểm tra nếu number > 0 thì chạy vào trong if và bỏ qua mấy câu lệnh dưới luôn
if (number > 0) {
  console.log("Bạn vừa nhập số dương");
}
// nếu số truyền vào < 0, chạy vào else if
else if (number < 0) {
  console.log("Này là số âm chứ còn gì nữa 🤩");
}
// Không phải số dương 😶, cũng không phải số âm 😥, chạy vào else thôi 🥱
else {
  console.log("Số vừa nhập là số 0");
}

Kết quả đoạn chương trình trên:

Bạn vừa nhập số dương

Giả sử bạn đã nhập -3, khi đó điều kiện kiểm tra đầu tiên > 0 sẽ trả kết quả là false (không chạy vào if). Sau đó, kiểm tra điều kiện thứ hai < 0, kết quả là true (-3 < 0) thì chương trình sẽ chạy vào khối trong điều kiện thứ hai và kết quả là: Này là số âm chứ còn gì nữa 🤩.

Tương tự nếu nhập số 0 thì 2 điều kiện trên không thỏa mãn điều kiện, do đó nó sẽ chạy vào khối code của else.

Nested if...else Statement

Sau khi đã tìm hiểu về các câu lệnh trên, chúng ta có thể kết hợp chúng lại với nhau. Các câu lệnh có thể lồng nhau (nested) để thực hiện các đoạn mã theo từng trường hợp ^^.

// Kiểm tra số truyền vào là dương, âm hoặc 0
const number = 3;

if (number >= 0) {
    if (number == 0) {
        console.log("Bạn vừa nhập số 0");
    } else {
        console.log("Bạn vừa nhập số dương");
    }
} else {
    console.log("Đây là số âm");
}

Giả sử ta nhập 3. Trong trường hợp này, number >= 0 là true, nên nó sẽ đi vào bên trong câu lệnh if.

Trong câu lệnh if, tiếp tục lại có các câu lệnh khác, 3 == 0 là false nên nó không chạy vào if mà chạy vào else. Kết quả sẽ là Bạn vừa nhập số dương.

Nếu phần thân của if ... else chỉ có một câu lệnh, chúng ta có thể bỏ qua {} trong chương trình của mình.

Ví dụ, bạn có thể viết code ngắn lại như sau:

if (number >= 0) {
    if (number == 0) console.log("Bạn vừa nhập số 0");
    else console.log("Bạn vừa nhập số dương");
} else {
  console.log("Đây là số âm");
  console.log("Bạn vừa nhập số " + number);
}

Như vậy qua phần này mình đã giới thiệu với mọi người về câu lệnh if...else, các dạng và cách sử dụng của nó rồi.

Hy vọng bài viết giúp ích cho các bạn. Hẹn gặp các bạn trong các bài viết tiếp theo 😁😁