, August 13, 2022

0 kết quả được tìm thấy

Khai báo biến, scope và hoisting trong JavaScript


  •   7 min reads
Khai báo biến, scope và hoisting trong JavaScript

Ở 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 😉

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 letconst 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, letconst đượ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 letconst 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 scopeFunction 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 letconst đề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 😊.

Bài viết cùng seri

Bài viết liên quan

ReactJS Tutorial for Beginners Phần 2

Trong bài viết này chúng ta sẽ đi qua năm nội dung đầu tiên của tutorial...

ReactJS Tutorial for Beginners Phần 2
ReactJS vs React Native - Gà cùng một mẹ liệu có giống nhau?

Bạn có đang rối giữa ReactJS vs React Native? Nên chọn cái nào thì tốt hơn? Có thể tái sử dụng code của ReactJS cho React Native hay không? Hãy khám phá câu trả lời thông qua bài viết so sánh ReactJS vs React Native này bạn nhé!...

ReactJS vs React Native - Gà cùng một mẹ liệu có giống nhau?
Netflix Clone với ReactJS, Styled Components và Firebase (Firestore & Auth) - Phần 7

Nối tiếp phần 6 của series, trong phần này, chúng ta sẽ bắt tay vào code Sign Up page,config lại phần router để đáp ứng được vấn đề Authentication kèm theo tạo custom hook để listening for Authentication. Không dài dòng nữa, Chúng ta bắt đầu thôi 😁....

Netflix Clone với ReactJS, Styled Components và Firebase (Firestore & Auth) - Phần 7
Netflix Clone với ReactJS, Styled Components và Firebase (Firestore & Auth) - Phần 6

Trong phần này, chúng ta sẽ config React Context firebase cho project của chúng ta, sau đó tạo Sign In Page và apply Authentication màfirebase cung cấp cho project của chúng ta nhé. Bắt đầu thôi 😉!...

Netflix Clone với ReactJS, Styled Components và Firebase (Firestore & Auth) - Phần 6
Netflix Clone với ReactJS, Styled Components và Firebase (Firestore & Auth) - Phần 5

Trong phần 5 này, chúng ta sẽ hoàn thiện Guest Home Page và config để connect với firebase, chuẩn bị cho các phần tiếp theo nhé 😉....

Netflix Clone với ReactJS, Styled Components và Firebase (Firestore & Auth) - Phần 5
You've successfully subscribed to 200Lab Blog
Great! Next, complete checkout for full access to 200Lab Blog
Xin chào mừng bạn đã quay trở lại
OK! Tài khoản của bạn đã kích hoạt thành công.
Success! Your billing info is updated.
Billing info update failed.
Your link has expired.