Phân biệt var, let và const trong JavaScript | Học JavaScript

Trong bài viết này, chúng ta sẽ cùng nhau đi phân biệt var, let và const trong JavaScript.

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 var, let 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);  
}

console
.log(foo); Code language:
 JavaScript
 (
javascript
)

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);  
  console.log(bar);  
  console.log(baz);  
}

console.log(foo);  
console.log(bar);  
console
.log(baz); 
Code language:
 JavaScript
 (
javascript
)

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 let, const và var

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

var

Variable Declarations in JavaScript — http://bit.ly/js-vars · GitHub

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
 (var
 i = 0
; i < 3; i++) {
  console.log(i);
}

console.log(i);

 
 
 
Code language:
 JavaScript
 (
javascript
)

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();

Code language:
 JavaScript
 (
javascript
)

let

JavaScript const – Full-Stack Feed

let outside of a for-loop

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

console.log(i);

 
 
 
Code language:
 JavaScript
 (
javascript
)

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;
   
  foo = 101;

  console.log(foo);  
}

myFn();

console.log(foo);  

 
Code language:
 JavaScript
 (
javascript
)

const

Demystifying the JavaScript 'const' Declaration | by Daniel Jung | JavaScript in Plain English

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'
  ];
   

  console.log(turtles);
}

console.log(turtles); 

 
Code language:
 JavaScript
 (
javascript
)

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.

Tóm Tắt

Phân biệt var, let và const trong JavaScript | Học JavaScript

Chia sẻ

Bài viết liên quan

mtoplist