[Javascript Typescript] Bài 2 - Biến - Dữ liệu cơ bản - Thao tác dữ liệu - Các phép toán

📦 Phần 1: Biến trong JavaScript

Biến là nơi lưu dữ liệu để bạn dùng lại trong suốt quá trình chạy code. Khi làm automation, bạn sẽ liên tục lưu text lấy từ UI, số lượng sản phẩm, trạng thái hiển thị, dữ liệu tài khoản hoặc kết quả tính toán vào biến để xử lý ở bước tiếp theo.

Hiểu biến tốt sẽ giúp bạn đọc code dễ hơn, debug nhanh hơn và tránh được khá nhiều lỗi logic tưởng nhỏ nhưng rất mất thời gian tìm.

🔹 1. Biến dùng để làm gì?

Hãy xem biến như một chiếc hộp có nhãn. Tên biến là cái nhãn để bạn tìm đúng dữ liệu mình cần, còn giá trị của biến là thứ đang được cất bên trong chiếc hộp đó.

Trong JavaScript, bạn có thể khai báo trước rồi gán sau, hoặc khai báo và gán ngay trong một dòng. Trong thực tế, cách viết gọn và phổ biến nhất là gán luôn giá trị ban đầu khi tạo biến.

Ví dụ, bạn có thể viết let total; rồi mới gán total = 5; ở dòng sau. Cách này vẫn đúng, nhưng khi đã biết sẵn giá trị ban đầu thì viết gộp một dòng sẽ gọn hơn và dễ đọc hơn.

Sau khi đã tạo biến, bạn chỉ cần gọi đúng tên của nó là có thể lấy lại giá trị để in ra màn hình, đem đi tính toán hoặc dùng tiếp trong điều kiện. Toàn bộ chuyện “khai báo, gán giá trị, rồi truy xuất lại” chính là vòng đời cơ bản của một biến.

🔹 2. Dùng let hay const?

Đây là hai từ khóa chính để khai báo biến trong JavaScript hiện đại.

• let: dùng khi giá trị của biến có thể thay đổi sau đó.
• const: dùng khi giá trị không nên bị gán lại.
• Quy tắc an toàn: cứ dùng const trước, chỉ đổi sang let khi thật sự cần thay đổi giá trị.
• Lưu ý: với const, bạn phải gán giá trị ngay lúc khai báo.

Trong automation, các giá trị cố định như tên test case, selector mẫu, URL môi trường hoặc dữ liệu mong đợi thường hợp với const. Ngược lại, các biến đếm như số lần retry, số lượng sản phẩm sau khi cộng dồn hoặc trạng thái thay đổi theo từng bước thì hợp với let hơn.

Nếu chưa chắc biến đó có cần đổi sau này hay không, cứ bắt đầu bằng const. Cách này giúp bạn tránh việc vô tình gán lại giá trị ở một chỗ nào đó mà không để ý.

💻 Ví dụ nhanh:

const testCaseName = "Login"; // Giá trị cố định => dùng const
let retryCount = 0;           // Giá trị thay đổi => dùng let

retryCount += 1; // Tăng số lần retry lên 1
console.log(`Test ${testCaseName} - retry ${retryCount}`); // In ra để debug

Trong ví dụ trên, testCaseName dùng const vì tên test không đổi, còn retryCount dùng let vì giá trị của nó tăng dần theo số lần thử lại.

💻 Cú pháp khai báo thường gặp:

let total; // Khai báo trước, chưa gán giá trị
total = 5; // Gán giá trị sau

let score = 8;                    // Khai báo và gán ngay
const siteName = "Anh Tester";    // Hằng số dạng chuỗi
const isProduction = false;       // Hằng số dạng boolean

🔹 3. In biến ra màn hình và đặt tên cho dễ đọc

Khi debug, bạn sẽ dùng console.log() liên tục để xem giá trị hiện tại của biến. Có nhiều cách ghép chữ với biến, nhưng cách hiện đại và dễ đọc nhất vẫn là template literal với dấu backtick `.

Ngoài ra, tên biến cũng rất quan trọng. Một tên biến tốt sẽ giúp bạn hiểu code ngay cả khi quay lại đọc sau vài tuần hoặc vài tháng.

• In dữ liệu bằng dấu +: làm được nhưng khá rườm rà khi chuỗi dài.
• Dùng dấu phẩy trong console.log(): tiện khi cần debug nhanh nhiều giá trị.
• Template literal: cách nên ưu tiên vì dễ đọc và dễ kiểm soát format.
• Nên dùng camelCase: ví dụ userName, totalPrice, isLoginSuccess.
• Không bắt đầu bằng số và không có khoảng trắng.
• Không dùng từ khóa của JavaScript như let, const, if, for.
• Ưu tiên tên có nghĩa thay vì các tên mơ hồ như x, y, data1.

Ví dụ, productPrice luôn dễ hiểu hơn x, và isSubmitButtonVisible cũng rõ nghĩa hơn rất nhiều so với flag.

Nếu cần in ra dữ liệu để debug, bạn vẫn có thể dùng dấu + hoặc dấu phẩy trong console.log(), nhưng khi câu trở nên dài thì template literal vẫn là cách gọn và ít lỗi nhất.

Một quy tắc rất thực tế là: code bạn viết ra không chỉ để máy chạy, mà còn để chính bạn hoặc đồng đội đọc lại. Vì vậy, tên biến rõ ràng và format log dễ hiểu luôn đáng giá hơn việc viết ngắn vài ký tự.

💻 So sánh nhanh 3 cách:

const userName = "An";
const status = "Passed";

console.log("User: " + userName + " - Status: " + status); // Nối chuỗi bằng dấu +
console.log("User:", userName, "- Status:", status); // Truyền nhiều giá trị vào console.log
console.log(`User: ${userName} - Status: ${status}`); // Template literal, dễ đọc nhất

💻 Cú pháp đặt tên biến nên quen mắt:

const userName = "An";
const totalPrice = 1200; // Tên biến nói rõ đây là giá tiền tổng
const isSubmitButtonVisible = true; // Biến boolean nên đặt tên dạng câu hỏi

// Không nên vì quá mơ hồ
const x = 1200;
const data1 = "An";

🧩 Phần 2: Kiểu dữ liệu cốt lõi

Sau khi có biến, câu hỏi tiếp theo là: bên trong biến đang chứa loại dữ liệu gì? Điều này rất quan trọng vì JavaScript sẽ xử lý chuỗi, số và giá trị đúng sai theo những cách khác nhau.

🔹 1. Những kiểu dữ liệu bạn gặp nhiều nhất

Trong các bài học đầu tiên, bạn chỉ cần nhớ nhóm dữ liệu xuất hiện thường xuyên nhất sau đây.

• string: dùng cho văn bản, ví dụ tên đăng nhập, thông báo lỗi, tiêu đề trang.
• number: dùng cho số lượng, giá tiền, thời gian chờ, điểm số.
• boolean: chỉ có true hoặc false, rất hay dùng trong điều kiện.
• undefined: biến đã khai báo nhưng chưa có giá trị.
• null: bạn chủ động gán để nói rằng hiện tại không có dữ liệu.
• object và array: dùng khi dữ liệu có cấu trúc phức tạp hơn.

Điểm dễ nhầm nhất là undefined và null. Một cái là “chưa được gán”, một cái là “cố ý không có giá trị”. Khi debug, phân biệt được hai trường hợp này sẽ đỡ mất rất nhiều thời gian.

Trong thực tế, bạn sẽ thấy string xuất hiện rất nhiều khi đọc text từ web, number khi xử lý giá tiền hoặc số lượng, còn boolean khi kiểm tra một phần tử có hiển thị hay không. Riêng object và array sẽ xuất hiện nhiều hơn khi bạn làm việc với dữ liệu API hoặc cấu hình test.

Chỉ cần nhớ một ý rất quan trọng: cùng là ký tự 5, nhưng "5" là chuỗi còn 5 là số. Nhìn bằng mắt có thể giống nhau, nhưng JavaScript sẽ xử lý chúng khác nhau hoàn toàn.

💻 Cú pháp tạo các kiểu dữ liệu cơ bản:

const fullName = "Nguyen Van A";   // string
const age = 30;                    // number
const isActive = true;             // boolean
let note;                          // undefined: khai báo nhưng chưa gán
const selectedUser = null;         // null: cố ý không có dữ liệu

const roles = ["admin", "editor"]; // array
const user = {                      // object
  name: "An",
  age: 30
};

🔹 2. Dùng typeof để nhận diện kiểu dữ liệu

Khi không chắc một giá trị đang là chuỗi hay số, hãy kiểm tra bằng typeof. Đây là thao tác rất nên dùng trước khi ép kiểu hoặc so sánh dữ liệu lấy từ UI.

💻 Ví dụ nhanh:

const email = "tester@example.com";
const total = 99;
const isVisible = false;
let note; // Chưa gán giá trị nên là undefined

console.log(typeof email);     // "string" => đây là chuỗi
console.log(typeof total);     // "number" => đây là số
console.log(typeof isVisible); // "boolean" => đây là true/false
console.log(typeof note);      // "undefined" => biến chưa có giá trị

typeof không thay thế hoàn toàn cho việc hiểu dữ liệu, nhưng nó là bước kiểm tra rất nhanh trước khi bạn parse số hoặc viết điều kiện so sánh.

Một chi tiết dễ gây bối rối là typeof null trong JavaScript lại trả về "object". Đây là đặc điểm cũ của ngôn ngữ, nên nếu gặp trường hợp này bạn cũng không cần quá hoang mang.

🧼 Phần 3: Xử lý dữ liệu từ web cho sạch trước khi dùng

Trong automation, dữ liệu lấy từ giao diện web gần như luôn là text. Một con số nhìn như số trên màn hình vẫn có thể đang là chuỗi, thậm chí còn dính khoảng trắng, dấu phẩy hoặc ký hiệu tiền tệ.

Nếu không làm sạch và ép kiểu trước, bạn rất dễ gặp lỗi khi cộng, trừ hoặc so sánh.

🔹 1. Các thao tác chuỗi hay dùng

Đây là nhóm hàm xử lý chuỗi bạn sẽ dùng thường xuyên khi làm việc với text từ UI.

• trim(): bỏ khoảng trắng thừa ở đầu và cuối chuỗi.
• includes(): kiểm tra chuỗi có chứa một đoạn text nào đó hay không.
• replace() / replaceAll(): thay thế ký tự hoặc đoạn text không mong muốn.
• length: lấy độ dài chuỗi.
• toLowerCase() / toUpperCase(): chuẩn hóa chữ hoa, chữ thường trước khi so sánh.

Ví dụ thực tế là text giá tiền có thể đi kèm dấu phẩy và ký hiệu tiền tệ, còn thông báo từ UI thì đôi khi dính khoảng trắng ở đầu hoặc cuối. Nếu bỏ qua bước làm sạch này, kết quả so sánh có thể sai dù nhìn bằng mắt vẫn thấy “đúng”.

Nói cách khác, dữ liệu lấy từ web thường cần một bước “sơ chế” trước khi dùng. Đây là thói quen rất nên hình thành sớm nếu bạn muốn test ít lỗi vặt hơn.

💻 Cú pháp xử lý chuỗi hay dùng:

const rawText = "  Hello JavaScript  ";

console.log(rawText.trim()); // Xóa khoảng trắng ở đầu và cuối
console.log(rawText.includes("Java")); // Kiểm tra có chứa "Java" hay không
console.log(rawText.replace("JavaScript", "TypeScript")); // Thay chữ "JavaScript"
console.log(rawText.toLowerCase()); // Chuyển về chữ thường
console.log(rawText.toUpperCase()); // Chuyển về chữ hoa
console.log(rawText.length); // Đếm tổng số ký tự của chuỗi

🔹 2. Ép kiểu sang số trước khi tính toán

Khi dữ liệu đang là chuỗi nhưng bạn cần tính toán, hãy ép kiểu rõ ràng bằng Number(), parseInt() hoặc parseFloat().

Một số hàm rất đáng nhớ:

• Number(): đổi chuỗi sang số khi chuỗi đã khá “sạch”.
• parseInt(): lấy phần số nguyên.
• parseFloat(): lấy số thập phân.
• Number.isNaN(): kiểm tra kết quả ép kiểu có bị lỗi hay không.
• toFixed(): format số thập phân về số chữ số mong muốn.

💻 Ví dụ nhanh:

const rawQtyText = " 5 ";
const rawPriceText = "1,200.50đ";

const qty = Number(rawQtyText.trim()); // Cắt khoảng trắng rồi đổi sang number
const price = parseFloat(rawPriceText.replaceAll(",", "").replace("đ", "").trim()); // Làm sạch giá tiền rồi đổi sang số

console.log(qty);                  // 5
console.log(price);                // 1200.5
console.log(price.toFixed(2));     // "1200.50" => hiển thị 2 số thập phân
console.log(Number.isNaN(price));  // false => ép kiểu thành công

Nếu đầu vào không hợp lệ, chẳng hạn giá trị là "abc", việc ép kiểu có thể cho ra NaN. Đây là lý do Number.isNaN() rất hữu ích khi bạn muốn chặn dữ liệu xấu trước khi assert hoặc tính toán tiếp.

💻 So sánh nhanh giữa Number() và parseInt():

console.log(Number("15"));      // 15 => chuỗi sạch nên đổi được thành số
console.log(parseInt("15px")); // 15 => lấy được phần số nguyên ở đầu chuỗi
console.log(Number("15px"));   // NaN => Number() thất bại vì chuỗi không sạch

Number() phù hợp khi bạn mong đợi chuỗi phải là một con số “sạch”. Còn parseInt() hoặc parseFloat() hữu ích hơn khi chuỗi vẫn còn dính thêm ký tự phía sau.

💻 Cú pháp ép kiểu và kiểm tra lỗi:

const qtyText = "10";
const priceText = "99.95";
const wrongValue = "abc";

const qty = Number(qtyText); // Đổi chuỗi "10" thành number 10
const price = parseFloat(priceText); // Đổi chuỗi thập phân thành number
const invalidNumber = Number(wrongValue); // Kết quả sẽ là NaN

console.log(qty);                         // 10
console.log(price);                       // 99.95
console.log(Number.isNaN(invalidNumber)); // true => báo hiệu dữ liệu đầu vào không hợp lệ

Quy trình thực tế thường là: lấy text từ UI, làm sạch chuỗi, ép kiểu sang số, rồi mới bắt đầu so sánh hoặc tính toán. Làm theo đúng thứ tự này sẽ giúp code ổn định hơn rất nhiều.

⚙️ Phần 4: Các phép toán và toán tử quan trọng

Sau khi đã có dữ liệu đúng kiểu, bạn sẽ dùng toán tử để tính toán, cập nhật giá trị và viết điều kiện kiểm tra. Đây là phần xuất hiện liên tục trong mọi bài automation.

🔹 1. Toán tử số học và toán tử gán

• Số học: +, -, *, /, %, **.
• Gán: =, +=, -=, *=, /=.
• Tăng giảm nhanh: ++ và --.
• So sánh quan hệ: >, <, >=, <=.
• Lưu ý quan trọng: dấu + có thể cộng số hoặc nối chuỗi, nên đừng dùng khi chưa chắc kiểu dữ liệu.

Khi x++ hoặc ++x đứng riêng trên một dòng, cả hai đều làm tăng giá trị thêm 1. Sự khác biệt chỉ rõ rệt khi bạn dùng chúng ngay trong một biểu thức hoặc trong lệnh console.log().

Trong phần lớn code automation cơ bản, bạn không cần lạm dụng sự khác nhau giữa hậu tố và tiền tố. Dùng chúng trên một dòng riêng sẽ rõ ràng và an toàn hơn nhiều.

💻 Ví dụ nhanh:

let retryCount = 0;
retryCount++; // Tăng biến lên 1 đơn vị

let a = 5;
console.log(a++); // In giá trị cũ trước, rồi mới tăng lên
console.log(a);   // 6 => giá trị sau khi đã tăng

console.log("10" + 5); // "105" => dấu + nối chuỗi
console.log("10" - 5); // 5 => dấu - ép về số để tính

Hai dòng cuối là ví dụ rất điển hình cho việc JavaScript tự xử lý khác nhau tùy theo kiểu dữ liệu. Với dấu +, chuỗi dễ bị nối lại thành text; còn với dấu -, JavaScript sẽ cố ép về số để tính toán.

Ngoài ra, các toán tử như >, <, >=, <= cũng rất hay gặp khi bạn cần kiểm tra số lượng, giá trị tối thiểu hoặc thời gian chờ còn hợp lệ hay không.

💻 Cú pháp toán tử cơ bản:

let total = 10;

total += 5;   // Cộng thêm 5 => 15
total -= 2;   // Trừ đi 2 => 13
total *= 2;   // Nhân đôi => 26
total /= 2;   // Chia đôi => 13

console.log(10 % 3);  // 1 => phép chia lấy dư
console.log(2 ** 3);  // 8 => phép lũy thừa
console.log(total);   // 13 => giá trị cuối cùng

🔹 2. So sánh đúng cách: == và ===

Đây là điểm cực kỳ quan trọng trong JavaScript. Toán tử == có thể tự ép kiểu trước khi so sánh, còn === thì so sánh cả giá trị lẫn kiểu dữ liệu.

Vì vậy, trong automation test, bạn gần như luôn nên ưu tiên === và !== để tránh lỗi ngầm.

Nói ngắn gọn: nếu dữ liệu từ web trả về là chuỗi "5" nhưng bạn mong đợi số 5, hãy ép kiểu trước rồi dùng ===. Đừng dựa vào việc JavaScript tự đoán giúp bạn.

💻 Ví dụ nhanh:

const expectedCount = 5;
const actualCountText = "5";

console.log(expectedCount == actualCountText);   // true => JavaScript tự ép "5" thành 5
console.log(expectedCount === actualCountText);  // false => khác kiểu dữ liệu
console.log(0 == false);                         // true => tiếp tục bị ép kiểu ngầm
console.log(0 === false);                        // false => số và boolean khác nhau

Đó là lý do trong test automation, cách làm an toàn nhất luôn là: làm sạch dữ liệu, ép kiểu về đúng dạng cần dùng, rồi so sánh bằng ===.

💻 Cú pháp so sánh thường dùng:

console.log(10 > 5);    // true => 10 lớn hơn 5
console.log(10 < 5);    // false => 10 không nhỏ hơn 5
console.log(10 >= 10);  // true => 10 lớn hơn hoặc bằng 10
console.log(8 <= 7);    // false => 8 không nhỏ hơn hoặc bằng 7
console.log(5 !== "5"); // true => khác kiểu nên không bằng nhau

🔹 3. Toán tử logic và dấu ngoặc

Khi viết điều kiện, bạn sẽ dùng ba toán tử logic quen thuộc sau:

• &&: đúng khi tất cả điều kiện đều đúng.
• ||: đúng khi chỉ cần một điều kiện đúng.
• !: phủ định một giá trị boolean.

Ngoài ra, hãy nhớ rằng JavaScript có thứ tự ưu tiên toán tử. Nếu biểu thức bắt đầu dài hoặc có cả so sánh lẫn logic, hãy thêm dấu ngoặc () để code rõ nghĩa hơn và tránh hiểu sai.

Điều này rất hữu ích trong automation, vì nhiều bước chỉ nên chạy khi phần tử vừa hiển thị, vừa có thể tương tác, hoặc khi một thông báo lỗi không còn xuất hiện nữa.

Một điểm nhỏ nhưng rất đáng nhớ là && sẽ được ưu tiên trước ||. Nếu bạn viết điều kiện dài mà không có ngoặc, người đọc rất dễ hiểu nhầm ý của bạn, kể cả khi máy vẫn chạy đúng.

💻 Ví dụ nhanh:

const isVisible = true;
const isEnabled = true;
const hasAdminRole = false;
const spinnerVisible = false;

const canClick = (isVisible && isEnabled) || hasAdminRole; // Được click nếu vừa hiển thị vừa enable, hoặc có quyền admin
const canContinue = !spinnerVisible; // Đi tiếp khi spinner đã biến mất

console.log(canClick);    // true
console.log(canContinue); // true

💻 Cú pháp kết hợp điều kiện:

const hasEmail = true;
const hasPassword = true;
const isLocked = false;

const canLogin = hasEmail && hasPassword && !isLocked; // Đăng nhập được khi đủ email, đủ mật khẩu và tài khoản không bị khóa
const showWarning = !hasEmail || !hasPassword; // Cảnh báo nếu thiếu email hoặc mật khẩu

console.log(canLogin);    // true
console.log(showWarning); // false

💻 So sánh có và không có dấu ngoặc:

console.log(true || false && false);   // true => && được tính trước || 
console.log((true || false) && false); // false => ngoặc đổi thứ tự tính toán

💡 Mẹo nhớ nhanh: Dữ liệu từ web thường là string, còn điều kiện test thì thường dựa vào boolean. Vì vậy, hãy ép kiểu trước khi so sánh và thêm dấu ngoặc khi biểu thức bắt đầu phức tạp.

📝 Phần 5: Ghi nhớ nhanh cho Tester

• Ưu tiên dùng const, chỉ chuyển sang let khi cần đổi giá trị.
• Tên biến nên ngắn gọn, có nghĩa và theo kiểu camelCase.
• Dữ liệu từ UI thường là chuỗi, nên hãy trim() hoặc replace() trước khi xử lý.
• Khi cần tính toán, ép kiểu rõ ràng bằng Number(), parseInt() hoặc parseFloat().
• Nếu sợ ép kiểu lỗi, kiểm tra thêm bằng Number.isNaN().
• Ưu tiên === và !== thay cho == và !=.
• Khi điều kiện dài, dùng dấu ngoặc () để code dễ đọc và ít lỗi hơn.

✅ Kết luận: Bài này là nền cho gần như toàn bộ phần JavaScript phía sau. Chỉ cần nắm chắc biến, kiểu dữ liệu, cách làm sạch dữ liệu và các toán tử cơ bản, bạn đã đủ nền để đọc dữ liệu UI, viết điều kiện kiểm tra chính xác và đi tiếp sang các bài thực hành phức tạp hơn.