Biến trong JavaScript

Biến dùng để lưu trữ giá trị các dữ liệu, hay các đối tượng. Giá trị của biến có thể được thay đổi, cập nhật trong quá trình ứng dụng hoạt động. Mục này trình bày các vấn đề về biến như tên biến, khai báo và khởi tạo biến ...

Quy tắc đặt tên biến trong javascript

Tên biến do bạn đặt và khai báo, tên biến cần đảm bảo quy tắc sau:

Tên biến được tạo ra bởi các ký tự chữ, số, _ và $
Tên không được phép bắt đầu bằng số (chỉ bắt đầu bằng ký tự chữ hoặc $ hoặc _)
Không được chứa các ký hiệu đặc biệt như ký hiệu toán học, logic (như +, -, *, >, < ...)
Không được chứa khoảng trắng
Không được đặt tên biến trùng với các từ khóa dành riêng cho ngôn ngữ Javascript liệt kê ở dưới

Các từ khóa trong ngôn ngữ lập trình Javascript:

abstract    else    instanceof  super
boolean     enum    int         switch
break       export  interface   synchronized
byte        extends let         this
case        false   long        throw
catch       final   native      throws
char        finally new         transient
class       float   null        true
const       for     package     try
continue    function private    typeof
debugger    goto    protected   var
default     if      public      void
delete      implements return   volatile
do          import  short       while
double      in      static      with

JavaScript có phân biệt chữ hoa chữ thường nên biến tên x và X là khác nhau.

Khai báo và khởi tạo biến

Có ba từ khóa bạn sẽ tìm hiểu khi khai báo biến javascript là: var, let và const. Từ khóa var và let sau khi khai báo bạn có thể khởi tạo giá trị ngay (thực hiện ngay phép toán gán =) hoặc trước khi sử dụng thực hiện gán (=) giá trị. Từ khóa const thì biến đó bắt buộc phải khởi tạo giá trị ngay sau khai báo và không thay đổi được (hằng số). Ví dụ khai báo và khởi tạo giá trị cho biến trong Javascript:

var varName1 = 10;    // khai báo và khởi tạo biến với từ khóa var

let varName2;         // khai báo và không khởi tạo giá trị ban đầu
varName2 = 10;        // gán giá trị

const varName3 = 10;  // khai báo và khởi tạo biến với từ khóa const

Tính chất khai báo biến với var

Khai báo biến với var áp dụng được cho biến toàn cục và cục bộ. Khi khai báo ngoài thân hàm nó là biến toàn cục (có thể truy cập bởi bất kỳ hàm nào), khi khai báo trong hàm nó chỉ có hiệu lực trong hàm đó (chú ý là nó không khóa phạm vi trong một khối nào đó của hàm - khai báo trong khối này vẫn có hiệu lực ở khối khác). Nếu biến không khởi tạo giá trị ngay thì mặc định nó tự động nhật giá trị undefined

// Khai báo biến với var bên ngoài hàm -> phạm vi toàn cục
var sopi = 3.14;

function dientich_hinhtron(radius) {
    // truy cập biến toàn cục (sopi) khai báo với var
    console.log(sopi*radius*radius);

    if (true)
    {
        // Biến khai báo trong một khối { ... } không bị
        // khóa truy cập trong khối đó
        var thongbao = ' (diện tích hình tròn)';
    }

    // Truy cập biến khai báo trong một khối
    console.log(thongbao);
}

dientich_hinhtron(5);

Ví dụ lỗi khi truy cập biến cục bộ

function xinchao() {
    // Biến loichao khai báo trong thân hàm, nó là biến cục bộ
    var loichao = "Xin chao cac ban";
    console.log(loichao);
}

xinchao();

// Truy cập biến cục bộ ngoài thân hàm dẫn tới lỗi
console.log(loichao);

Khai báo bằng var thì biến đó có thể khai báo lại, nếu có khởi tạo giá trị thì biến có giá trị mới, nếu không thì biến vẫn giữ giá trị cũ.

var x = 10;
//...

//Khai báo lại
if (true)
{
    var x = 15;
}

Biến khai báo với var được xử lý ở phần đầu của hàm: Biến khai báo với var hoạt động theo cơ chế hoisting của JS. Biến tự động được kéo lên trên cùng trong phạm vi của nó và khởi tạo với giá trị undefined

Trong JavaScript có cơ chế Hoisting, theo đó khai báo các biến và hàm được đẩy lên đầu phạm vi của chúng trước khi code thực thi.

Ví dụ, bạn viết như sau:

console.log (UserName);
var UserName = "xuanthulab";

Thì tương đương với:

var UserName;                   // Khai báo và không khởi tạo biến

console.log (UserName);         // in ra: undefined
var UserName = "xuanthulab";

Do khai báo biến với var có thể khai báo lại, nên hãy chú ý kiểm soát một cách chặt chẽ quá trình khai báo lại, chắc chắn rằng bạn biết một biến đã từng được khai bao hay chưa để tránh bug phát sinh. Nếu có thể hãy cân nhắc sử dụng khai báo biến với let hoặc const

Tính chất khai báo biến với let

Trong JS nên dùng từ khóa let để khai báo biến, nó tránh được một số vấn đề khó kiểm soát như với var.

Biến khai bao với let có phạm vi (vùng hiệu lực) chỉ trong khối mà biến đó khai báo. Nếu khai báo mà không khởi tạo giá trị (không gán giá trị ngay bằng toán tử gán =) thì mặc định nó cũng tự động khởi tạo với giá trị undefined.

let isLogin = true;

if (isLogin)
{
    // Biến message chỉ có hiệu lực trong khối { ... } mà nó khai báo
    let message = 'Bạn đã đăng nhập';
    console.log(message);
}

// Lỗi: truy cập biến chưa khai báo
console.log(message);

Trong ví dụ trên, nếu bạn dùng var thì không có thông báo lỗi, do biến hiệu lực ngay cả bên ngoài khối khai báo biến.

Biến khai báo với let không được phép khai báo lại: trong phạm vi của nó chỉ có thể cập nhật giá trị (gán giá trị) chứ không được phép khai báo lại biến như var.

Biến khai báo với let khóa phạm vi truy cập trong khối khai báo: biến chỉ có hiệu lực (phạm vi) trong khối { ... } khai báo nó. Nếu khai báo biến trong một phạm vi khác (một block lệnh { ... }) mới thì vẫn có thể khai báo trùng tên, nhưng hai biến là khác nhau.

let message = 'Xin chào';
// ...
// cập nhật giá trị
message = 'Chào các bạn';

// Khai báo lại biến --> LỖI
let message = 'Chào bạn!';

let message = 'Xin chào';
// ...
// cập nhật giá trị
if (true)
{
    // Trong khối, có thể khai báo biến cùng tên message
    // Biến message trong khối là khác với message ngoài khối
    // Nếu không có khai báo message trong khối, thì truy cập là message ngoài khối
    let message;
    message = 'Chào các bạn';
}


console.log(message); // In ra: 'Xin chào'

Biến khai báo với let giống var cũng hoạt động theo cơ chế hoisting của JS. Biến tự động được kéo lên trên cùng trong phạm vi của nó. Tuy nhiên nó không tự động gán giá trị undefined như var, mà là biến chưa được khởi tạo, do vậy nếu cố tình truy cập trong trường hợp này thì sẽ dẫn tới lỗi Reference Error

console.log (UserName);  // Lỗi : Uncaught ReferenceError: Cannot access 'UserName' before initialization
let UserName = "xuanthulab";

(Code trên không có báo lỗi nếu là var).

Sự khác nhau giữa var và let:

var cho phép khai báo lại (nhiều lần), let thì biến chỉ được khai báo 1 lần (nếu cố tình khai báo lần tiếp theo sẽ bị lỗi).
let thì phạm vi hiệu lực trong khối {} nó khai báo, var thì hiệu lực toàn cục (xem Khối lệnh Javascript)
Các biến đều được JS kéo lên đầu khai báo khi thực thi, nhưng khi đẩy lên đầu biến khai báo với var được khởi tạo giá trị undefined còn biến khai báo với let thì không được khởi tạo khi kéo lên

Phạm vi của biến

Phạm vi (scope) của biến là vùng (nơi) mà biến có hiệu lực. Có hai phạm vi biến mà bạn tìm hiểu ở đây:

Cục bộ (Local) - biến chỉ có hiệu lực trong hàm (hoặc khối) nó khai báo (học về hàm sau) - ra khỏi hàm hết hiệu lực
Toàn cục (Global) - biến có hiệu lực toàn code, có thể truy cấp ở bất kỳ đâu. Biến này không khai báo trong một hàm, mà khai báo bên ngoài.

Toán tử gán trong JavaScript

Trong JavaScript, toán tử gán là ký hiệu = (dấu bằng). Bạn viết x = y là gán giá trị y cho biến x

Khi khai báo biến bạn có thể không cần thiết phải gán ngay giá trị cho nó, vì bạn sẽ gán sau này trong các vị trí code khác, ví dụ biến đó chờ dữ liệu người dùng nhập vào.

Khi biến khai báo mà không gán giá trị thì nó có giá trị là undefined

undefined là một giá trị (dữ liệu) trong Javascript. Giá trị này tự động gán cho một biến khi biến đó khai báo.

let x;
if (x === undefined) {
    console.log("Biến x chưa khởi tạo");
}

Toán tử === là so sánh về giá trị và kiểu (xem thêm Toán tử so sánh)

Sử dụng biến trong JavaScript và câu lệnh

Để có biến, bạn phải khai báo (từ khóa var và let), khởi tạo ngay hoặc gán (cập nhật) giá trị cho biến trước khi sử dụng trong các biểu thức.

Ngoài ra mỗi biến nó có kiểu dữ liệu phù hợp với giá trị nó đang lưu trữ (xem phần Kiểu dữ liệu trong JS)

Ví dụ sau gán giá trị vào biến, sau đó sử dụng nó trong một biểu thức, in giá trị trong biến ra trình duyệt

var x = 100;            // Khai báo và khởi tạo biến
document.write(x);      // In giá trị của biến ra trình duyệt

x = 120;                // Cập nhật giá trị mới cho biến

var y;
y = x * 5;              // Sử dụng biến trong một biểu thức
document.write(y);

Đến đây bạn thấy, các dòng lệnh JavaScript được viết và phân cách nhau bởi ký hiệu ; (dấu chấm phảy)

Hằng số trong Javascript

Hằng số được khai báo và phải khởi tạo ngay với từ khóa const nó có tính chất giống với khai báo bằng let ngoại trừ sau khi khai báo và gán thì giá trị không thay đổi được nữa (cố tình thay đổi sẽ lỗi).

const mgs = "Welcome";
mgs = "Hello!"; // Lỗi xảy ra, gán giá trị cho hằng số

const pi = 3.14;
const year = "Year of the Monkey";

Hằng số luôn phải gán giá trị ngay tại nơi nó khai báo

ĐĂNG KÝ KÊNH, XEM CÁC VIDEO TRÊN XUANTHULAB

Giới thiệu JavaScript (Bài trước)

(Bài tiếp) Kiểu dữ liệu