Chào các bạn, ở bài này chúng ta sẽ tìm hiểu về phạm vi các biến trong javascript. Cũng như cách sử dụng sao cho hợp lý khi các bạn viết chương trình. Bên cạnh đó chúng ta sẽ tìm hiểu thêm về var và let
1. Tổng quan
Đối với những bạn học C / C# / C++ thì chắc các bạn cũng đã biết. Thông thường, chúng ta sẽ có 2 phạm vi sử dụng biến đó là toàn cục và cục bộ. Vậy thế nào là toàn cục và cục bộ?
Toàn cục hay còn được gọi là biến global, đây sẽ là biến mà bạn có thể truy xuất ở mọi nơi trong code.
Cục bộ tức là biến trong một scope nhất định, thường là trong function dùng để xử lý các bài toán nhỏ thành một bài toán lớn.
Các bạn nên nắm rõ vấn đề này vì rất cần thiết trong OOP nhé.
2. Biến toàn cục (Global variable)
Mình sẽ ví dụ bằng một đoạn code nhỏ sau:
Ví dụ 1:
let basicNumber = 0
function upNumberSize(){
basicNumber++
}
upNumberSize()
console.log(basicNumber )Result: 1
Như các bạn thấy, sau khi log kết quả ra thì chúng ta thấy kết quả của basicNumber là 1. Tuy nhiên ở một trường hợp khác mình khai báo như sau:
Ví dụ 2:
function upNumberSize(){
basicNumber=0
basicNumber++
}
upNumberSize()
console.log(basicNumber )Result: 1
Vậy hai ví dụ trên nó khác nhau và giống nhau như thế nào? Trong khi cả hai biến đều là biến cục bộ như vậy?
Trên thực tế nó đều giống nhau. Ở ví dụ 1 bạn khai báo ở đầu file và được truy xuất trong function. Thì nó sẽ tự hiểu là bạn đang gọi đến biến global. Còn ở ví dụ 2, nếu bạn không khai báo keyword cho biến đó như let, var, const. Thì nó sẽ hiểu rằng bạn đang muốn tạo biến cục bộ ngay tại function đó.
Tuy nhiên mình khuyến khích các bạn nên theo ví dụ 1 hơn là ví dụ 2. Vì nó tường minh hơn, dễ hiểu hơn. Và lúc các bạn cần tìm nó nằm ở đâu cũng sẽ dễ dàng hơn là các bạn khai báo nó ở trong function khi các bạn bảo trì và update code.
3. Biến cục bộ (local variable)
Cũng như mục trên mình sẽ bắt đầu bằng một ví dụ luôn nhé.
Ví dụ 1:
let basicNumber = 0;
function upNumberSize(){
let basicNumber=0
basicNumber++
return basicNumber
}
upNumberSize()
console.log(basicNumber)
console.log(upNumberSize())Result: 0 1
Ái chà chà, tại sao vậy cà? Mình gọi biến basicNumber ở trong function mà nhỉ? Vậy tại sao nó lại trả kết quả về 0 ta? Nguyên nhân là do bạn đã gây tác động đến sự xuất hiện của nó bằng cách bạn đã kiếm ghệ “let” cho basicNumber. Từ đó nó đã gây đến sự thay đổi và biến nó thành biến cục bộ. Không chỉ mỗi let, nếu các bạn khai báo nó với var hay const đều sẽ thành biến cục bộ.
4. Sự khác biệt giữa var và let
Thông thường thì các bạn hay sử dụng var hay let nhỉ? Với mình thì mình sử dụng let thường xuyên hơn lý do như sau:
Trong một scope của 1 chương trình, let chỉ cho các bạn khai báo biến đó chỉ một lần duy nhất (Only One Times ) để tránh việc khai báo bị lặp lại. Từ đó bạn có thể kiểm tra và bảo trì code dễ dàng hơn.
Tuy nhiên var thì không var cho phép bạn khai báo bao nhiêu lần tùy ý kể cả việc bạn lặp lại biến đó và nó sẽ ghi đè lên giá trị cũ ví dụ 1 cách đơn giản như sau:
Ví dụ 1:
var hoTen = “abc”
var hoTen = “xyz”
console.log(hoTen )result: xyz
Ví dụ 2:
let hoTen = “abc”
let hoTen = “xyz”
console.log(hoTen )Result: Uncaught SyntaxError: Identifier ‘hoTen’ has already been declared
5/ Tổng kết
Như vậy chúng ta đã tìm hiểu về phạm vi các biến trong chương trình. Bên cạnh đó cũng như việc chúng ta tìm hiểu về 2 anh em không song sinh là var và let về phạm vi sử dụng của chúng. Cảm ơn các bạn đã theo dõi, hẹn gặp các bạn vào bài tới.