post-image

Phân biệt var, let và const trong JavaScript

Biến, kiểu dữ liệu và toán tử

Giới Thiệu

ES6 (viết tắt của ECMAScript 6) là một tập hợp các kỹ thuật nâng cao của JavaScript. ECMAScript do hiệp hội các nhà sản xuất máy tính Châu Âu đề xuất làm tiêu chuẩn của ngôn ngữ JavaScript. Bạn cứ nghĩ xem hiện nay có khá nhiều trình duyệt Browser ra đời và nếu mỗi Browser lại có cách chạy JavaScript khác nhau thì các trang web không thể hoạt động trên tất cả các trình duyệt đó được, vì vậy cần có một chuẩn chung để bắt buộc các browser phải phát triển dựa theo chuẩn đó.

Một trong những tính năng nổi bật của ES6 đó là sự bổ sung let và const phục vụ cho việc khai báo biến dữ liệu. Vậy tại sao lại cần tới let và const dù trước đó đã có var để khai báo biến, thì ở bài viết này chúng ta sẽ cùng tìm hiểu lý do của từng kiểu khai báo biến. Từ đó bạn có thể biết được khi nào nên dùng varlet và const.


Function-scope và Block-scope

Phan biet var let va const trong JavaScript 1 1

Trong JavaScript có 2 loại scope: function-scope và block-scope.

Function-scope

function myFn() {
  var foo = 'peekaboo!';
  
  console.log(foo); // 'peekaboo!'
}

console.log(foo); // ReferenceError: foo is not defined

Nếu sử dụng var thì phạm vi trong các biến sẽ có bị giới hạn trong function. Khi bạn gọi các biến này ở ngoài function sẽ nhận được thông báo lỗi như trên

Block-scope

if (true) {
  var foo = 'peekaboo!';
  let bar = 'i see u';
  const baz = 'baby blue!';

  console.log(foo); // 'peekaboo!';
  console.log(bar); // 'i see u';
  console.log(baz); // 'baby blue!';
}

console.log(foo); // 'peekaboo!';
console.log(bar); // ReferenceError: bar is not defined
console.log(baz); // ReferenceError: baz is not defined

foo không bị giới hạn bởi if-statement block. Tuy nhiên bar và baz thì bị giới hạn bới block

Đó chính là sự khác biệt giữa letconst và var

Một block là đoạn code nằm trong dấu {} trong JavaScript.


var

Có nhiều khác giữa var và let / const, vì vậy hãy cùng khám phá một vài đoạn code để hiểu rõ hơn về chúng.

var outside of a for-loop

// for-loop
for (var i = 0; i < 3; i++) {
  console.log(i);
}

console.log(i);

// 0
// 1
// 2
// 3

Biến i có thể truy cập bên ngoài vòng lặp for. Điều này được mong đợi vì các biến được xác định bằng var không thể truy cập được bên ngoài hàm.

Redefining var

var bạn có thể thay đổi giá trị của biến đó

function myFn() {
  var foo = 1;
  foo = 30;
  var foo = 101;

  console.log(foo);  
}

myFn();

// 101

let

let outside of a for-loop

// for-loop
for (let i = 0; i < 3; i++) {
  console.log(i);
}

console.log(i);

// 0
// 1
// 2
// ReferenceError: i is not defined

Redefining let

let cũng có thể thay đổi giá trị của biến nhưng cú pháp nó nghiêm ngặt hơn var

function myFn() {
  let foo = 1;
  foo = 30;
  // let foo = 101;    //  can't use "let" keyword again
  foo = 101;

  console.log(foo);  
}

myFn();

console.log(foo);  

// 101
// ReferenceError: foo is not defined

const

Từ khóa const là viết tắt của từ constant. Nó cũng giống như let, nhưng tuy nhiên là const không thể reasign giá trị

const myBoolean = true;

if (myBoolean) {
  const turtles = [
    'leonardo',
    'donatello',
    'michaelangelo',
    'raphael'
  ];
  // turtles = turtles.concat('Shredder');  //  this would throw an error

  console.log(turtles);
}

console.log(turtles); 

// ['leonardo', 'donatello', 'michaelangelo', 'raphael']
// ReferenceError: turtles is not defined

Tổng kết

KeywordFunction vs Block-scopeRedefinable?
varfunction-scope
letblock-scope
constblock-scope🚫

Nói chung, nếu bạn cần tạo một biến, sử dụng const. Tuy nhiên, nếu bạn biết hoặc nghĩ rằng bạn sẽ cần gán lại nó (vòng lặp for, câu lệnh chuyển đổi, hoán đổi thuật toán) hãy sử dụng let.

Nguồn:

https://www.freecodecamp.org/news/var-let-and-const-whats-the-difference/

https://ui.dev/var-let-const/

Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.


Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

Trở thành lập trình viên từ con số 0
Tags:
,

Leave a Reply

Your email address will not be published. Required fields are marked *