Vấn đề với var trong JavaScript là gì?

Tất cả chúng ta đều bắt đầu từ đâu đó. Tôi đã học JavaScript khai báo biến với từ khóa var. Nó đơn giản và hiệu quả, nhưng tôi đã thay đổi

Nếu bạn viết mã như var x = 5, bạn cần dừng lại. Chà, tôi sẽ thành thật mà nói, bạn không cần phải làm vậy, nhưng bạn nên

Chúng ta thường nghĩ về ngôn ngữ lập trình như một bộ quy tắc khắc trong đá. Thực tế là một ngôn ngữ lập trình - giống như bất kỳ ngôn ngữ nói nào - không ngừng phát triển

Bây giờ tôi sử dụng các từ khóa const và

const myFunction = (x,y) => {
  // Do stuff
}myFunction(1,2)

0 để khai báo tất cả các biến của mình trong JavaScript và bạn cũng vậy

Hãy tìm hiểu cách thức và lý do

Khai báo hằng đúng

Một biến, theo tên, xác định một giá trị thay đổi. Mặc dù không nhất thiết có gì sai khi khai báo và không chạm vào một biến, nhưng nếu chúng ta đang cố gắng viết mã có ý nghĩa ngữ nghĩa thì chúng ta nên phân biệt giữa biến và hằng

Hằng đối lập với biến, giá trị đã khai báo không thay đổi. Trong lịch sử, để định nghĩa một hằng số, chúng ta sử dụng tất cả các chữ in hoa, giống như màu sắc tươi sáng trên một con vật độc hại

Thay vì dựa vào quy ước, việc giới thiệu từ khóa const cho chúng ta một tùy chọn rõ ràng để khai báo điều không thay đổi

Để sử dụng từ khóa const, chỉ cần hoán đổi nó với var và bây giờ giá trị đó không thể sửa đổi được

// the old way
// var sales_tax = 0.06;// the new way
const sales_tax = 0.06;sales_tax = 0.08; // "TypeError: Assignment to constant variable.

Việc thực hiện đơn giản, lý do đơn giản. Sử dụng const là điều dễ hiểu. Nhưng khi nào điều này là thích hợp?

Các tỷ lệ số như thuế suất hoặc chuyển đổi giữa các đơn vị là những lựa chọn dễ dàng. Một nơi khác bạn sẽ thấy const đang được sử dụng là khai báo các hàm bằng cách sử dụng ký hiệu mũi tên

const myFunction = (x,y) => {
  // Do stuff
}myFunction(1,2)

Bây giờ chức năng của bạn không thể bị ghi đè

Sửa lỗi Quirky Scope của JavaScript

JavaScript bị thiếu sự rõ ràng về phạm vi thường dẫn đến sự thất vọng khi phát triển và khắc phục sự cố. Dưới đây là tóm tắt về các điểm kỳ lạ trong phạm vi JS

• có thể sử dụng var hai lần với một biến (khai báo lại)
• các biến cấp cao nhất là toàn cục theo mặc định (đối tượng toàn cục)
• các biến có thể được sử dụng trước khi được khai báo (hoisting)
• các biến trong các vòng lặp được sử dụng lại cùng một tham chiếu (bao đóng)

Sử dụng

const myFunction = (x,y) => {
  // Do stuff
}myFunction(1,2)

0 làm rõ và giải quyết nhiều điều kỳ lạ này. Hãy xem xét kỹ hơn

khai báo lại

Cái này đơn giản thôi, bạn không thể khai báo lại một biến đã được tạo bằng ________0

var x = 0;
let y = 0;var x = 1;
let y = 1; // "SyntaxError: Identifier 'y' has already been declared

đối tượng toàn cầu

Ở cấp cao nhất, các biến được khai báo với ____18_______ được thêm vào đối tượng toàn cầu dưới dạng thuộc tính trong khi các biến ___________0 thì không

var x = 0;
let y = 0;console.log(window.x); // 0
console.log(window.y); // undefined

cẩu

Các biến được xác định bằng

const myFunction = (x,y) => {
  // Do stuff
}myFunction(1,2)

0 chỉ có thể truy cập được bên trong phạm vi khối của chúng trong khi các biến var được nâng lên cấp hàm

// Using var
console.log(i);  // undefined
for(var i=0; i<4; i++) {
  console.log(i);
}
console.log(i); // 4// Using let
console.log(j); // "ReferenceError: j is not defined
for(let j=0; j<4; j++) {
  console.log(j);
}
console.log(j); // "ReferenceError: j is not defined

đóng cửa

Cái này khó hiểu nếu nó là một khái niệm mới, nhưng bao đóng là một hàm tham chiếu đến một biến tự do

Khi chúng ta có một bao đóng với biến var, tham chiếu sẽ được ghi nhớ, điều này có thể gây rắc rối khi bên trong một vòng lặp mà biến đó thay đổi

var functions = [];for (var i = 0; i < 3; i++) {
  functions[i] = () => { console.log(i); };
}
for (var j = 0; j < 3; j++) {
  functions[j]();
}// 3 3 3

Sử dụng

const myFunction = (x,y) => {
  // Do stuff
}myFunction(1,2)

0, một tham chiếu mới được tạo mỗi lần

var functions = [];
for (let i = 0; i < 3; i++) {
  functions[i] = () => { console.log(i); };
}
for (var j = 0; j < 3; j++) {
  functions[j]();
}// 0 1 2

Cuối cùng, ngay cả khi bạn không hiểu 100% về những lý do này và lý do tại sao chúng hoạt động theo cách chúng làm, thì việc chuyển sang

const myFunction = (x,y) => {
  // Do stuff
}myFunction(1,2)

0 sẽ dẫn đến mã rõ ràng hơn, hoạt động nhất quán và sẽ dễ dàng khắc phục sự cố/bảo trì hơn

Một lời cảnh báo

Mặc dù

const myFunction = (x,y) => {
  // Do stuff
}myFunction(1,2)

0 và const nên thay thế hiệu quả từ khóa var, nhưng cuộc sống không phải lúc nào cũng đơn giản như vậy. Vì những từ khóa này đã được giới thiệu trong ECMAScript 2015 (ES6), nếu nền tảng bạn làm việc không cho phép nó thì bạn không gặp may. Ngoài ra, bạn sẽ muốn đảm bảo rằng bạn thực hiện các bước để đảm bảo mã của bạn hoạt động trên các trình duyệt của đối tượng mục tiêu của bạn

Bạn vẫn thấy mình đang sử dụng

var x = 0;
let y = 0;var x = 1;
let y = 1; // "SyntaxError: Identifier 'y' has already been declared

9 chứ?

Tại sao sử dụng var trong JavaScript lại không tốt?

Sử dụng var trong js có ổn không?

Nhược điểm của việc sử dụng var để khai báo một biến là gì?

Các vấn đề phạm vi gây ra bởi VAR là gì?