Hướng dẫn when to use let and const in javascript? - khi nào sử dụng let và const trong javascript?

Hướng dẫn when to use let and const in javascript? - khi nào sử dụng let và const trong javascript?

Rất nhiều tính năng mới sáng bóng đã xuất hiện với ES2015 (ES6). Và bây giờ, kể từ năm 2020, người ta cho rằng rất nhiều nhà phát triển JavaScript đã làm quen và đã bắt đầu sử dụng các tính năng này.

Mặc dù giả định này có thể đúng một phần, nhưng vẫn có thể một số tính năng này vẫn là một bí ẩn đối với một số nhà phát triển.

Một trong những tính năng đi kèm với ES6 là bổ sung

    var tester = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined
6 và
    var tester = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined
7, có thể được sử dụng để khai báo biến. Câu hỏi đặt ra là, điều gì làm cho chúng khác với ol '
    var tester = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined
8 mà chúng ta đã sử dụng? Nếu bạn vẫn chưa rõ về điều này, thì bài viết này là dành cho bạn.

Trong bài viết này, chúng tôi sẽ thảo luận về

    var tester = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined
8,
    var tester = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined
6 và
    var tester = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined
7 & nbsp; đối với phạm vi, sử dụng và nâng cao của chúng. Khi bạn đọc, hãy lưu ý về sự khác biệt giữa chúng mà tôi sẽ chỉ ra.

Trước sự ra đời của ES6, tuyên bố

    var tester = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined
8 đã cai trị. Mặc dù vậy, có những vấn đề liên quan đến các biến được khai báo với
    var tester = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined
8. Đó là lý do tại sao nó cần thiết cho những cách mới để khai báo các biến xuất hiện. Đầu tiên, chúng ta hãy hiểu
    var tester = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined
8 hơn trước khi chúng ta thảo luận về những vấn đề đó.

Phạm vi của var

Phạm vi về cơ bản có nghĩa là nơi các biến này có sẵn để sử dụng. Các tuyên bố

    var tester = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined
8 được phạm vi toàn cầu hoặc chức năng/phạm vi cục bộ. essentially means where these variables are available for use.
    var tester = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined
8 declarations are globally scoped or function/locally scoped.

Phạm vi là toàn cầu khi biến

    var tester = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined
8 được khai báo bên ngoài hàm. Điều này có nghĩa là bất kỳ biến nào được khai báo với
    var tester = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined
8 bên ngoài một khối hàm có sẵn để sử dụng trong toàn bộ cửa sổ.

    var tester = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined
8 là chức năng phạm vi khi nó được khai báo trong một hàm. Điều này có nghĩa là nó có sẵn và chỉ có thể được truy cập trong chức năng đó.

Để hiểu thêm, hãy nhìn vào ví dụ dưới đây.

    var greeter = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }

Ở đây,

    var greeter = "hey hi";
    var greeter = "say Hello instead";
9 được phạm vi toàn cầu vì nó tồn tại bên ngoài một hàm trong khi
    var greeter = "hey hi";
    greeter = "say Hello instead";
0 là chức năng phạm vi. Vì vậy, chúng tôi không thể truy cập biến
    var greeter = "hey hi";
    greeter = "say Hello instead";
0 bên ngoài hàm. Vì vậy, nếu chúng ta làm điều này:

    var tester = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined

Chúng tôi sẽ gặp lỗi do

    var greeter = "hey hi";
    greeter = "say Hello instead";
0 không có sẵn bên ngoài chức năng.

Các biến VAR có thể được khai báo lại và cập nhật

Điều này có nghĩa là chúng ta có thể làm điều này trong cùng một phạm vi và sẽ không gặp lỗi.

    var greeter = "hey hi";
    var greeter = "say Hello instead";

Và điều này cũng

    var greeter = "hey hi";
    greeter = "say Hello instead";

Nâng var var

Tăng cường là một cơ chế JavaScript trong đó các biến và khai báo chức năng được chuyển lên đầu phạm vi của chúng trước khi thực hiện mã. Điều này có nghĩa là nếu chúng ta làm điều này:

    console.log (greeter);
    var greeter = "say hello"

Nó được giải thích như thế này:

    var greeter;
    console.log(greeter); // greeter is undefined
    greeter = "say hello"

Vì vậy, các biến

    var tester = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined
8 được nâng lên đỉnh phạm vi của chúng và được khởi tạo với giá trị
    var greeter = "hey hi";
    greeter = "say Hello instead";
4.

Vấn đề với var

Có một điểm yếu đi kèm với & nbsp; ________ 18. Tôi sẽ sử dụng ví dụ dưới đây để giải thích:

    var greeter = "hey hi";
    var times = 4;

    if (times > 3) {
        var greeter = "say Hello instead"; 
    }
    
    console.log(greeter) // "say Hello instead"

Vì vậy, vì

    var greeter = "hey hi";
    greeter = "say Hello instead";
6 trả về đúng,
    var greeter = "hey hi";
    var greeter = "say Hello instead";
9 được xác định lại & nbsp; đến
    var greeter = "hey hi";
    greeter = "say Hello instead";
8. Mặc dù đây không phải là vấn đề nếu bạn cố tình muốn
    var greeter = "hey hi";
    var greeter = "say Hello instead";
9 được xác định lại, nhưng nó sẽ trở thành một vấn đề khi bạn không nhận ra rằng một biến
    var greeter = "hey hi";
    var greeter = "say Hello instead";
9 đã được xác định trước đó.

Nếu bạn đã sử dụng

    var greeter = "hey hi";
    var greeter = "say Hello instead";
9 trong các phần khác trong mã của mình, bạn có thể ngạc nhiên về đầu ra mà bạn có thể nhận được. Điều này có thể sẽ gây ra rất nhiều lỗi trong mã của bạn. Đây là lý do tại sao
    var tester = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined
6 và
    var tester = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined
7 là cần thiết.

Để cho

    var tester = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined
6 hiện được ưa thích cho khai báo biến. Không có gì ngạc nhiên khi nó là một cải tiến cho các tuyên bố
    var tester = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined
8. Nó cũng giải quyết vấn đề với
    var tester = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined
8 mà chúng tôi vừa đề cập. Hãy xem xét tại sao điều này là như vậy.

Đặt phạm vi khối

Một khối là một đoạn mã giới hạn bởi {}. Một khối sống trong niềng răng xoăn. Bất cứ điều gì trong niềng răng xoăn là một khối.

Vì vậy, một biến được khai báo trong một khối với

    var tester = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined
6 & nbsp; chỉ có sẵn để sử dụng trong khối đó. Hãy để tôi giải thích điều này với một ví dụ:

   let greeting = "say Hi";
   let times = 4;

   if (times > 3) {
        let hello = "say Hello instead";
        console.log(hello);// "say Hello instead"
    }
   console.log(hello) // hello is not defined

Chúng tôi thấy rằng sử dụng

    var greeter = "hey hi";
    greeter = "say Hello instead";
0 bên ngoài khối của nó (niềng răng xoăn nơi nó được xác định) trả về một lỗi. Điều này là do các biến
    var tester = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined
6 là phạm vi khối.

Có thể cập nhật nhưng không được khai báo lại.

Giống như

    var tester = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined
8, & nbsp; một biến được khai báo với
    var tester = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined
6 có thể được cập nhật trong phạm vi của nó. Không giống như
    var tester = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined
8, biến
    var tester = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined
6 không thể được khai báo lại trong phạm vi của nó. Vì vậy, trong khi điều này sẽ hoạt động:

    let greeting = "say Hi";
    greeting = "say Hello instead";

Điều này sẽ trả về một lỗi:

    let greeting = "say Hi";
    let greeting = "say Hello instead"; // error: Identifier 'greeting' has already been declared

Tuy nhiên, nếu cùng một biến được xác định trong các phạm vi khác nhau, sẽ không có lỗi:

    var tester = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined
0

Tại sao không có lỗi? Điều này là do cả hai trường hợp được coi là các biến khác nhau vì chúng có phạm vi khác nhau.

Thực tế này làm cho

    var tester = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined
6 là một lựa chọn tốt hơn so với
    var tester = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined
8. Khi sử dụng
    var tester = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined
6, bạn không cần phải bận tâm nếu bạn đã sử dụng tên cho một biến trước đây vì một biến chỉ tồn tại trong phạm vi của nó.

Ngoài ra, vì một biến không thể được khai báo nhiều lần trong phạm vi, nên vấn đề được thảo luận trước đó xảy ra với

    var tester = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined
8 không xảy ra.

Nâng cấp cho

Giống như & nbsp; ________ 18,

    var tester = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined
6 Tuyên bố được nâng lên hàng đầu. Không giống như
    var tester = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined
8 được khởi tạo là
    var greeter = "hey hi";
    greeter = "say Hello instead";
4, từ khóa
    var tester = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined
6 không được khởi tạo. Vì vậy, nếu bạn cố gắng sử dụng biến
    var tester = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined
6 trước khi khai báo, bạn sẽ nhận được
    var greeter = "hey hi";
    var times = 4;

    if (times > 3) {
        var greeter = "say Hello instead"; 
    }
    
    console.log(greeter) // "say Hello instead"
4.

Hằng số

Các biến được khai báo với

    var tester = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined
7 duy trì các giá trị không đổi.
    var tester = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined
7 Tuyên bố chia sẻ một số điểm tương đồng với khai báo
    var tester = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined
6.

Tuyên bố const là phạm vi khối

Giống như các khai báo

    var tester = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined
6, các khai báo
    var tester = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined
7 chỉ có thể được truy cập trong khối mà chúng được khai báo.

const không thể được cập nhật hoặc tuyên bố lại

Điều này có nghĩa là giá trị của một biến được khai báo với

    var tester = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined
7 vẫn giữ nguyên trong phạm vi của nó. Nó không thể được cập nhật hoặc tuyên bố lại. Vì vậy, nếu chúng tôi khai báo một biến với
    var tester = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined
7, chúng tôi không thể làm điều này:

    var tester = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined
1

Cũng không phải điều này:

    var tester = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined
2

Mỗi tuyên bố

    var tester = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined
7, do đó, phải được khởi tạo tại thời điểm khai báo.

Hành vi này bằng cách nào đó khác nhau khi nói đến các đối tượng được tuyên bố với

    var tester = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined
7. Mặc dù đối tượng
    var tester = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined
7 không thể được cập nhật, các thuộc tính của các đối tượng này có thể được cập nhật. Do đó, nếu chúng ta khai báo một đối tượng
    var tester = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined
7 như thế này:

    var tester = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined
3

Trong khi chúng ta không thể làm điều này:

    var tester = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined
4

chung ta co thể lam được việc nay:

    var tester = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined
5

Điều này sẽ cập nhật giá trị của

   let greeting = "say Hi";
   let times = 4;

   if (times > 3) {
        let hello = "say Hello instead";
        console.log(hello);// "say Hello instead"
    }
   console.log(hello) // hello is not defined
6 mà không phải trả lại lỗi.

Nâng cao const

Giống như

    var tester = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined
6,
    var tester = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined
7 Tuyên bố được nâng lên trên cùng nhưng không được khởi tạo.

Vì vậy, chỉ trong trường hợp bạn bỏ lỡ sự khác biệt, đây là:

  • Các khai báo
        var tester = "hey hi";
        
        function newFunction() {
            var hello = "hello";
        }
        console.log(hello); // error: hello is not defined
    
    8 được phạm vi toàn cầu hoặc chức năng được phân chia trong khi
        var tester = "hey hi";
        
        function newFunction() {
            var hello = "hello";
        }
        console.log(hello); // error: hello is not defined
    
    6 và
        var tester = "hey hi";
        
        function newFunction() {
            var hello = "hello";
        }
        console.log(hello); // error: hello is not defined
    
    7 được phân chia khối.
  •     var tester = "hey hi";
        
        function newFunction() {
            var hello = "hello";
        }
        console.log(hello); // error: hello is not defined
    
    8 Các biến có thể được cập nhật và khai báo lại trong phạm vi của nó;
        var tester = "hey hi";
        
        function newFunction() {
            var hello = "hello";
        }
        console.log(hello); // error: hello is not defined
    
    6 Biến có thể được cập nhật nhưng không được khai báo lại;
        var tester = "hey hi";
        
        function newFunction() {
            var hello = "hello";
        }
        console.log(hello); // error: hello is not defined
    
    7 Các biến không thể được cập nhật cũng như không được khai báo.
  • Họ đều được nâng lên đỉnh phạm vi của họ. Nhưng trong khi các biến
        var tester = "hey hi";
        
        function newFunction() {
            var hello = "hello";
        }
        console.log(hello); // error: hello is not defined
    
    8 được khởi tạo với các biến
        var greeter = "hey hi";
        greeter = "say Hello instead";
    
    4,
        var tester = "hey hi";
        
        function newFunction() {
            var hello = "hello";
        }
        console.log(hello); // error: hello is not defined
    
    6 và
        var tester = "hey hi";
        
        function newFunction() {
            var hello = "hello";
        }
        console.log(hello); // error: hello is not defined
    
    7 không được khởi tạo.
  • Trong khi
        var tester = "hey hi";
        
        function newFunction() {
            var hello = "hello";
        }
        console.log(hello); // error: hello is not defined
    
    8 và
        var tester = "hey hi";
        
        function newFunction() {
            var hello = "hello";
        }
        console.log(hello); // error: hello is not defined
    
    6 có thể được khai báo mà không được khởi tạo,
        var tester = "hey hi";
        
        function newFunction() {
            var hello = "hello";
        }
        console.log(hello); // error: hello is not defined
    
    7 phải được khởi tạo trong quá trình khai báo.

Có bất kỳ câu hỏi hoặc bổ sung? Làm ơn cho tôi biết.

Cảm ơn bạn đã đọc :)



Học mã miễn phí. Chương trình giảng dạy nguồn mở của Freecodecamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

Tại sao chúng ta sử dụng const và để trong JavaScript?

Các khai báo VAR được phạm vi toàn cầu hoặc chức năng phạm vi trong khi LET và const được phân chia khối. Các biến VAR có thể được cập nhật và khai báo lại trong phạm vi của nó; Để các biến có thể được cập nhật nhưng không được khai báo lại; Các biến const không thể được cập nhật cũng như không được khai báo. Họ đều được nâng lên đỉnh phạm vi của họ.. var variables can be updated and re-declared within its scope; let variables can be updated but not re-declared; const variables can neither be updated nor re-declared. They are all hoisted to the top of their scope.

Sự khác biệt giữa LET và const trong JavaScript là gì?

Giải thích: Trong tab VAR và LET, khi bạn chạy mã, bạn sẽ thấy rằng không có lỗi và chúng ta có thể xác định các giá trị mới cho var và cho các biến.Trong tab Const, khi bạn chạy mã, bạn sẽ gặp lỗi vì giá trị biến Const không thể được chỉ định lại.

Sự khác biệt giữa LET & const là gì?

Giới thiệu về sự khác biệt giữa VAR, LET và const ở đây nếu chúng ta sẽ khai báo một biến VAR hoặc biến cho phép, thì nó có thể được cập nhật, nhưng nếu chúng ta khai báo một biến const, nó sẽ không được cập nhật trong mọi trường hợp và sẽ hoạt động tốt vớiChức năng của chúng tôi.if we will declare a var variable or let variable, then it can be updated, but if we declare a const variable, it will not be updated in any case and will work fine with our function.

Cái nào nhanh hơn cho hoặc const?

Rõ ràng, hiệu suất khôn ngoan trên Chrome, hãy để phạm vi toàn cầu là chậm nhất, trong khi hãy để trong một khối nhanh nhất, và const cũng vậy.Trước hết, các bài kiểm tra điểm chuẩn đã nói ở trên được thực hiện bằng cách chạy vòng lặp 1000 x 30 lần và thao tác được thực hiện trong vòng lặp đang nối thêm giá trị cho một mảng.let inside a block is fastest, and so is const. First of all, the aforementioned benchmark tests are performed by running a loop 1000 x 30 times and the operation performed in the loop was appending a value to an array.