Javascript: Cách sử dụng var, let và const

Trong javascript chúng ta có một số cách để khai báo biến như sau: var, let, const.

Trước đây, chúng ta thường sử dụng var để khai báo biến. Sau khi ES6 ra đời, chúng ta có thể dùng let và const. Vậy tại sao phải có let và const ? Let và const ra đời nhằm khắc phục nhược điểm gì của var? Chúng ta cùng tìm hiểu những vấn đề của var trước đây nhé.

var là function scope. Một biến thì luôn có phạm vi truy cập của nó. Ở đây var có phạm vi ảnh hưởng trong một function, ra khỏi function thì var sẽ không tồn tại nữa.

function run() { 
 var width = 200; 
 console.log(width);// 200 
}
run();
console.log(width) //width is not defined

let là block scope. Block là code trong dấu ngoặc nhọn {}. Do đó khi thoát khỏi block thì biến được khai báo bằng let sẽ không tồn tại nữa.

const i = 10;
if(i > 0) {
 let width = 200;
 console.log(width)// 200
}
console.log(width)// width is not defined

const i = 10;
if(i > 0) {
 var width = 200;
 console.log(width)// 200
}
console.log(width)// 200 do dùng var nên khi ra khỏi block, 
//width vẫn truy cập được

var sẽ bị hoisting, còn let và const thì không. Thế nào là hoisting? Hoisting là cách javascript kéo tất cả các khai báo biến lên trên scope hiện tại

console.log(width);//not error, in ra undefined
var width = 200;

Sau khi hoisting đoạn code trên được viết lại như sau:

var width;//khai báo được kéo lên trên cùng của scope này
console.log(width);//not error, in ra undefined 
width = 200;

Còn let thì không bị hoisting:

console.log(width);// error, width is not defined 
let width = 200;

var có thể bị khai báo trùng lặp:

var width = 200;
var width = 300; //not error
let width = 200;
let width = 300; //error width đã được khai báo

Javascript là một ngôn ngữ dễ viết, dễ học, linh hoạt, và khá là bị sida. Một số cái kì dị của javascript mà anh em có thể nghĩ đó là:

– Dynamic type: kiểu dữ liệu động

– Prototypal Inheritance: thừa kế kiểu prototype

– var: thằng này khá nguy hiểm

– call, bind, apply …

Còn nhiều nữa nên anh em học một ngôn ngữ nên hiểu bản chất của nó. Hãy là một lập trình viên có tâm và đâu tư vào kiến thức của bạn. Đừng hời hợt học bề nổi của Javasscript nhé.

Cùng xem ví dụ sau nhé:

for (var i = 0; i < 10; i++) {
 setTimeout(function () {
  console.log('The number is ' + i);//function scope
 });
}

for (var i = 0; i < 10; i++) {
 (function (i) {
  setTimeout(function () {
   console.log('The number is ' + i);//function scope
  });
 })(i);
}

for (let i = 0; i < 10; i++) {
 setTimeout(function () {
  console.log('The number is ' + i);// block scope
 });
}

Bạn chạy 3 vòng lặp trên và bạn tự giải thích tại sao nó lại in ra màn hình như vậy nhé 🙂

Với let và var, chúng ta có thể cập nhật giá trị của biến đó. Const là một biến hằng số, không thể thay đổi giá trị. Nhưng nó chỉ đúng cho những dạng dữ liệu đơn giản như string, số, boolean(primitive type). Còn với object thì không đúng nữa, ta có thể thay đổi thuộc tính của object.

const name = 'Thau';
name = 'Nguyen'//error
const obj = {
 name: 'Dan',
 city: 'Ho Chi Minh'
}
obj = {};//error
obj.name = 'Nguyen';// not error

Để tạo một hằng cho một object chúng ta cần sử dụng Object.freeze để ngăn chặn việc thay đổi các thuộc tính của object đó.

const obj = Object.freeze({
 name: 'Dan',
 city: 'Ho Chi Minh'
});
obj = {};//error
obj.name = 'Nguyen';//not error, nhưng không làm thay đổi được obj

Tổng kết lại theo tôi khi khai báo một biến trong javascript bạn nên:
– Sử dụng const như mặc định.
– Nếu biến cần phải cập nhật giá trị thì dùng let.
– Hạn chế dùng var, trừ khi bạn muốn chia sẻ biến đó thông qua nhiều scope khác nhau.

Xem thêm những thủ thuật xịn cho Javascript tại Youtube của tôi.