Cách sử dụng giá trị Boolean trong JavaScript

Javascript căn bản | by Học Javascript

Trong JavaScript, Boolean là một kiểu dữ liệu quan trọng, chỉ có hai giá trị: true (đúng) và false (sai). Đây là nền tảng của các câu lệnh điều kiện, giúp kiểm soát luồng thực thi của chương trình. Nhờ Boolean, ta có thể kiểm tra điều kiện, xử lý logic và xây dựng các chức năng quan trọng như xác thực người dùng, hiển thị hoặc ẩn nội dung, và kiểm tra dữ liệu hợp lệ. Trong bài viết này, chúng ta sẽ tìm hiểu cách khai báo, sử dụng, cũng như ứng dụng thực tế của Boolean trong JavaScript.

Trong JavaScript, Boolean là một kiểu dữ liệu quan trọng, chỉ có hai giá trị: true (đúng) và false (sai). Kiểu dữ liệu này đóng vai trò then chốt trong lập trình, đặc biệt là trong các câu lệnh điều kiện và vòng lặp.

Tại sao cần sử dụng Boolean?

Boolean giúp kiểm soát luồng thực thi của chương trình và có nhiều ứng dụng quan trọng, chẳng hạn như:

Sử dụng trong câu lệnh điều kiện (if, else)

  • Quyết định xem một đoạn mã có được thực thi hay không.
  • Ví dụ: Kiểm tra xem người dùng đã đăng nhập chưa để hiển thị nội dung phù hợp.

Kiểm tra và kiểm soát luồng thực thi của chương trình

  • Boolean giúp kiểm tra điều kiện lặp (while, for).
  • Hỗ trợ kiểm tra trạng thái của ứng dụng (ví dụ: bật/tắt, đăng nhập/đăng xuất).

Xử lý logic trong các ứng dụng web

  • Kiểm tra tính hợp lệ của dữ liệu đầu vào (ví dụ: email hợp lệ hay không).
  • Kiểm tra quyền truy cập của người dùng trong hệ thống.
  • Hiển thị hoặc ẩn nội dung động dựa trên điều kiện.

Với tầm quan trọng như vậy, Boolean là một phần không thể thiếu trong JavaScript. Trong các phần tiếp theo, chúng ta sẽ tìm hiểu chi tiết về cách khai báo, sử dụng và ứng dụng Boolean một cách hiệu quả.

Khai báo và sử dụng giá trị Boolean trong JavaScript

Khai báo trực tiếp Boolean

Trong JavaScript, có thể khai báo giá trị Boolean trực tiếp bằng true hoặc false.

Ví dụ:
let isLoggedIn = true;  // Biến thể hiện trạng thái đã đăng nhập
let hasPermission = false; // Biến thể hiện trạng thái không có quyền truy cập

Biến isLoggedIn có giá trị true, nghĩa là người dùng đã đăng nhập.
Biến hasPermission có giá trị false, nghĩa là người dùng không có quyền truy cập.

Sử dụng Boolean với toán tử so sánh

Các toán tử so sánh trong JavaScript luôn trả về giá trị Boolean (true hoặc false).

Danh sách các toán tử so sánh phổ biến:

Toán tử Ý nghĩa
== So sánh bằng (không xét kiểu dữ liệu)
=== So sánh bằng (có xét kiểu dữ liệu)
!= So sánh khác (không xét kiểu dữ liệu)
!== So sánh khác (có xét kiểu dữ liệu)
> Lớn hơn
< Nhỏ hơn
>= Lớn hơn hoặc bằng
<= Nhỏ hơn hoặc bằng

Ví dụ:

let result = (5 > 3); // true, vì 5 lớn hơn 3
let check = (10 === "10"); // false, vì kiểu dữ liệu khác nhau (số và chuỗi)
console.log(result); // Kết quả: true
console.log(check); // Kết quả: false

5 > 3 đúng, nên result nhận giá trị true.
10 === "10" sai, vì một bên là số (number), một bên là chuỗi (string).

Chuyển đổi giá trị sang Boolean bằng Boolean()

JavaScript có thể ép kiểu bất kỳ giá trị nào sang kiểu Boolean bằng hàm Boolean().

Quy tắc chuyển đổi:

Các giá trị được chuyển thành false (falsy values):

Giá trị Kết quả Boolean
0 false
-0 false
"" (chuỗi rỗng) false
null false
undefined false
NaN (Not-a-Number) false

Các giá trị còn lại đều chuyển thành true (truthy values):

Giá trị Kết quả Boolean
1, -1, 100 (số khác 0) true
"Hello", " " (chuỗi không rỗng) true
[] (mảng rỗng) true
{} (đối tượng rỗng) true
function() {} (hàm) true

Ví dụ minh họa:

console.log(Boolean(0));       // false
console.log(Boolean(1));       // true
console.log(Boolean("Hello")); // true
console.log(Boolean(""));      // false
console.log(Boolean(null));    // false
console.log(Boolean([]));      // true (mảng rỗng vẫn là true)
console.log(Boolean({}));      // true (đối tượng rỗng vẫn là true)

0, "", null, undefined, NaN đều là false.
Chuỗi không rỗng, số khác 0, mảng, đối tượng đều là true.

Các giá trị Truthy và Falsy trong JavaScript

Trong JavaScript, khi một giá trị không phải kiểu boolean được sử dụng trong điều kiện (if, while, &&, ||...), JavaScript sẽ tự động chuyển đổi giá trị đó sang true (truthy) hoặc false (falsy).

Giá trị Truthy (được xem là true)

Truthy values là những giá trị khi chuyển đổi sang Boolean sẽ cho kết quả là true.

Danh sách các giá trị luôn là true trong JavaScript:

Giá trị Kết quả Boolean
Số khác 0 (1, -1, 100, -100, ...) true
Chuỗi không rỗng ("Hello", "0", "false", " ") true
Mảng ([], kể cả mảng rỗng) true
Đối tượng ({}, kể cả đối tượng rỗng) true
Hàm (function() {}) true
Infinity, -Infinity true

Ví dụ minh họa:

if (1) {
  console.log("1 là truthy!"); // In ra màn hình
}

if ("Hello") {
  console.log('"Hello" là truthy!'); // In ra màn hình
}

if ({}) {
  console.log("Đối tượng rỗng {} là truthy!"); // In ra màn hình
}

if ([]) {
  console.log("Mảng rỗng [] là truthy!"); // In ra màn hình
}

Lưu ý: Một chuỗi chứa bất kỳ ký tự nào (kể cả dấu cách " ") cũng là truthy.

if (" ") {
  console.log('Chuỗi chỉ có dấu cách " " vẫn là truthy!');
}

" " không phải là chuỗi rỗng (""), nên nó vẫn được xem là true.

Giá trị Falsy (được xem là false)

Falsy values là những giá trị khi chuyển đổi sang Boolean sẽ cho kết quả là false.

Danh sách các giá trị luôn là false trong JavaScript:

Giá trị Kết quả Boolean
0, -0 false
"" (chuỗi rỗng) false
null false
undefined false
NaN (Not-a-Number) false
false false

Ví dụ minh họa:

if (0) {
  console.log("0 là truthy!");
} else {
  console.log("0 là falsy!"); // In ra màn hình
}

if ("") {
  console.log('"" là truthy!');
} else {
  console.log('"" là falsy!'); // In ra màn hình
}

if (null) {
  console.log("null là truthy!");
} else {
  console.log("null là falsy!"); // In ra màn hình
}

if (undefined) {
  console.log("undefined là truthy!");
} else {
  console.log("undefined là falsy!"); // In ra màn hình
}

if (NaN) {
  console.log("NaN là truthy!");
} else {
  console.log("NaN là falsy!"); // In ra màn hình
}

Lưu ý:

  • 0-0 đều là false.
  • "" (chuỗi rỗng) là false, nhưng " " (chuỗi chứa khoảng trắng) là true.
  • nullundefined luôn là false.
  • NaN (lỗi số học) cũng là false.

Chuyển đổi giữa Truthy và Falsy bằng Boolean()

Hàm Boolean() giúp kiểm tra xem một giá trị thuộc nhóm truthy hay falsy.

Ví dụ kiểm tra giá trị Truthy & Falsy:

console.log(Boolean(1));        // true
console.log(Boolean(0));        // false
console.log(Boolean("Hello"));  // true
console.log(Boolean(""));       // false
console.log(Boolean([]));       // true
console.log(Boolean({}));       // true
console.log(Boolean(null));     // false
console.log(Boolean(undefined));// false
console.log(Boolean(NaN));      // false

Nếu muốn kiểm tra một giá trị có phải falsy hay không, có thể dùng phép phủ định (!):

let value = 0;
if (!value) {
  console.log("value là một giá trị falsy!"); // In ra màn hình
}

Ứng dụng thực tế của Truthy và Falsy

Kiểm tra giá trị trước khi sử dụng

let userName = "";
if (!userName) {
  console.log("Vui lòng nhập tên người dùng!"); // In ra vì userName là falsy
}

Nếu userName"" (chuỗi rỗng), điều kiện sẽ false, nên sẽ yêu cầu nhập lại.

Gán giá trị mặc định với || (Toán tử OR)

Toán tử OR (||) giúp gán giá trị mặc định nếu biến có giá trị falsy.

let name = "";
let displayName = name || "Người dùng ẩn danh";
console.log(displayName); // "Người dùng ẩn danh"

Nếu name là falsy (""), displayName nhận giá trị "Người dùng ẩn danh".

Kiểm tra nếu biến có giá trị hợp lệ với && (Toán tử AND)

let user = { name: "Alice", age: 25 };
console.log(user && user.name); // "Alice"

Nếu user không phải null hoặc undefined, chương trình sẽ lấy user.name.

Sử dụng Boolean trong câu lệnh điều kiện trong JavaScript

Biến Boolean (true hoặc false) đóng vai trò quan trọng trong điều khiển luồng chương trình bằng cách giúp kiểm tra điều kiện trong các câu lệnh như if...elseswitch.

Câu lệnh if...else

Câu lệnh if...else giúp kiểm tra một điều kiện Boolean và thực hiện khối mã tương ứng.

Cú pháp chung:

if (điều_kiện) {
    // Thực hiện nếu điều_kiện là true
} else {
    // Thực hiện nếu điều_kiện là false
}
Ví dụ 1: Kiểm tra độ tuổi hợp lệ
let age = 18;

if (age >= 18) {
    console.log("Bạn đủ tuổi để đăng ký."); // In ra màn hình
} else {
    console.log("Bạn chưa đủ tuổi.");
}

Ở đây, age >= 18 sẽ trả về true, nên câu lệnh trong if sẽ chạy.

Ví dụ 2: Kiểm tra tài khoản có hoạt động không

let isActive = false;

if (isActive) {
    console.log("Tài khoản đang hoạt động.");
} else {
    console.log("Tài khoản của bạn đã bị khóa.");
}

Ở đây, isActive có giá trị false, nên khối else sẽ thực thi.

Ví dụ 3: Kiểm tra mật khẩu có đủ dài không

let password = "abc123";

if (password.length >= 8) {
    console.log("Mật khẩu hợp lệ.");
} else {
    console.log("Mật khẩu quá ngắn, vui lòng nhập ít nhất 8 ký tự.");
}

Ở đây, password.length có giá trị 6 (< 8), nên sẽ vào nhánh else.

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

Khi có nhiều điều kiện cần kiểm tra, có thể dùng if...else if...else.

Ví dụ: Xếp loại điểm số

let score = 85;

if (score >= 90) {
    console.log("Bạn đạt loại A");
} else if (score >= 80) {
    console.log("Bạn đạt loại B"); // In ra vì score = 85
} else if (score >= 70) {
    console.log("Bạn đạt loại C");
} else {
    console.log("Bạn đạt loại D");
}

Ở đây, score = 85, thỏa mãn điều kiện score >= 80, nên chương trình in "Bạn đạt loại B".

Câu lệnh switch

Ngoài if...else, có thể sử dụng switch để kiểm tra giá trị của một biến Boolean.

Cú pháp chung:

switch (biến) {
    case giá_trị_1:
        // Code nếu biến === giá_trị_1
        break;
    case giá_trị_2:
        // Code nếu biến === giá_trị_2
        break;
    default:
        // Code nếu không trùng giá trị nào
}

Ví dụ 1: Kiểm tra quyền thành viên

let isMember = true;

switch (isMember) {
    case true:
        console.log("Bạn là thành viên.");
        break;
    case false:
        console.log("Bạn chưa phải thành viên.");
        break;
}

Ở đây, isMember có giá trị true, nên chương trình in "Bạn là thành viên.".

Ví dụ 2: Kiểm tra trạng thái đăng nhập

let isLoggedIn = false;

switch (isLoggedIn) {
    case true:
        console.log("Chào mừng bạn trở lại!");
        break;
    case false:
        console.log("Vui lòng đăng nhập để tiếp tục.");
        break;
}

Ở đây, isLoggedIn = false, nên chương trình in "Vui lòng đăng nhập để tiếp tục.".

Kết hợp Boolean với Toán tử Logic (&&, ||, !)

Có thể sử dụng toán tử logic để rút gọn điều kiện trong if...else.

Ví dụ 1: Rút gọn kiểm tra đăng nhập

let isLoggedIn = true;
let hasPremium = false;

if (isLoggedIn && hasPremium) {
    console.log("Truy cập nội dung cao cấp.");
} else {
    console.log("Vui lòng nâng cấp tài khoản.");
}

Ở đây, isLoggedIn = true nhưng hasPremium = false, nên khối else chạy.

Ví dụ 2: Dùng toán tử || để gán giá trị mặc định

let userName = "";
let displayName = userName || "Khách";

console.log("Xin chào, " + displayName); // "Xin chào, Khách"

Ở đây, userName là chuỗi rỗng (""), nên displayName nhận giá trị "Khách".

Toán tử logic với Boolean trong JavaScript

Trong JavaScript, toán tử logic được sử dụng để kết hợp hoặc đảo ngược các giá trị Boolean. Có ba toán tử logic chính:

  1. && (AND) – Và
  2. || (OR) – Hoặc
  3. ! (NOT) – Phủ định

Chúng giúp kiểm tra nhiều điều kiện cùng lúc và điều khiển luồng thực thi của chương trình.

Toán tử && (AND)

  • Trả về true nếu cả hai điều kiện đều đúng.
  • Trả về false nếu ít nhất một điều kiện sai.
  • Khi dùng với nhiều điều kiện, JavaScript sẽ kiểm tra từ trái sang phải và dừng lại ngay khi gặp false.

Cú pháp:

biểu_thức1 && biểu_thức2

Ví dụ 1: Cả hai điều kiện đều đúng → Kết quả là true

console.log(true && true);   // true
console.log(5 > 3 && 10 > 5); // true
Ví dụ 2: Một điều kiện sai → Kết quả là false
console.log(true && false);   // false
console.log(5 > 3 && 10 < 5); // false
Ví dụ 3: Kiểm tra đăng nhập và quyền truy cập
let isLoggedIn = true;
let hasPermission = false;

if (isLoggedIn && hasPermission) {
    console.log("Bạn có thể truy cập trang quản trị.");
} else {
    console.log("Bạn không có quyền truy cập.");
}
// Output: "Bạn không có quyền truy cập."

Ở đây, mặc dù isLoggedIn = true, nhưng hasPermission = false, nên kết quả là false.

Toán tử || (OR)

  • Trả về true nếu ít nhất một điều kiện đúng.
  • Trả về false nếu tất cả các điều kiện sai.
  • JavaScript sẽ kiểm tra từ trái sang phải và dừng lại ngay khi gặp true.

Cú pháp:

biểu_thức1 || biểu_thức2

Ví dụ 1: Một trong hai điều kiện đúng → Kết quả là true

console.log(false || true);  // true
console.log(5 < 3 || 10 > 5); // true
Ví dụ 2: Cả hai điều kiện sai → Kết quả là false
console.log(false || false); // false
console.log(5 > 10 || 3 > 7); // false
Ví dụ 3: Kiểm tra quyền truy cập miễn phí hoặc có tài khoản Premium
let hasFreeAccess = false;
let isPremiumUser = true;

if (hasFreeAccess || isPremiumUser) {
    console.log("Bạn có thể xem nội dung.");
} else {
    console.log("Bạn cần đăng ký tài khoản.");
}
// Output: "Bạn có thể xem nội dung."

Ở đây, isPremiumUser = true, nên điều kiện tổng thể là true, dù hasFreeAccess = false.

Toán tử ! (NOT)

  • Đảo ngược giá trị Boolean.
  • !truefalse, !falsetrue.

Cú pháp:

!biểu_thức

Ví dụ 1: Đảo ngược giá trị Boolean

console.log(!true);  // false
console.log(!false); // true

Ví dụ 2: Kiểm tra trạng thái đăng nhập

let isLoggedIn = false;

if (!isLoggedIn) {
    console.log("Bạn cần đăng nhập trước.");
}
// Output: "Bạn cần đăng nhập trước."

Ở đây, !isLoggedIn sẽ thành true, nên thông báo yêu cầu đăng nhập sẽ hiển thị.

Ứng dụng thực tế của Boolean trong JavaScript

Kiểm tra đăng nhập

Ví dụ: Kiểm tra người dùng đã đăng nhập hay chưa

let isAuthenticated = true;

if (isAuthenticated) {
    console.log("Chào mừng bạn!");
} else {
    console.log("Vui lòng đăng nhập.");
}
// Output: "Chào mừng bạn!"

Ở đây, isAuthenticated = true, nên khối if chạy.

Hiển thị hoặc ẩn nội dung trên giao diện

Ví dụ: Sử dụng toán tử điều kiện ? : để hiển thị hoặc ẩn nội dung

let isVisible = false;

console.log(isVisible ? "Hiển thị nội dung" : "Ẩn nội dung");
// Output: "Ẩn nội dung"

Ở đây, isVisible = false, nên nội dung sẽ bị ẩn.

Kiểm tra dữ liệu hợp lệ trước khi xử lý

Ví dụ: Kiểm tra email có hợp lệ hay không

let email = "[email protected]";

if (email && email.includes("@")) {
    console.log("Email hợp lệ");
} else {
    console.log("Email không hợp lệ");
}
// Output: "Email hợp lệ"

Ở đây, email.includes("@") trả về true, nên email được coi là hợp lệ.

Kiểm tra số lượng sản phẩm còn trong kho

Ví dụ: Kiểm tra xem có hàng trong kho không

let stock = 0;

if (!stock) {
    console.log("Hết hàng");
} else {
    console.log("Còn hàng");
}
// Output: "Hết hàng"

Ở đây, stock = 0, mà Boolean(0) === false, nên !stock thành true, dẫn đến "Hết hàng".

Kết bài

Trong JavaScript, kiểu dữ liệu Boolean đóng vai trò quan trọng trong việc kiểm soát luồng thực thi của chương trình. Thông qua các toán tử logic như &&, ||, !, chúng ta có thể xây dựng các điều kiện linh hoạt và hiệu quả.Boolean không chỉ được sử dụng trong các câu lệnh điều kiện như if...else, switch, mà còn giúp kiểm tra trạng thái của ứng dụng, xử lý logic trong giao diện người dùng, và đảm bảo tính hợp lệ của dữ liệu.

Việc hiểu rõ cách sử dụng Boolean sẽ giúp lập trình viên viết mã gọn gàng, hiệu quả, và dễ bảo trì hơn. Vì vậy, khi làm việc với JavaScript, hãy tận dụng sức mạnh của Boolean để tối ưu hóa chương trình của bạn!

Bài viết liên quan

  • 2