Ở bài trước, chúng ta đã cùng nhau tìm hiểu về các kiểu dữ liệu trong JavaScript cũng như biết được tham trị, tham chiếu là gì? Phân biệt được hai ông thần này. Trong bài viết này, chúng ta sẽ tiếp tục tìm hiểu về cách khai báo biến trong JavaScript, khái niệm scope là gì? hoisting là gì? chúng ta bắt đầu thôi ?
Bạn có thể xem thêm bài viết tại: https://200lab.io/blog/khai-bao-bien-scope-hosting-trong-javascript/
I. Khai báo biến trong JavaScript
Trong JavaScript, việc khai báo biến khá đơn giản, bạn chỉ việc dùng các từ khóa như var - let - const
để khai báo biến mà thôi, ta không cần quan tâm đến kiểu dữ liệu của biến đó. Bản thân JavaScript là một dynamic laguage mà, do đó kiểu dữ liệu của biến có thể tùy ý thay đổi theo kiểu dữ liệu của giá trị mà nó được gán, tiện quá phải không nào ?.
var a = 5 //--> number
let b = '200lab' //--> String
const obj = {name: '200lab'} //--> Object
Trước ECMAScript 2015 (ES 2015 hay ES6) thì var
là từ khóa duy nhất được sử dụng để khai báo biến trong JavaScript. Kể từ sau ES6 được ra mắt thì JavaScript được bổ sung thêm từ khóa let
và const
cho việc khai báo biến.
Vậy tại sao trong khi ta có thể khai báo biến bằng từ khóa var
rồi mà còn thêm let
với const
để làm gì nữa ?. Thì vấn đề ở đây là trước ES6 thì có một số bug dễ phát sinh liên quan đến scope (phạm vi) của các biến, vì thế mà khi ES6 ra mắt, let
và const
được thêm vào để khắc phục vấn đề này.
Một điều cần lưu ý khi khai báo biến là việc khai báo biến có tên giống với biến đã được khai báo trước đó.
Đầu tiên là với biến được khai báo bằng từ khóa var
. Khi ta khai báo lại biến bên trong một block code khác với từ khóa var
thì nó sẽ ảnh hướng đến biến cùng tên ở bên ngoài block đó.
var a = 10;
//--> ở đây a = 10
{ var a = 5; //--> a = 5;
}
//--> a = 5
Việc biến a
nhận giá trị mới trong block code là do biến được khai báo bằng var
sẽ có Global scope .
Biến được khai báo lại bằng từ khóa let
và const
bên trong một block code thì sẽ không ảnh hưởng gì đến biến có cùng tên đã được khai báo bên ngoài block trước đó.
var a = 1, b = 2;
//--> Tại đây a = 1 và b = 2
{ let a = 5; const b = 10; //--> a ở đây bằng 5, b bằng 10
}
//--> a ở đây vẫn bằng 1 và b vẫn bằng 2
Lưu ý: Các biến không được khai báo thì sẽ không tồn tại, tuy nhên nếu biến không được khai báo mà ta gián giá trị cho nó thì nó trở thành một biến có Global Scope và có kiểu dữ liệu trùng với kiểu giá trị mà nó được gán đó nhé ?
II. Scope trong JavaScript
Đầu tiên chúng ta cần biết khái niệm scope là gì? Scope là phạm vi của một biến được khai báo mà ta có thể truy cập được. Trước khi ES6 được ra mắt, JavaScript chỉ có 2 loại scope là: Global scope và Function scope. Sau khi ES6 ra mắt thì JavaScript có thêm Block scope nữa.
Chúng ta cùng tìm hiểu từng loại một nhé ?.
1. Global scope
Các biến mà được khai báo bên ngoài bất kỳ function nào thì đều thuộc Global scope. Với các biến thuộc Global scope đều có thể truy cập được từ bất cứ đâu trong chương trình JavaScript.
var speech = 'Welcome to JavaScript'; //--> Biến speech có thể sử dụng được ở đây function say() {
//--> Biến speech cũng có thể sử dụng được ở đây
}
2. Block scope
Lưu ý: Bất kỳ biến nào được khai báo bằng từ khóa var
đều không thể có Block scope.
Do đó biến được khai báo bằng từ khóa var
bên trong block {}
thì có thể được truy cập ở bên ngoài block đó.
{ var a = 10;
} //--> Có thể sử dụng biến a tại đây
Trước ES6, JavaScript không có khái niệm Block scope. Sau khi ES6 ra mắt, thì các biến được khai báo bằng let
và const
đều thuộc Block scope. Do đó các biến không thể được truy cập ở bên ngoài block được.
{ let a = 10;
} //--> Không thể sử dụng được biến a tại đây
3. Function scope
Như tên gọi, các biến được khai báo cục bộ bên trong một function thì có Function scope.
function showCar() { var name = 'lamborghini'; //--> Ta có thể sử dụng biến name ở đây
} //--> Ta không thể sử dụng biến name ở đây
4. Loop scope
Như tên gọi, Loop scope đề cập đến phạm vi của biến trong các vòng lặp, ta cùng đến ví dụ để dễ hiểu hơn nhé ?
Đầu tiên là sử dụng từ khóa var
trong vòng lặp
var i = 2; for(var i = 0; i < 10; i++) { //code ở đây
}
console.log(i); //--> i = 10
Trong ví dụ trên, biến i
được khai báo bằng từ khóa var
trong vòng lặp for
sẽ thay đổi giá trị của biến i
bên ngoài vòng lặp for
do đó sau khi chạy hết vòng lặp thì i = 10
Còn sử dụng từ khóa let
thì sao? cùng xem ví dụ và giải thích bên dưới nè ?
let i = 2; for(let i = 0; i < 10; i++) { //code ở đây
}
console.log(i); //--> i = 2
Bản thân các biến được khai báo bằng từ khóa let
bên trong một block code sẽ có Block scope còn với biến được khai báo bên ngoài block code thì sẽ có Global scope do đó biến i
bên ngoài và bên trong for
sẽ không liên quan gì đến nhau. Vì thế kết quả cuối cùng i = 2
III. Hoisting
Hoisting là một cơ chế của JavaScript, các biến hay function khi được khai báo sẽ được đưa lên trên cùng của scope trước khi đống code còn lại thực thi.
Lưu ý: Vì nó chỉ đưa những khai báo lên trên cùng scope thôi, còn việc gán giá trị thì vẫn giữ nguyên không thay đổi ? (các bạn hết sức lưu ý điều này nhé).
Vòng đời của một biến trong JavaScript sẽ như thế này: Khai báo --> Gán giá trị --> Sử dụng --> Giải phóng
Tuy nhiên ta có thể khai báo và gán giá trị luôn cũng được. Để giải thích vấn đề hoisting ta cùng đi vào ví dụ nè.
console.log(text); //--> undefined var text = "Welcome to JavaScript";
Như khai niệm về hoisting ở lúc đầu, biến text
ở ví dụ trên mặc dù được khai báo và gán giá trị sau khi ta log
nó ra nhưng vì được hoisting nên biến text
được khai báo đầu tiên. Vì khai báo thôi nên khi ta log
biến text
ra sẽ là undefined
, sau đó biến text
mới được gán giá trị. (Tại sao lại undefined
thì mình đã giải thích ở bài trước rồi nhé, nếu bạn không biết thì có thể đọc lại nè ?).
Khi thực thi đoạn code trên JavaScript sẽ làm như thế này:
var text; console.log(text); //--> undefined text = "Welcome to JavaScript";
Tương tự với một function:
function saySth() { console.log(text); var text = "Welcome to JavaScript";
}
//Khi JavaScript chạy
function saySth() { var text; console.log(text); text = "Welcome to JavaScript";
}
saySth(); //--> undefined
Với các biến được khai báo bằng từ khóa var
mới được như vậy, còn với let
thì khác nhé. Biến được khai báo bằng từ khóa let
thì vẫn được hoisting thôi nhưng nó không được khởi tạo nhé do đó việc ta sử dụng biến của nó sẽ báo lỗi như ví dụ bên dưới.
console.log(carName); //--> ReferenceError: carName is not defined
let carName = "lamborghini";
IV. Tổng kết
Qua bài viết này, hy vọng sẽ giúp bạn nắm được cách khai báo biến và các vấn đề liên quan đến việc khai báo biến, biết được khái niệm về scope và hoisting trong JavaScript. Nếu bạn chưa rõ thì có thể đọc lại lần nữa nhé ?. Cảm ơn các bạn đã đọc, hẹn gặp lại trong bài tiếp theo ?.