- vừa được xem lúc

Var vs let vs const? Các cách khai báo biến và hằng trong Javascript

0 0 47

Người đăng: Nguyen Tuan Anh K

Theo Viblo Asia

Dạo này mình tập tành học Javascript, thấy có 2 cách khai báo biến khác nhau nên đã tìm tòi sự khác biệt. Nay xin đăng lên đây để mọi người đọc xong hy vọng phân biệt được giữa letvar, và sau đó là khai báo hằng bằng const.

Block Scope

Nếu bạn viết quen viết Python như mình thì có lẽ bạn sẽ quen với cách hoạt động của var hơn. Các biến được khai báo với var không có scope trong một block (ví dụ như vòng lặp for hoặc if..else), mà chỉ có scope trong function hoặc global.

var

Ví dụ:

if (true) { var noBlockScope = true;
}
console.log(noBlockScope)
=> true

Còn với function

function foo_a() { var functionScope = true;
}
foo_a()
console.log(functionScope)
=> Uncaught ReferenceError: functionScope is not defined

let

Nếu bạn khai báo biến với let, biến đó sẽ chỉ tồn tại trong phạm vi block đó.

Ví dụ:

if (true) { let functionScope = true;
}
console.log(functionScope)
=> Uncaught ReferenceError: functionScope is not defined

Lý do là vì biến functionScope của bạn ở đây đã được khai báo với let, và do đó chỉ tồn tại trong block mà nó được khai báo (ở đây là trong block if..else.

Redeclaration

Đương nhiên là đã là biến thì phải khai báo lại được. Tuy nhiên, letvar vẫn có một vài sự khác nhau.

let

Với let, một khi đã khai báo biến, bạn có thể gán lại biến đó nhưng không thể khai báo lại.

let foo = 1; let foo = 2;

sẽ trả về Uncaught SyntaxError: Identifier 'foo' has already been declared

var

Còn với var, bạn có thể khai báo lại biến.

var bar = 1; var bar = 2;

Declaration

Bạn có thể khai báo các biến bằng var sau khi đã gọi chúng.

Ví dụ:

function fncc() { txt = "ABC"; console.log(txt); var txt;
}
fncc()
=> "ABC"

Lý do cho việc này là vì các biến khai báo với var được xử lý lúc hàm bắt đầu chạy, bất kể bạn viết đoạn khai báo đó ở đâu.

Còn nếu bạn khai báo hàm trên và dùng let:

function fnc() { txt = "ABC"; console.log(txt); let txt;
}
fnc()
=> Uncaught ReferenceError: Cannot access 'txt' before initialization

const

Nếu bạn sử dụng ReactJS hoặc ES6, sẽ thấy const được dùng rất nhiều. const được dùng để tạo ra hằng số, bạn không thể khai báo hay gán lại hằng số này. Lưu ý là giống như let, các hằng số được khai báo bằng const cũng chỉ sống trong block scope của nó.

  • Lưu ý: const chỉ ngăn không cho bạn gán lại đối tượng đó, chứ không ngăn việc bạn thay đổi (mutate) nó. Ví dụ:
const arr = [1, 2, 3, 4]
arr[0] = 5
console.log(arr)
=> [5, 2, 3, 4]

Khi nào dùng let, const vs var ?

Nếu bạn đến từ các ngôn ngữ khác, ắt hẳn sẽ nghĩ rằng hầu hết thời gian thì nên dùng let, khi nào cấm khai báo lại thì dùng const và để var vào quá khứ. Tuy nhiên, chính chủ đề này cũng gây ra rất nhiều tranh cãi, nhiều người lại nghĩ là nên dùng const càng nhiều càng tốt, đến mức mà prefer-const được làm thành một quy tắc của ESlint. Các lý do được liệt kê để dùng const như sau:

  • Nhất quán phương pháp
  • Ở các hàm dài, việc gán đi gán lại các biến có thể sinh ra bug
  • Dẫn dắt người mới học về mutation trong javascript
  • Giữ cho các phần gán biến có ý nghĩa
  • Tốc độ chạy

Các lý do được liệt kê để không dùng const như sau:

  • Mất ý nghĩa của hằng số (chỗ nào cũng là hằng thì không biết hằng số sẽ mất đặc tính)
  • Hiểu nhầm việc gán biến và khai báo biến
  • Ở các hàm dài, việc gán đi gán lại các biến chưa chắc đã sinh ra bug

Kết luận được đưa ra ở đây là bạn hãy dùng cách nào phù hợp với phong cách của bạn và nhất quán với convention của nhóm.

Mình xin kết thúc bài viết tại đây. Bạn có thể tham khảo thêm về Javascript tại đâyđây.

Bình luận

Bài viết tương tự

- vừa được xem lúc

Giới thiệu Typescript - Sự khác nhau giữa Typescript và Javascript

Typescript là gì. TypeScript là một ngôn ngữ giúp cung cấp quy mô lớn hơn so với JavaScript.

0 0 528

- vừa được xem lúc

Bạn đã biết các tips này khi làm việc với chuỗi trong JavaScript chưa ?

Hi xin chào các bạn, tiếp tục chuỗi chủ đề về cái thằng JavaScript này, hôm nay mình sẽ giới thiệu cho các bạn một số thủ thuật hay ho khi làm việc với chuỗi trong JavaScript có thể bạn đã hoặc chưa từng dùng. Cụ thể như nào thì hãy cùng mình tìm hiểu trong bài viết này nhé (go).

0 0 436

- vừa được xem lúc

Một số phương thức với object trong Javascript

Trong Javascript có hỗ trợ các loại dữ liệu cơ bản là giống với hầu hết những ngôn ngữ lập trình khác. Bài viết này mình sẽ giới thiệu về Object và một số phương thức thường dùng với nó.

0 0 158

- vừa được xem lúc

Tìm hiểu về thư viện axios

Giới thiệu. Axios là gì? Axios là một thư viện HTTP Client dựa trên Promise.

0 0 149

- vừa được xem lúc

Imports và Exports trong JavaScript ES6

. Giới thiệu. ES6 cung cấp cho chúng ta import (nhập), export (xuất) các functions, biến từ module này sang module khác và sử dụng nó trong các file khác.

0 0 113

- vừa được xem lúc

Bài toán đọc số thành chữ (phần 2) - Hoàn chỉnh chương trình dưới 100 dòng code

Tiếp tục bài viết còn dang dở ở phần trước Phân tích bài toán đọc số thành chữ (phần 1) - Phân tích đề và những mảnh ghép đầu tiên. Bạn nào chưa đọc thì có thể xem ở link trên trước nhé.

0 0 249