Var, let và const – 3 quý cô xinh đẹp nhà Javascript

Bài viết được sự cho phép của tác giả Kiên Nguyễn

1. Con nhà danh giá.

Tiếp tục chuỗi bài về Javascript, hôm nay sẽ là bài viết về gái. Không phải một mà là 3 đứa Var, Let và Const.

Từ kỷ ES6, giới anh hùng trong giang hồ đã không ngừng bàn luận tới 3 cô nàng tuyệt sắc giai nhân của nhà Javascript. Tuy nhiên, không phải cô nào cũng giống nhau, cũng đều thích hợp cho tất cả các chàng developer.

3 chị em var,let và const. Cuộc chiến không khoan nhượng.
Nguồn ảnh/ Source: deadcoderising.com

Tính khí các cô khác nhau, vì vậy phải hiểu thật rõ để có chiến thuật cưa cẩm phù hợp. Hãy cùng tìm hiểu qua bài viết dưới đây.

Xem thêm các chương trình tuyển dụng JavaScript lương cao trên TopDev

2. Các quý cô xinh đẹp.

2.1 Angelina VAR

Hình ảnh chả liên quan.
Để các ông ngắm đọc bài đỡ chán.

2.1.1 Phạm vi hoạt động.

Phạm vi của var là FUNCTION SCOPE, nghĩa rằng khi ta khai báo var trong một function, biến var đó chỉ tồn tại và có giá trị trong phạm vi function nó khai báo.

var varGirl = "Mặt em là mặt mộc";

function after_tay_trang() {
var varGirl = "Đây là ai?, tao ở đâu?, con nào đang đứng trước gương thế này";

console.log (varGirl); 
}
after_tay_trang(); // output: Đây là ai?, tao ở đâu?, con nào đang đứng trước gương thế này
console.log(varGirl); // output: Mặt em là mặt mộc

Hoặc là:

function myFunc() { 
var name = 'Luke'
console.log(name); // 'Luke'
}
myFunc();

console.log(name); // name is not defined

2.1.2 Lật mặt như bánh tráng

Từ ES2015 (ES6) thì vẻ đẹp của cô nàng VAR đã là bất tử, tuy nhiên không phải cứ đẹp là được tất cả. Trời cho var cái đẹp, nhưng cũng lấy hết m* mấy cái nết na của nàng ta.

  var logicGái = "em chỉ yêu mỗi mình anh";
var logicGái = "đéo có tiền thì anh cút";

Trường hợp có sử dụng vòng for, sử dụng var là cực kì nguy hiểm. Ví dụ sau đây cho thấy điều đó.

  // Running a for loop with var:
for(var i = 0; i < 10; i++){
console.log(i);
}
// Mong muốn có output: 0,1,2,3,4,5,6,7,8,9.
// Sự thật thì đắng lòng thay:
Output: 10

Tại sao?. Nguyên nhân nằm ở scope của var. Mỗi lần vòng for chay, biến i đều được khởi tạo mới (redeclared), việc này dẫn tới kết qủa cuối cùng là 10.

2.1.3 Ảnh hưởng bởi chức quyền?.

Var đẹp, nhưng yếu vía vl. Cứ có ai gây áp lực thì var xoay nhanh hơn cả spinner.

function fuckingKiddingMe(){ 
var cô_giáo = "tôi không biết chữa sốt rét đâu thầy"; 
// Thầy giáo bảo phải cởi quần áo mới ấm người kẻo rét quá mà chết.
var cô_giáo = "vậy thôi, vì tình đồng nghiệp, nằm tí cho ấm";

console.log(cô_giáo); // Thầy đùa em chăng?
}

2.2 Emma LET.

Ngắm gái nhưng vẫn phải tập trung đọc bài.

2.2.1 Phạm vi hoạt động (Scope).

Quận 10, Tân Bình, từ 9h -> 23h, không qua đêm.

Gì ba?. Vừa viết bài vừa lướt thiend*a à?.

Trường hợp được khai báo let là global và khai báo lại một lần nữa ở điều kiện if thì giá trị của let là không đổi.

let MrJokes = yeuemA;

if(Age > 40) {
let MrJokes = yeuemB; // Trẻ hơn
}

// Liệu rằng có thích gái trẻ:
MrJokes

// Không, vẫn chung thủy: 
yeuemA

Tại sao?. Nguyên nhân là do scope của 2 biến let là khác nhau (bất chấp có cùng tên khai báo).

// Scope của window (globally). 
let MrJokes = yeuemA;

if(Age > 40) {
// Scope của block (trong phạm vi {})
let MrJokes = yeuemB; // Trẻ hơn
}

Để rõ ràng và dễ nhớ hơn: var thì luôn là function scope, còn let là block scope.

2.2.2 Chung thủy điềm đạm.

Khác hẳn với cô nàng var, let lại là người vô cùng chung thủy. Trường hợp sử dụng let trong vòng for. Do là block scope (scope vòng for) nên giá trị sẽ không redeclared hoặc được gán lại sau mỗi lần chạy.

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

// This returns 0 through 9 in the console, then after one second logs:
The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
The number is 5
The number is 6
The number is 7
The number is 8
The number is 9

Rõ ràng, trong tình yêu cũng vậy, phàm cứ phải chạy tới chạy lui như for thì nên chọn cô em thứ 2 (let).

2.2.3 Ảnh hưởng bởi chức quyền?.

Câu trả lời là không. Cố tình khai báo 2 biến let cùng 1 block scope sẽ cho ra syntax error.

 function vongMotSizeBaoNhieu() { 
let a = 60; 
let a = 90; //throws syntax error
console.log(a); 
// Của trời cho, không to lên được.
}

2.3 Alexandra CONST.

Mỹ nhân với đôi mắt tuyệt đẹp.

2.3.1 Phạm vi hoạt động.

 function vongMotSizeBaoNhieu(){ 
let a = 60; 
let a = 90; //throws syntax error
console.log(a); 
// Của trời cho, không to lên được.
}

Nhà có 3 chị em, let và const có phạm vi hoạt động giống nhau, là BLOCK SCOPE.

2.3.2 Tuyệt đối chung thủy.

Với các thanh niên tin vào tình yêu vĩnh cmn cửu thì const là một cô nàng không thể bỏ qua. Giá trị đã gán cho const chỉ được gán một lần và không bao giờ được gán lại.

2.3.2 Khác gì với cô chị LET.

Không giống với cô chị Let, nếu chỉ khai báo đơn thuần biến const, giá trị const không thể redeclare.

 // Định nghĩa const:
const key = 'xyz123';
// Cố gắng redeclare:
key = 'xyz1234'
// Lỗi:
Uncaught TypeError: Assignment to constant variable.

Tuy nhiên, có một lưu ý nhỏ ở đây là nếu khai báo const như là một object, thì các attributes của object này lại có thể thay đổi.

Xem xét ví dụ sau:

 // Tạo object emma:
const emma = {
name: 'Watson',
age: 23
}
// Call emma ở console:
emma
// Kết quả:
{name: "Watson", age: 13}
// Tác động thay đổi attribute age:
emma.age = 14 // Tù mọt gông
// Gọi:
emma
// Kết quả:
{name: "Watson", age: 14}

Nếu vẫn muốn const chung thủy tuyệt vời, ta có thể sử dụng “freeze”.

 // Dùng freeze:
const emmaW = Object.freeze(emma);

3. Kết luận.

Bận lên thiend*a rồi nên bài này không có kết luận nha anh em.

Bảng so sánh scope của var, let và const.

4. Tài liệu tham khảo.

1. Var, let, or const.
2. Difference between let, const and var.

Nếu thấy hay có thể tham khảo thêm bài viết Javascript Prototype ở Kieblog nha. Cũng khá ổn!.

Bài viết gốc được đăng tải tại kieblog.vn

Có thể bạn quan tâm:

• Xử lý bất đồng bộ với Promise.all trong JavaScript
• Console Javascript quá kinh khủng
• for vs forEach vs for/in vs for/of trong javascript

Xem thêm Việc làm IT hấp dẫn trên TopDev