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

Phân biệt var, let và const trong 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); // 'peekaboo!' } console.log(foo); // ReferenceError: foo is not defined
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); // '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
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  letconst  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-loop for (var i = 0; i < 3; i++) { console.log(i); } console.log(i); // 0 // 1 // 2 // 3
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(); // 101
Code language: JavaScript (javascript)

let

JavaScript const – Full-Stack Feed

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
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; // let foo = 101; // can't use "let" keyword again foo = 101; console.log(foo); } myFn(); console.log(foo); // 101 // ReferenceError: foo is not defined
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' ]; // turtles = turtles.concat('Shredder'); // this would throw an error console.log(turtles); } console.log(turtles); // ['leonardo', 'donatello', 'michaelangelo', 'raphael'] // ReferenceError: turtles is not defined
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.

Leave a Reply

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