Nội dung bài viết
Video học lập trình mỗi ngày
Var, let, const trong javascript - Những khái niệm đó không xa lại gì nữa kể từ khi ES6 định nghĩa thêm let và const. Nhưng liệu có bạn nào tự hỏi rằng? Chuyện gì xảy ra với var? Và tại sao có var rồi lại sinh ra thêm const và let?
NẾU BẠN LÀ NGƯỜI LƯỜI ĐỌC THÌ ĐÂY LÀ PHIÊN BẢN SO SÁNH GIỮA CONST LET VAR CHO BẠN. ĐỌC NHANH
const let var difference - So sánh nhanh cho những người lười đọc
ES6 rất quan trọng để tìm hiểu bởi vì một lý do là, nó làm cho JavaScript tốt hơn và dễ viết hơn, và Sự khác biệt cấu trúc Class giữa ES5 và ES6. Và hơn nữa ES6 cũng đang được sử dụng cùng với các công nghệ web hiện đại của ngày hôm nay như React, Node.js, v.v. Nhưng trước khi tìm hiểu về let và const thì chúng ta hãy xem var đang có vấn đề gì?
Vậy trong bài viết này, chúng ta sẽ tiếp tục dồng hành cùng nhau để xem chuyện gì xảy ra với var. Để hiểu được var thì trước hết bạn phải hiểu về scope trước. Vì nếu thực sự một developer không hiểu sâu về scope thì dẫn đến làm kết quả sai lệch khi định nghĩa các variable chồng chéo lên nhau, hoặc tệ hơn nữa làm lạm phát những var global. Để thực sự hiểu được về Scope thì tôi khuyên bạn nên đọc qua bài viết này: Vòng đời của một function (The lifecycle of a function)
Nhưng ở đây chúng ta cũng cần lướt qua về khái niệm scope, cho những bạn nào không có thời gian (hay gọi là lười biếng...)
Bạn đã đọc bài viết này chưa: Trời sinh ra for loop sao còn sinh array.forEach trong javascript?
Scope trong javascript là gì?
Scope như trong bài này thì chúng ta hiểu đơn giản nhất là "Scope: được định nghĩa là một vòng đời của một variable, từ khi nó sinh ra và chết đi". Có thể nói đây là định nghĩa đơn giản nhất mà chúng ta đã từng nghe.
Scope trong javascript có 3 loại scope:
Function (Local) Scope Global Scope Block Scope (với ES6)
Mục đích của bài viết này là đi tìm những nhược điểm của var, vì var bị nhiều vấn đề cho nên vì thế những nhà phát triển javascript lại đưa ra thêm let và const.
NOTES: Khi bạn sử dụng var thì var chỉ supports function scope và Global Scope, không sử dụng được trong Block Scope.
Tiếp theo, chúng ta đi tiếp về 3 loại trên, hy vọng các bạn đã biết rồi, còn nếu không biết thì cũng không sao, học mãi, chứ phải học một lúc đâu.
Function Local Scope
Ví dụ 1:
function local() {
var number = 1;
console.log(number); // 1
}
console.log(number); // undefinedKhi chạy code này thì chúng ta sẽ nhận được một error: Number is not defined
Khi một biến được định nghĩa bên trong một hàm, biến đó được sử dụng local cho function đó và không thể được sử dụng bên ngoài
Global Scope
Ví dụ 2:
var number = 1;
function local() {
console.log(number); // 1
}
console.log(number); // 1 Khi một biến được khai báo bên ngoài hàm, không riêng gì var thì có thể sử dụng bất cứ khi nào, và ở đâu
Block scope
Đây là điểm mấu chốt vì sao khi sử dụng var lại có vấn đề, và từ đó let và const lại được trọng dụng, vì như NOTES ở trên var không support trong Block scope
Ví dụ 3:
for(var i = 0; i < 10; i++){
console.log('inside block scope with Var >>',i)
}
console.log('outside block scope with Var >>',i); // Bạn nghĩ điều gì xảy ra ở console này??
Ồ, xem kết quả bạn sẽ thấy, chuyện gì xảy ra với var vậy? Tại sao nó lại chạy tiếp khi ra khỏi block scope (i = 10)? WTF? Để trả lời cho câu hỏi này bạn nên tìm hiểu về Scope closures
Đó là một bất lợi đầu tiên khi sử dụng var, nó sẽ làm thay đổi biến i dẫn đến kết quả sai lệch dù chúng ta rất cẩn thận trong việc lập trình, không ngoại trừ một ai
Bất lợi thứ 2 của việc khi sử dụng var đó chính là có thể redeclaring(khai báo lại)
Ví dụ 4:
var number = 1; // Khai báo đầu tiên var number = 2; // Khai báo lại lần nữa console.log(number); // 2
Vâng, xin thưa với các bạn rằng, number = 2, và không có lỗi gì, điều này dẫn đến hệ luỵ hai ông trong team oánh nhau, tại sao tôi khai báo rồi, ông còn khai báo nữa?? blalalalal
Đến đây, tôi và các bạn cũng đã hiểu vì sao var đến lúc thay thế được rồi, mặc dù var chính là công thần khai quốc nhưng vẫn phải hạ bệ.
Let thay thế var trong javascript
Chúng ta cũng lại lấy những nhược điểm khi sử dụng var, để xem let mang đến cho chúng ta gì nào?
Ở ví dụ 3:
Nếu chúng ta thay thế var sử dụng let
for(let i = 0; i < 10; i++){
console.log('inside block scope with Var >>',i)
}
console.log('outside block scope with Var >>',i); // Bạn nghĩ điều gì xảy ra ở console này??
Ok, nó khác với var bằng việc sinh ra một lỗi để cho coder biết rằng, biến i đã kết thúc và hy sinh trong khi làm nhiệm vụ(block scope). Tiếp
Vấn đề thứ 2 của var cũng được thay thế bởi let.
let number = 1; // Khai báo đầu tiên let number = 2; // Khai báo lại lần nữa console.log(number); // Identifier 'number' has already been declared
Chúng ta nhận được một Error: "Uncaught SyntaxError: Identifier 'number' has already been declared".
Okay quá ngon, đỡ mất công cãi nhau, đỡ mất công chơi nhầm nhau =]].
Vậy let keyword sử dụng như thế nào?
- Có thể sử dụng để thay thế var
- Supports in block scope
- Không thể redecralation, nhưng vẫn có thể sử dụng khi thay đổi giá trị
Const trong javascript
Giờ nói đến const, thì nói chung khác nhau giữa const và let thì không thể gán lại giá trị khác mà thôi.
Ví dụ 5:
const number = 1; // Khai báo đầu tiên number = 2; // gán giá trị console.log(number); // Uncaught TypeError: Assignment to constant variable.
Chúng ta nhận được một lỗi: Uncaught TypeError: Assignment to constant variable. Bởi vì nó là một hằng số nên nó không thay đổi, nhưng sẽ có trường hợp const sẽ thay đổi? Ở bài tiếp theo tôi sẽ nói về sự thay đổi trong const.
Tóm lại const keyword:
- Có thể sử dụng để thay thế var
- Support block-scoped như let
- Không thể thay đổi giá trị khi đã khai báo.
Với việc học ES6 sẽ mang lại cho bạn nhiều tiện lợi vô cùng, nhưng đừng quên ES6 ra đời cách đây khá lâu và bây giờ đã lên tới ES11 rồi. Nếu bạn không muốn bỏ lỡ những tính năng khác thì hãy đọc bài viết này: Tổng hợp tính năng từ ES6 tới ES11.
Xem thêm: Những bài viết học thủ thuật ES6
Hay thì share thôi, nói nhiều :D
Thanks for reading!
