JavaScript: var, let và const cho người mới bắt đầu

Hi các bạn,

Một trong những cái cơ bản nhất về JavaScript để define một variable, đó chính là sử dụng các syntax var/let/const.

Vậy, let và const có gì hay mà ta phải tránh dùng thằng var trong cuộc sống hằng ngày?

Cùng tìm hiểu nào

1/ let keyword

let cũng như var, nó được dùng để khởi tạo 1 variable. Về mọi mặt thì nó ko khác gì, nhưng mặt quan trọng nó khác nhau là: SCOPE

Đúng thưa các bạn, let nó an toàn hơn nhiều về var về mặt ổn định về tính dữ liệu.

Ví dụ đơn giản ở code sau:

for (var i = 0; i < 5; i++)
	setTimeout(() => console.log(i), 1000)

for (let i = 0; i < 5; i++)
	setTimeout(() => console.log(i), 1000)

Kết quả:

• var => bạn nhận dc 5 5 5 5 5
• let => bạn nhận dc 0 1 2 3 4

Từ đó bạn có thể thấy:

• var khi khởi tạo nó sẽ khởi tạo globally trong scope của bạn, và mỗi khi bạn redefine lại cái var, data của var cũ sẽ mất
  • Hiểu đơn giản, mỗi lần var x lại, nó sẽ đẩy lên đầu.
• let sẽ throw 1 cái SyntaxError nếu bạn cố tình redefine một let variable. Như re-assign value thì thoải mái.

Về mặt real-life – ví dụ:

• Bạn Seth và bạn Roman cùng dev ở một project.
• Bạn Seth đã hoàn thành feature A, ngon lành, qua cái khác làm
• Bạn Roman dc assign để upgrade feature A thành A+, sure, bạn Roman chấp nhận liền vì bạn Seth đang vướng cái khác.
• Bạn Roman tự tin, ko sợ bố con thằng nào, vào là sửa code luôn mà ko đọc => 1 cái sai
• Bạn Roman defined 1 cái variable “var userData”, vì ko đọc code và “var userData” cũng đã dc define ở trên, chung 1 function scope.
• Bạn Roman test và thấy feature A hư cmnr và chưa tới dc đoạn A+ của bạn ấy nữa, sau 1 vài giờ debug thì bạn ấy biết được bạn ấy vô tình overwrote cái userData của feature A rồi.
  • Giải phap:
    • Bạn Roman đổi variable “var userData” thành “var userSomethingData” => OK
    • Bạn Seth ngay từ đầu dùng variable let “let userData” thì bạn Roman đã ko tốn vài giờ để debug.

Vậy nên, nếu được (vì còn đầy project ngoài kia phải viết ES5 thuần), hãy xài let, còn không thì fải chắc chắn là variable của bạn tạo ra sẽ ko trùng trong scope bạn khai báo.

Chiêm ngưỡng thêm xíu:

// Demo 1
var seth = "phat";
var seth = "sandaru"; // ok

// Demo 2
let seth = "phat";
let seth = "sandaru"; /// error
seth = "sandaru"; // ok

// Demo 3
var seth = "phat";
let seth = "sandaru"; // ok
var seth = "phat"; // error

Vậy là bạn sẽ bik rõ hơn về vụ này nhé :)) Vậy nên nếu dc, hãy xài let (và const) thay vì xài var (nếu bị ép buộc viết ES5 mà sếp ko chịu xài webpack babel các kiểu để viết ES6)

Vì khi đã đụng tới let và const, data của bạn là final và fully protected.

2/ const keyword

Cũng như let, const được tạo ra để tránh vụ scope-over-wrote. Ngoài ra thêm 1 special feature nữa mà const đem lại là bạn không để re-assign value được cho cái const

Nó đứng ra dc coi như là “hằng biến”.

Cái này nó sẽ giống như các bạn define 1 property trong 1 ngôn ngữ thuần OOP là: public/protected/private final <data_type> variableName = ….;

Nó sẽ thuộc kiểu “readonly” như trong TypeScript.

Ví dụ:

const seth = "phat"; // ok
seth = "sandaru"; // error

Cũng như mình nói ở trên, nó thuộc kiểu readonly/final, nhưng nếu nó là 1 Object, bạn vẫn có thể truy cập và chỉnh sửa bên trong Object đó thoải mái. As same as final/readonly:

function Person(fName, lName){
	this.firstName = fName;
	this.lastName = lName;
}

const userObj = new Person("Phat", "Seth");
userObj.firstName = "Sandaru"; // legit

userObj = new Person("Sandaru", "Seth"); // error

Cụ thể thì nó cũng ko có gì ghê gớm ngoại trừ việc giống let về scope và ko cho re-assign value. Với const, bạn sẽ chắc chắn dc trong code của bạn, sẽ có một số biến mà bạn ko muốn ai cũng re-assign lại value cho dc.

Một số cty họ sẽ nói giữ sự trong sáng, consistancy,… =))

Và cũng như ví dụ trên của bạn Roman, nếu bạn Seth dùng “const userData” thì đến bố của bạn Roman cũng ko re-assign value được chứ đừng nói là redefine :v

3/ var keyword

Nếu được, đừng xài var. Nếu bị bắt buộc lắm và bạn ko dc dùng webpack + babel để generate code ES6/7/… => ES5 hỗ trợ mọi browser. Thì hãy xài var

Và khi xài, bạn cần để ý là mình sẽ ko overwrite biến var đã có sẵn (dùng 1 cái variable name thật đặc biệt). Thì lúc đó bạn cứ thoải mái và sử dụng.

4/ Finally về Javascript var let const

Đây là một số kiến thức cơ bản về ES5  + ES6 cho người mới bắt đầu. Và cũng sẽ là câu hỏi hay mà những ng` phỏng vấn họ hay hỏi tới nếu bạn có làm JavaScript, cụ thể là ES6+

Và nó cũng là 1 cái rất hay mà bạn nên sử dụng hằng ngày, và bạn sẽ ko fải nuối tiếc điều đó đâu 😀

Thanks for reading.