IF...ELSE trong JAVASCRIPT

Trong hướng dẫn này, bạn sẽ học cách sử dụng cấu trúc điều khiển IF...ELSE trong Javascript để đưa ra các quyết định khác nhau khi điều kiện đúng hoặc sai.

Câu lệnh có điều kiện trong Javascript

Giống như nhiều ngôn ngữ lập trình khác, JavaScript cũng cho phép bạn viết code thực hiện các hành động khác nhau dựa trên kết quả của một điều kiện kiểm tra logic hoặc so sánh trong run time.

Điều này có nghĩa là, bạn có thể tạo các điều kiện kiểm tra dưới dạng biểu thức đánh giá là ĐÚNG hoặc SAI và dựa trên các kết quả này, bạn có thể thực hiện một số hành động nhất định.

Có một số câu lệnh có điều kiện trong JavaScript mà bạn có thể sử dụng để đưa ra quyết định:

+ Câu lệnh if

+ Câu lệnh if...else

+ Câu lệnh if...else if...else

+ Câu lệnh switch...case

Chúng ta sẽ thảo luận chi tiết từng câu lệnh này trong các phần tới.

Câu lệnh IF...ELSE trong Javascript

1. Câu lệnh if...else trong JS

Câu lệnh if được sử dụng để thực thi một khối mã chỉ khi điều kiện được chỉ định đánh giá là true.

Đây là câu lệnh điều kiện đơn giản nhất của JavaScript và có thể được viết như sau:

Cú pháp câu lệnh if

if(điều kiện) {
    // Code thực thi cái gì đó
}

Ví dụ sau đây sẽ xuất ra thông báo "Chúc cuối tuần vui vẻ!" Nếu ngày hiện tại là thứ Sáu:

var now = new Date();
var dayOfWeek = now.getDay(); // Sunday - Saturday: 0 - 6

if(dayOfWeek == 5) {
    alert("Chúc cuối tuần vui vẻ!");
}

Khối mã bên trong câu lệnh if bên trên chỉ được thực thi khi biểu thức điều kiện trả về giá trị true.

Nhưng nếu sai (false) thì sao?

2. Câu lệnh if...else trong JS

Bạn có thể nâng cao khả năng ra quyết định của chương trình JavaScript của mình bằng cách cung cấp lựa chọn thay thế thông qua việc thêm một câu lệnh khác vào câu lệnh if.

Câu lệnh if...else trong Javascript cho phép bạn thực thi một khối mã nếu điều kiện được chỉ định được ước tính là true và một khối mã khác nếu nó được ước tính là false.

Cú pháp câu lệnh if...else

if(Điều kiện) {
    // Code thực thi khi điều kiện đúng
} else {
    // Code thực thi khi điều kiện sai
}

Ví dụ, đoạn code javascript dưới đây sẽ xuất ra thông báo "Chúc cuối tuần vui vẻ!" nếu như hôm nay là thứ 6. Ngược lại thì xuất ra thông báo "Chúc một ngày tốt lành!"

var now = new Date();
var dayOfWeek = now.getDay(); // Sunday - Saturday: 0 - 6

if(dayOfWeek == 5) {
    alert("Chúc cuối tuần vui vẻ!");
} else {
    alert("Chúc một ngày tốt lành!");
}

3. Câu lệnh if...else if... else

Câu lệnh if...else if...else là câu lệnh đặc biệt để kết hợp nhiều câu lệnh if...else.

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

if(Điều kiện 1) {
    // Code thực thi khi điều kiện 1 đúng
} else if(Điều kiện 2) {
    // Code thực thi khi điều kiện 1 sai và điều kiện 2 đúng
} else {
    // Code thực thi nếu cả 2 điều kiện 1 và 2 điều sai
}

Ví dụ sau đây sẽ xuất ra thông báo:

+ 'Chúc cuối tuần vui vẻ!' nếu ngày hiện tại là thứ Sáu

+ 'Chúc chủ nhật vui vẻ!' nếu ngày hiện tại là Chủ nhật

+ Nếu không nó sẽ xuất ra 'Chúc một ngày tốt lành!'

var now = new Date();
var dayOfWeek = now.getDay(); // Sunday - Saturday : 0 - 6

if(dayOfWeek == 5) {
    alert("Chúc cuối tuần vui vẻ!");
} else if(dayOfWeek == 0) {
    alert("Chúc chủ nhật vui vẻ!");
} else {
    alert("Chúc một ngày tốt lành!");
}

Khi có nhiều điều kiện cần kiểm tra chúng ta cũng có thể sử dụng câu lệnh switch...case (Chúng ta sẽ tìm hiểu riêng trong bài học tiếp theo)

Sử dụng toán tử Ternary thay thế câu lệnh if...else

Toán tử ternary cung cấp một cách viết tắt cho các câu lệnh if...else.

Toán tử ternary được biểu thị bằng ký hiệu dấu hỏi (?) Và phải mất ba toán hạng:

+ Một điều kiện để kiểm tra

+ Kết quả khi điều kiện đúng đúng

+ Kết quả khi điều kiện sai.

Cú pháp cơ bản sử dụng toán tử Ternary:

var result = (condition) ? value1 : value2

Nếu điều kiện ước tính là true thì value1 sẽ được trả về còn không thì value2 sẽ được trả về.

Để hiểu cách sử dụng toán tử Ternary chúng ta cùng xem ví dụ sau:

Đây là ví dụ khi sử dụng câu lệnh if...else thông thường.

var userType;
var age = 21;
if(age < 18) {
    userType = 'Trẻ em';
} else {
    userType = 'Người lớn';
}
alert(userType); // Người lớn

Còn đây là ví dụ khi sử dụng toán tử Ternary.

var age = 21;
var userType = age < 18 ? 'Trẻ em' : 'Người lớn';
alert(userType); // Người lớn

Như bạn có thể thấy trong ví dụ trên, vì điều kiện đã chỉ định được đánh giá là sai (vì age = 21)

Vậy nên, giá trị ở phía bên phải của dấu hai chấm (:) được trả về, đó là chuỗi 'Người lớn'.

Lưu ý: Code được viết bằng toán tử ternary đôi khi có thể khó đọc. Tuy nhiên, là một cách viết gọn gàng thay thế cho câu lệnh if else.

Lời kết

Như vậy là qua bài này bạn đã được tìm hiểu về một số cấu trúc điều khiển như if, if...else, if...else if...else và toán tử ternary trong Javascript.

Hãy thử thực hiện lại các ví dụ để thành thạo và ghi nhớ lâu hơn.