Biến và những đặc điểm của biến trong JavaScript

Biến JavaScript

Giống như nhiều ngôn ngữ lập trình khác, JavaScript cũng có các biến. Các biến có thể xem như là các “thùng chứa có tên”. Bạn có thể đặt dữ liệu vào các thùng chứa này và sau đó tham khảo (refer) đến dữ liệu bằng tên của thùng chứa.

Nội dung chính:

Biến JavaScript
Quy tắc đặt tên biến JavaScript
Một số đặc điểm của biến JavaScript
Phạm vi của biến JavaScript
Danh sách từ khóa dùng trong JavaScript

1. Biến JavaScript

– Biến JavaScript là vùng chứa để lưu trữ giá trị dữ liệu. Và được khai báo bằng cách dùng từ khóa var.

– Ví dụ sau sẽ khai báo 3 biến x, y, z:

x lưu trữ giá trị 9
y lưu trữ giá trị 11
z lưu trữ giá trị 20

Ví dụ:

[code language=”javascript”]var x = 9;
var y = 11;

/* Hoặc cũng có thể:
khai báo và khởi tạo trên cùng một dòng
và ngăn cách các biến bằng dấu phẩy */
// var x = 9, y = 11;

var z = x + y;[/code] Try it »

2. Quy tắc đặt tên biến JavaScript

– Tất cả các biến JavaScript phải được xác định với tên duy nhất. Những tên duy nhất này được gọi là số nhận dạng (identifier).

– Identifier có thể là tên ngắn (như x, y) hoặc tên có thể gợi nhớ, nhiều mô tả hơn (age, sum, totalPerson).

– Các quy tắc chung để xây dựng tên cho các biến (unique identifiers) là:

Tên có thể chứa chữ cái, chữ số, dấu gạch dưới và ký hiệu đô la ($).
Tên phải bắt đầu bằng một chữ cái.
Tên cũng có thể bắt đầu bằng dấu $ hoặc _
Các tên có phân biệt chữ hoa chữ thường (y và Y là các biến khác nhau)
Không thể sử dụng các từ dành riêng (như từ khóa JavaScript) làm tên biến.

3. Một số đặc điểm của biến JavaScript

● Sau khi khai báo, biến sẽ có giá trị là undefined

– Trong JavaScript các biến thường được khai báo không có giá trị. Giá trị có thể là cái gì đó phải được tính toán hoặc sẽ được cung cấp sau, như là input của người dùng.

– Một biến được khai báo mà không có giá trị (tức là chưa được khởi tạo giá trị ban đầu) sẽ có giá trị là undefined.

Ví dụ:

[code language=”javascript”]// Khai báo biến
var url;
document.getElementById("demo1").innerHTML = url; // value = undefined

// Khởi tạo giá trị
url = "www.minhhn.com";
document.getElementById("demo2").innerHTML = url; // value = www.minhhn.com[/code] Try it »

● JavaScript cho phép khai báo lại biến đã khai báo trước đó

– Nếu bạn khai báo lại (re-declare) biến JavaScript, nó sẽ không mất giá trị của nó.

– Biến url sẽ vẫn có giá trị “www.minhhn.com” sau khi thực thi các câu lệnh sau:

Ví dụ:

[code language=”javascript”]var url = "www.minhhn.com";

// Khai báo lại biến url
var url;[/code] Try it »

● JavaScript cho phép sử dụng biến trước khi biến được khai báo

Ví dụ:

[code language=”javascript”]x = 100; // Gán giá trị 100 cho x

elem = document.getElementById("demo"); // Tìm element HTML có id = demo
elem.innerHTML = x; // Hiển thị giá trị của x vào element được tìm thấy

var x; // Khai báo biến x[/code] Try it »

– Đây là tính chất “Hoisting” của JavaScript chúng ta sẽ cùng tìm hiểu ở bài viết khác.
– Một thói quen lập trình tốt là nên khai báo biến trước khi nó được sử dụng.

● Biến JavaScript có thể nhận giá trị của nhiều kiểu dữ liệu khác nhau

– JavaScript có kiểu dữ liệu động.

– Điều này có nghĩa là cùng một biến có thể được sử dụng để lưu trữ các loại dữ liệu khác nhau:

Ví dụ:

[code language=”javascript”]var x; // Bây giờ x là undefined
x = 2017; // Bây giờ x là một Number
x = "Minh Hoàng"; // Bây giờ x là một String[/code] Try it »

● Thao tác tính toán với biến JavaScript

– Như với đại số (algebra), bạn có thể làm số học (arithmetic) với các biến JavaScript, sử dụng toán tử như = và +:

Ví dụ:

[code language=”javascript”]var x = 8 + 6 + 2017; // x = 2031[/code]

– Bạn cũng có thể nối chuỗi:

Ví dụ:

[code language=”javascript”]var x = "Minh Hoàng" + " " + "Blog"; // x = Minh Hoàng Blog[/code]

– Tuy nhiên bạn cần lưu ý trường hợp trong phép tính có lẫn lộn cả số (Number) và chuỗi (String):

Ví dụ:

[code language=”javascript”]// Trường hợp cùng là số
x = 10;
y = 20;
result = x + y; // result = 30

// Trường hợp số và chuỗi
x = 10;
y = "20";
result = x + y; // result = 1020

// Trường hợp cùng là chuỗi
x = "10";
y = "20";
result = x + y; // result = 1020

// Trường hợp số ĐỨNG TRƯỚC chuỗi
x = 10;
y = 20;
z = "A"
result = x + y + z; // result = 30A

// Trường hợp chuỗi ĐỨNG TRƯỚC số
x = "A";
y = 10;
z = 20
result = x + y + z; // result = A1020[/code] Try it »

– Trong các ví dụ trên là thao tác với phép cộng, nhưng nếu chúng ta thao tác với các phép toán khác như trừ, nhân, chia thì kết quả không phải luôn luôn là những gì bạn mong đợi:

Ví dụ:

[code language=”javascript”]5 + null // return 5 vì null được convert thành 0
"5" + null // return "5null" vì null được convert thành "null"
"5" + 2 // return "52" vì 2 được convert thành "2"

"5" – 2 // return 3 vì "5" được convert thành 5
"5" * ‘2’ // return 10 vì "5" và ‘2’ được convert thành 5 và 2
"5" / "2" // return 2.5 vì "5" và "2" được convert thành 5 và 2[/code] Try it »

4. Phạm vi của biến JavaScript

Phạm vi của một biến là vùng của chương trình mà nó được định nghĩa:

4.1 Biến toàn cục (Global Variable)

Một biến global được khai báo bên ngoài hàm hoặc trong phạm vi toàn cục, có ảnh hưởng tới toàn bộ chương trình. Biến toàn cục có thể được truy cập từ bên trong hoặc bên ngoài hàm.

Ví dụ:

[code language=”javascript”]var x = 20;

function display(){
alert("Biến toàn cục TRONG hàm, x = " + x); // x = 20
}

// Gọi hàm
display();

alert("Biến toàn cục NGOÀI hàm, x = " + x); // x = 20[/code] Try it »

4.2 Biến cục bộ (Local Variable)

– Một biến local được khai báo bên trong một hàm hoặc trong phạm vi cục bộ, chỉ ảnh hưởng nội bộ bên trong hàm, khi ra khỏi hàm thì biến cục bộ sẽ không còn tồn tại. Các tham số hàm luôn luôn cục bộ cho hàm đó.

– Ở ví dụ bên dưới, biến cục bộ x được tạo ra khi hàm display() được gọi thực thi và kết thúc ngay sau khi thực thi xong.

Ví dụ:

[code language=”javascript”]function display(){
var x = 100;
alert("Biến cục bộ TRONG hàm, x = " + x); // x = 100
}

// Gọi hàm
display();

alert("Biến cục bộ NGOÀI hàm, x = " + x); // Không thực hiện lệnh này.[/code] Try it »

★ Một số lưu ý ★

– JavaScript cho phép khai báo biến mà không cần dùng từ khóa var, lúc này biến bắt buộc phải được khởi gán giá trị ban đầu và nó sẽ được sử dụng như một biến toàn cục.

Ví dụ:

[code language=”javascript”]x = 8.6;

y = "www.minhhn.com";[/code]

Đừng khai báo biến mà không sử dụng từ khóa var, vì nó có thể vô tình ghi đè lên một biến toàn cục đã tồn tại.

– Tên biến có thể trùng nhau khi được khai báo tùy mục đích sử dụng trong hàm (biến cục bộ) hay ngoài hàm (biến toàn cục)

Ví dụ:

[code language=”javascript”]var x = 20;

function display(){
var x = 100;

// Hiển thị biến x cục bộ
alert("Giá trị biến x bên TRONG hàm: " + x); // x = 100
}

display();

// Hiển thị biến x toàn cục
alert("Giá trị biến x bên NGOÀI hàm: " + x); // x = 20[/code] Try it »

– Khi bên trong hàm display() không sử dụng từ khóa var để khai báo biến cục bộ x, thì khi đó biến x sẽ được sử dụng như một biến toàn cục.

Ví dụ:

[code language=”javascript”]function display(){
x = 100;
}

display();

// Hiển thị giá trị biến x
alert("Giá trị biến x bên NGOÀI hàm: " + x); // x = 100[/code] Try it »

– Khi biến được khai báo bên trong block code không phải của hàm (trong ví dụ này là block code của vòng lặp for) thì khi đó biến x sẽ được sử dụng như một biến toàn cục.

Ví dụ:

[code language=”javascript”]var ii;
for(ii = 1; ii < 3; ii++)
{
// Xử lý logic của biến ii…

// Khai báo biến x
var x = 100;
}

// Hiển thị giá trị biến x
alert("Giá trị biến x = " + x); // x = 100[/code] Try it »

5. Danh sách từ khóa dùng trong JavaScript

Danh sách tất cả các từ khóa dành riêng trong JavaScript (ECMAScript 2015) được liệt kê trong bảng sau. Chúng không thể được sử dụng như biến JavaScript, hàm, phương thức, nhãn vòng lặp hoặc bất kỳ tên đối tượng nào.

break	case	catch	class
const	continue	enum	debugger
let	default	delete	do
else	export	extends	finally
for	function	if	import
in	instanceof	new	return
super	switch	this	throw
try	typeof	var	void
while	with	yield	await