1. Hiểu sơ lược về biến trong JavaScript

Các biến chính là phần thiết yếu của mọi ngôn ngữ lập trình. Vì vậy mà ta phải học và hiểu rõ về biến trước khi đi sâu vào việc học hay ứng dụng của một ngôn ngữ nào đó. Giống như nhiều ngôn ngữ lập trình khác, Js cũng có các biến. Ta có thể hiểu các biến chính là những chiếc thùng chứa và được phân biệt bằng tên. Ta có thể đặt dữ liệu vào bên trong các thùng chứa này để lưu trữ hay tham khảo nó khi cần.

Các biến JavaScript được lưu trữ trong bộ nhớ của browser process ( tiến trình trình duyệt) hiểu nôm na 1 cách đơn giản là biến được lưu trong phần Ram mà trình duyệt đang sử dụng.

Các biến sẽ giúp sẽ giúp người lập trình viên đơn giản hóa việc sử dụng một giá trị nhiều lần bằng cách gọi biến. Ví dụ như việc khai báo một tên học sinh là Nguyễn Văn A mỗi lần sử dụng ta phải khai báo đầy đủ là Nguyễn Văn A. Nhưng nếu ta khai báo một biến là name và lưu trữ giá trị là Nguyễn Văn A thì mọi việc sẽ trở nên đơn giản và dễ dàng hơn rất nhiều.

Ví dụ:

<script>
    var name = "Nguyễn Văn A";
</script>

Khai báo thông thường:

<script>
    document.write("Họ tên là " + "Nguyễn Văn A ");
    document.write("Giới tính của " + "Nguyễn Văn A " + " là nam");
    document.write("Năm sinh của " + "Nguyễn Văn A " + " là 2002");
</script>

Sử dụng biến

<script>
    var name = "Nguyễn Văn A ";
    document.write("Họ tên: " + name);
    document.write("Giới tính của " + name + " là nam");
    document.write("Năm sinh của " + name + " là 2002");
</script>

Ở những bài học trước thì mình cũng đã đưa ra một vài ví dụ có sử dụng việc khai báo biến. Có thể là các bạn chưa hiểu nhưng chắc cũng đã không còn quá bỡ ngỡ về biến. Ở đây chỉ là những ví dụ rất đơn giản và ngắn gọn để dễ hình dung nhưng sau này khi học tập hay làm việc với những giá trị dài hơn, phức tạp hơn lên đến hàng chục hay hàng trăm ký tự thì bạn sẽ thấy tầm quan trọng của việc sử dụng biến.

2. Cách khai báo một biến trong JavaScript

Việc khai báo biến trong Js rất đơn giản vì ta sẽ chỉ cần khai báo biến luôn mà không cần khai báo kiểu dữ liệu cho biến. Nó sẽ tự nhận biết được kiểu dữ liệu khi mà ta gán giá trị lần đầu cho nó. Ta cũng có 3 cách khai báo biến trong Js là:

• Sử dụng từ khóa var
• Sử dụng từ khóa const
• Sử dụng từ khóa let

Tùy vào từng trường hợp cụ thể của bài toán mà ta sẽ khai báo theo cách khác nhau. Đương nhiên là mình sẽ nói cụ thể hơn ở những phần sau nhé!

Lưu ý

Đối với các phiên bản trước ES6 thì chỉ có từ khóa var thôi nhé. Vì vậy, với những trình duyệt quá cũ thì không sử dụng được let và const.

2.1. Khai báo biến trong JavaScript bằng từ khóa var

Cú pháp:

var tenBien = giaTri;

Trong đó:

• tenBien: Là tên của biến các bạn muốn đặt.
• giaTri: Là giá trị của biến, có thể là số, chuỗi, mảng, object.

Ví dụ:

var x = 5; //x lưu trữ giá trị là 5
var y = 6;//y lưu trữ giá trị là 6
var z = x + y;//z lưu trữ giá trị là 11

Các biến được khai báo với từ khóa var KHÔNG được có phạm vi khối. Các biến được khai báo bên trong khối {} có thể được truy cập từ bên ngoài khối.

Ví dụ:

{
var x = 2;
}
// x CÓ THỂ được sử dụng ở đây

Khi khai báo lại một biến với từ khóa var có thể sẽ gây ra một số vấn đề. Nhưng khai báo lại một biến đã có ở ngoài và khai báo lại vào trong khối là có thể.

Ví dụ:

var x = 10;
// X đây là 10
{
var x = 2;
// X đây là 2
}
// X đây là 2

Khai báo lại một biến Js với từ khóa var được cho phép ở bất kỳ đâu trong chương trình.

Ví dụ:

var x = 2;
// x là 2
var x = 3;
// Bây giờ x là 3

2.2. Khai báo biến trong JavaScript bằng từ khóa let

Cú pháp khai báo biến bằng từ khóa let cũng tương tự như khai báo với từ khóa var:

let tenBien = giaTri;

Trong đó:

• tenBien: Là tên của biến các bạn muốn đặt.
• giaTri: Là giá trị của biến, có thể là số, chuỗi, mảng, object.

Và cũng như mình nói ở trên, khi khai báo lại bằng từ khóa var có thể bị lỗi nhưng còn let sẽ giải quyết được vấn đề này. Tuy nhiên khi khai báo lại một biến bên trong khối thì sẽ không khai báo lại được bên ngoài khối. Biến loại này chỉ có phạm vi trong khối khai báo mà thôi. Vì vậy nó sẽ tối ưu trong trường hợp bạn cần khai báo một biến chỉ sử dụng tạm thời trong một phạm vi nhất định.

Ví dụ:

let x = 10;
// X đây là 10
{
let x = 2;
// X đây là 2
}
// X đây là 10

Với let, việc khai báo lại một biến trong cùng một khối KHÔNG được phép.

Ví dụ:

var x = 2;    // Cho phép
let x = 3;    // Not Cho phép
{
let x = 2;    // Cho phép
let x = 3     // Not Cho phép
}
{
let x = 2;    // Cho phép
var x = 3     // không Cho phép
}

2.3. Khai báo biến trong JavaScript bằng từ khóa const

Cú pháp:

let tenBien = giaTri;

Trong đó:

• tenBien: Là tên của biến các bạn muốn đặt.
• giaTri: Là giá trị của biến, có thể là số,chuỗi,mảng,object.

Const là một hằng số, vì vậy khi khai báo biến const thì bạn phải gán giá trị cho nó luôn, sau này cũng không thể thay đổi giá trị cho biến. Các bạn sẽ được học rõ hơn ở bài sau nhé!

Ví dụ:

const pi = 3.14;
const domain = "laptrinhtudau.com";
// nếu khai báo lại sẽ lỗi, vì biến const không được phép thay đổi giá trị
domain = "www4.com";

2.4. Sự khác nhau giữa 3 cách báo biến

Ta có thể dễ dàng thấy được sự khác biệt của 3 cách khai báo trên:

Const được sử dụng để khai báo 1 hằng số, và giá trị của nó không thay đổi trong suốt chương trình.

Let khai báo biến chỉ có thể truy cập được trong block bao quanh nó được xác định bằng cặp {}.

Var khai báo biến có thể truy cập ở phạm vi hàm số hoặc bên ngoài hàm số, toàn cục.

3. Một số quy tắc khi đặt tên biến trong JavaScript

Tất cả các biến tronng Js phải được định danh với một cái tên duy nhất. Các cái tên duy nhất này được gọi là định danh. Các định danh có thể là những tên ngắn gọi như là x, y, … hay là những tên dài, có tính mô tả như tuổi, họ tên, tổng,…).

Một số quy tắc chung cho việc đặt tên biến là:

• Tên có thể chứa các chữ cái, chữ số, dấu gạch dưới và ký hiệu đô la $. Không được chứa các ký tự đặc biệt ví dụ như: @, #, !, %, ^, &, ….
• 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 $ và _ (nhưng mình sẽ không sử dụng nó trong hướng dẫn này và khuyến khích các bạn không nên sử dụng dấu $ trong đặt tên vì dễ nhầm với ngôn ngữ PHP.)
• Tên có phân biệt chữ hoa chữ thường (y và Y là các biến khác nhau)
• Các từ dành riêng (như từ khóa JavaScript) không được dùng làm tên

Mình vẫn lưu ý nhất với các bạn là Js có phân biệt chữ hoa chữ thường. Đây có thể là một sai lầm mà người mới học dễ mắc phải gây ra lỗi code mà các bạn có thể không để ý kỹ và cũng như là không sử được vì mặc dù code các bạn đều đúng từ đầu đến chân.

4. Cách gán giá trị cho biến trong JavaScript

Để gán giá trị cho biến ta dùng dấu bằng (=) để gán vế phải vào vế trái.

Ví dụ: để gán giá trị “học lập trình từ con số 0” vào biến laptrinhtudau thì ta sẽ có:

Laptrinhtudau = ‘học lập trình từ con số 0’

Có 2 cách gán giá trị thông dụng là vừa khai báo biến vừa gán giá trị hoặc khai báo rồi mới gán giá trị cho biến:

//cách 1
var laptrinhtudau = ‘học lập trình từ con số 0’’
//cách 2
var laptrinhtudau
laptrinhtudau = ‘học lập trình từ con số 0’

5. Một số vấn đề hay gặp phải khi làm việc với biến trong JavaScript

5.1. Sử dụng toán tử gán thay vì toán tử so sánh

Việc nhầm lẫn này thường xảy ra khi ta sử dụng câu lệnh if hay một số vòng lặp. Điều này sẽ gây ảnh hưởng và sai code. Các bạn hãy chú ý điều này nhé.

Ví dụ:

var x = 0;
if (x = 10)
// Câu lệnh này sẽ trả về giá trị true vì 10 là true

var x = 0;
if (x = 0) 
// Câu lệnh này sẽ trả về giá trị false vì 0 là false

// Để so sánh chính xác chúng ta phải sử dụng như sau
var x = 0;
if (x == 10)

5.2. Nhầm lẫn giữa việc bổ sung và thêm số

Trường hợp nhầm lẫn này thường xảy ra khi bạn khai báo lại các biến. Vì khai báo lại nên là có thể bạn sẽ nhầm ở một số trường hợp tính toán ví dụ như trong một số phép tính đơn giản cộng trừ nhân chia chẳng hạn.

Ví dụ:

// Cả 2 phép tính toán trên đều sử dụng toán tử cộng giống nhau.
var x = 10;
var y = 5;
var z = x + y;           // Kết quả của z là  15.
var x = 10;
var y = "5";
var z = x + y;           // Kết quả của z là "105".

5.3. Phá vỡ chuỗi JavaScript

Javascript cho phép chúng ta chia chuỗi thành 2 dòng nhưng nếu khai báo như sau thì biến sẽ không hoạt động:

sau thì biến sẽ không hoạt động:
var x = "Hello
World!";

Để biến có thể hoạt động được ta khai báo như sau:

var x = "Hello \
World!";

6. Cách in giá trị của biến JavaScript ra trình duyệt

Để in giá trị của biến hoặc một chuỗi nào đó ra trình duyệt thì ta sử dụng hàm document.write(value).

Ví dụ:

<html>
    <head>
        <title></title>
    </head>
    <body>
        <script language="javascript">
            var website = 'laptrinhtudau.com';
            document.write(website);
        </script>
    </body>
</html>