Hướng dẫn cách sử dụng lệnh if và if…else trong JavaScript. Bạn sẽ học được cách sử dụng chúng để xử lý các câu lệnh điều kiện cơ bản trong JavaScript sau bài học này.

Lệnh if trong JavaScript

Lệnh if trong JavaScript bao gồm từ khóa if, một biểu thức điều kiện và một khối gồm các câu lệnh được mô tả trong khối đó. Khối lệnh trong if được đặt giữa cặp dấu ngoặc nhọn {} để biểu thị bắt đầu và kết thúc của khối. Các lệnh mô tả trong khối chỉ được xử lý khi biểu thức điều kiện được chỉ định là true (đúng).

Chúng ta sử dụng lệnh if trong JavaScript với cú pháp sau đây:

Nếu biểu thức điều kiện true (đúng), các câu lệnh mô tả trong khối sẽ được thực thi theo thứ tự. Chúng ta cũng có thể viết nhiều câu lệnh liên tiếp trong khối như sau:

Nếu chỉ có 1 câu lệnh trong khối lệnh if, chúng ta cũng có thể lược bỏ cặp dấu {} và sử dụng if rút gọn trong JavaScript như sau:

Chúng ta cũng có thể viết gọn các lệnh trên một dòng trong trường hợp này như sau:

Sơ đồ khối câu lệnh điều kiện trong JavaScript như sau:

Lại nữa, khi viết lệnh if trong JavaScript, mặc dù không phải là bắt buộc nhưng chúng ta nên sử dụng các dấu thụt lề đầu dòng để cấu trúc câu lệnh rõ ràng và dễ đọc hơn. Tất cả các câu lệnh mô tả trong khối nên được viết với độ thụt lề giống nhau. Thông thường, chúng ta sẽ dùng 2 hoặc 4 khoảng trắng tạo ra bởi phím cách, hoặc là một dấu tab được tạo ra khi bạn nhấn phím Tab một lần, để quy định độ thụt lề của khối.

• Bạn có thể tìm hiểu chi tiết về cách thụt lề tại bài viết Thụt lề trong JavaScript

Trong biểu thức điều kiện, chúng ta sử dụng toán tử so sánh và toán tử logic để mô tả điều kiện. Nếu kết quả của các phép so sánh hoặc logic này true, các lệnh mô tả trong khối mới được thực hiện. Bạn có thể tìm hiểu chi tiết về các loại toán tử sử dụng trong biểu thức điều kiện của câu lệnh if JavaScript tại bài viết Toán tử so sánh trong JavaScript và toán tử logic trong JavaScript.

Sau đây, chúng ta sẽ thử viết một câu lệnh if trong JavaScript đơn giản để kiểm tra tuổi của một người đã đủ 18 hay chưa.

Trước hết, chúng ta so sánh giá trị gán trong biến old với số 18 để kiểm tra kết quả biểu thức điều kiện old < 18. Và nếu kết quả này là true, lệnh thay đổi giá trị result = "Em chưa 18" trong khối mới được thực hiện.

let  old = 17;
let  result = "Trên 18 tuổi";

if (old < 18){
    result = "Em chưa 18";
}

console.log(result);  
//> Em chưa 18

Ở ví dụ trên, do old =17 nên biểu thức old < 18 true, dẫn đến lệnh thay đổi giá trị được thực hiện.

Giả sử chúng ta chỉ định old = 20 trong ví dụ trên, do biểu thức điều kiện old <18 khi này không còn true (đúng) nữa, do đó lệnh thay đổi giá trị result = "Em chưa 18" mô tả trong khối sẽ không được thực hiện. Kết quả, giá trị ban đầu result= "Trên 18 tuổi" không bị thay đổi và được in ra như sau:

let old = 20;
let result = "Trên 18 tuổi";

if (old < 18){
    result = "Em chưa 18";
}

console.log(result); 
//> Trên 18 tuổi

Lại nữa, do trong ví dụ này chỉ có 1 lệnh duy nhất trong khối if nên chúng ta đã có thể bỏ qua cặp dấu {} như cách viết if rút gọn trong JavaScript sau:

if (old < 18) result = "Em chưa 18";

if else trong JavaScript

if else trong JavaScript được sử dụng để xử lý lệnh if khi biểu thức điều kiện được chỉ định là False (sai).
Ở phần trên chúng ta đã biết lệnh if trong JavaScript chỉ xử lý các lệnh mô tả trong khối if nếu biểu thức điều kiện là true (đúng). Trong trường hợp bạn muốn xử lý lệnh if trong JavaScript khi biểu thức điều kiện là False (sai), hãy sử dụng cấu trúc if else trong javascript như sau:

Nếu chỉ có 1 câu lệnh trong khối if else thì chúng ta cũng có thể lược bỏ cặp dấu {} và sử dụng if rút gọn trong JavaScript như sau:

Hoặc là viết gọn các câu lệnh trên một dòng như sau:

Chúng ta thêm các lệnh sẽ được xử lý nếu biểu thức điều kiện là False vào trong khối lệnh else, và các lệnh này sẽ chỉ được chạy nếu biểu thức điều kiện là False mà thôi.

Sơ đồ khối câu lệnh if else trong JavaScript như sau:

Một ví dụ cụ thể, giả sử bạn mười bảy tuổi và bạn muốn vào một bar chơi. Khi đó, hãy viết một mã lệnh kiểm tra điều kiện tuổi được vào bar như sau:

let old = 17;

if (old < 18){
    console.log("Em chưa 18, không được vào bar");
}else{
    console.log("Trên 18, đủ tuổi vào bar");
}

Kết quả:

Em chưa 18, không được vào bar

Ở trên, do bạn 17 tuổi (old = 17), nên biểu thức điều kiện old < 18 là true, dẫn đến các lệnh trong khối lệnh if sẽ được thực hiện, do đó kết quả Em chưa 18, không được vào bar được in ra màn hình.

Trong trường hợp chỉ định lại tuổi old = 20, khi này biểu thức điều kiện lại trở thành False, do đó các lệnh trong khối lệnh else sẽ được thực hiện, nên kết quả khác sẽ in ra màn hình như sau:

let old = 20;

if (old < 18){
    console.log("Em chưa 18, không được vào bar");
}else{
    console.log("Trên 18, đủ tuổi vào bar");
}
//>Trên 18, đủ tuổi vào bar

Lại nữa, các khối lệnh if và else ở trên do chỉ có một lệnh duy nhất trong nó, do đó chúng ta cũng có thể lược bỏ đi các cặp dấu {} như cách viết if rút gọn trong JavaScript sau:

if (old < 18)  console.log("Em chưa 18, không được vào bar");
else  console.log("Trên 18, đủ tuổi vào bar");

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn về cách sử dụng câu lệnh if và if…else trong JavaScript rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.

Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.

URL Link

https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/lenh-dieu-kien-trong-javascript/cau-lenh-if-trong-javascript/