Bạn có thể sử dụng let trong JavaScript không?

Trong kỷ nguyên cũ, trước ES6 của JavaScript, các nhà phát triển thường khai báo các biến bằng cách sử dụng từ khóa var hoặc không có bất kỳ từ khóa nào. Nhưng thời gian đã thay đổi

Với ES6 (EcmaScript 2015), khởi đầu của kỷ nguyên hiện đại trong JavaScript, ngôn ngữ này có thêm hai từ khóa mới để giúp chúng ta khai báo các biến. Đây là let và

{
  let name = "alex";
}

0

Trong bài viết này, chúng ta sẽ tìm hiểu về tất cả các từ khóa này (vâng, bao gồm cả var) với các ví dụ và chúng ta sẽ xem khi nào nên sử dụng chúng và khi nào không nên sử dụng chúng

Nếu bạn cũng muốn học từ nội dung video, bài viết này cũng có sẵn dưới dạng video hướng dẫn trên YouTube tại đây. 🙂

Btw, đây là một chủ đề được thảo luận rộng rãi. Sau đó, tại sao viết về nó một lần nữa?

1. Nhiều nhà phát triển thử sử dụng chúng thay thế cho nhau (đặc biệt là let với hai cái còn lại)
2. Đôi khi, bạn có thể nhầm lẫn về mối quan hệ của những từ khóa này với một khái niệm JavaScript cơ bản có tên là

   {
     let name = "alex";
   }
   

   3

Vì vậy, bài viết này nhằm mục đích dạy những từ khóa này trong bối cảnh của ba khái niệm cơ bản. Tôi hy vọng bạn thích đọc nó

Cách khai báo biến trong JavaScript

Trong JavaScript, chúng ta có thể khai báo các biến theo ba cách khác nhau như thế này

// Without keywords. It is essentially the same as var 
// and not allowed in 'strict' mode.
name = 'Jack'; 

// Using var
var price = 100;

// Using let
let isPermanent = false; 

// Using const
const PUBLICATION = 'freeCodeCamp' 

Tốt nhất là khi bạn hiểu var, let, const với 3 khái niệm này

• Phạm vi
• Gán lại một giá trị mới
• Khi bạn truy cập một biến trước khi khai báo nó

Các từ khóa này khác nhau về cách sử dụng đối với các khái niệm này. Hãy xem làm thế nào

Phạm vi biến trong JavaScript

Trong JavaScript, chúng tôi sử dụng phạm vi như một cách để xác định vị trí và liệu chúng tôi có thể sử dụng một biến hay không. Các biến có thể tồn tại bên trong một khối, bên trong một hàm hoặc bên ngoài một hàm và khối

Vì vậy, một khối là gì? . }). Một cái gì đó như thế này

{
  let name = "alex";
}

Mặt khác, một chức năng là một loạt các hướng dẫn mã mà bạn muốn đặt hợp lý với nhau

Thông thường, bạn định nghĩa một hàm bằng cách sử dụng từ khóa

{
  let name = "alex";
}

4 và tên. Chỉ cần lưu ý rằng bạn có thể xác định một chức năng mà không cần tên, mà chúng tôi gọi là

{
  let name = "alex";
}

5. Nhưng chúng ta sẽ không bàn đến điều đó trong bài viết hôm nay vì đơn giản

Đây là một hàm có tên

{
  let name = "alex";
}

6

function test() {
  let name = "alex";
}

Bất cứ thứ gì và mọi thứ bên ngoài một khối hoặc một chức năng chúng ta sẽ gọi là

{
  let name = "alex";
}

7. Vì vậy, khi chúng ta khai báo các biến, chúng có thể tồn tại bên trong một khối, bên trong một hàm hoặc bên ngoài một khối/hàm – nghĩa là chúng có phạm vi toàn cục

Chủ yếu có ba loại phạm vi

• Phạm vi khối
• Phạm vi chức năng
• Phạm vi toàn cầu

Ba từ khóa var, let và

{
  let name = "alex";
}

0 hoạt động xung quanh các phạm vi này. Vì vậy, hãy hiểu làm thế nào mọi thứ phù hợp với nhau

Cách sử dụng các biến JavaScript trong phạm vi khối

Nếu bạn không muốn một biến được khai báo bên trong khối

function test() {
  let name = "alex";
}

1 được truy cập bên ngoài khối, bạn cần khai báo chúng bằng cách sử dụng từ khóa let hoặc

{
  let name = "alex";
}

0. Các biến được khai báo với từ khóa var bên trong khối

function test() {
  let name = "alex";
}

1 cũng có thể truy cập được bên ngoài khối. Vì vậy, hãy cẩn thận

Hãy lấy một ví dụ

{
    let f_name  = 'Alex';
    const ZIP = 500067;
    var age = 25;
}

console.log(f_name); // Uncaught ReferenceError: f_name is not defined
console.log(ZIP);  // Uncaught ReferenceError: ZIP is not defined
console.log(age);  // 25

Như bạn thấy, giá trị của biến age có thể vô tình bị ghi đè và cuối cùng gây ra lỗi. Vì vậy, đạo đức của câu chuyện là,

Không sử dụng từ khóa var bên trong một khối (phạm vi khối). Luôn luôn sử dụng let và

{
  let name = "alex";
}

0 để thay thế

Cách sử dụng các biến JavaScript trong phạm vi chức năng

Một biến được khai báo bên trong hàm sử dụng các từ khóa này không thể truy cập được bên ngoài hàm. Đó là phạm vi chức năng được áp dụng

Đó là sự thật bất kể bạn sử dụng var, let hay const. Bên trong hàm, chúng khá giống nhau trong việc quản lý phạm vi của một biến

Hãy lấy một ví dụ nữa

// f1() is a function

function f1() {
 let f_name = "Alex";
 const ZIP = 560089;
 var age = 25;   
}

f1();

console.log(f_name); // Uncaught ReferenceError: f_name is not defined
console.log(ZIP);  // Uncaught ReferenceError: ZIP is not defined
console.log(age);  // Uncaught ReferenceError: age is not defined

Như bạn thấy ở trên, không có biến nào có thể truy cập được bên ngoài hàm, kể cả

function test() {
  let name = "alex";
}

9 được khai báo bằng cách sử dụng var. Vì vậy, kết luận là,

Biến được khai báo với _____38_______ bên trong một hàm không thể truy cập được bên ngoài nó. Từ khóa var có chức năng-phạm vi

Cách sử dụng các biến JavaScript trong phạm vi toàn cầu

Các biến được khai báo bên ngoài bất kỳ chức năng và khối nào là

{
    let f_name  = 'Alex';
    const ZIP = 500067;
    var age = 25;
}

console.log(f_name); // Uncaught ReferenceError: f_name is not defined
console.log(ZIP);  // Uncaught ReferenceError: ZIP is not defined
console.log(age);  // 25

3 và được cho là có ____13_______4. Điều này có nghĩa là bạn có thể truy cập chúng từ bất kỳ phần nào của chương trình JavaScript hiện tại

Bạn có thể sử dụng var, let và

{
  let name = "alex";
}

0 để khai báo các biến toàn cục. Nhưng bạn không nên làm điều đó quá thường xuyên

let f_name = "Alex";
 const ZIP = 560089;
 var age = 25;  

// f1() is a function
function f1() {
  console.log(f_name); // Alex
  console.log(ZIP);  // 560089
  console.log(age);  // 25
}

f1();

console.log(f_name); // Alex
console.log(ZIP);  // 560089
console.log(age);  // 25

Như bạn thấy, các biến có thể truy cập được ở mọi nơi

Vì vậy, để hạn chế phạm vi của một biến bằng cách sử dụng các từ khóa var, let và

{
  let name = "alex";
}

0, đây là thứ tự khả năng truy cập trong phạm vi bắt đầu từ mức thấp nhất

• var. Mức phạm vi chức năng
• let. Mức phạm vi khối

• {
    let name = "alex";
  }
  

  0. Mức phạm vi khối

Hình ảnh bên dưới hiển thị sơ đồ tư duy của ba từ khóa này với tham chiếu đến các phạm vi khác nhau

Hãy chuyển sang khái niệm tiếp theo để hiểu ba từ khóa này ảnh hưởng như thế nào đến hành vi của mã khi chúng ta gán lại một giá trị mới cho một biến

Cách gán lại giá trị mới cho một biến trong JavaScript

Khi bạn đã khai báo một biến với var hoặc let, bạn có thể gán lại một giá trị mới cho biến đó trong quy trình lập trình của mình. Có thể nếu biến có thể truy cập để gán giá trị. Nhưng với

{
  let name = "alex";
}

0, bạn hoàn toàn không thể gán lại một giá trị mới

// Declare variables with initial values
let f_name = "Alex";
const ZIP = 560089;
var age = 25;

// Reassign values
f_name = "Bob"; // the f_name value is 'Bob"
ZIP = 65457; // Uncaught TypeError: Assignment to constant variable.
age = 78; // the age value is 78

Có một phần phức tạp với

{
  let name = "alex";
}

0 mà bạn phải biết. Khi một đối tượng được khai báo và gán giá trị bằng

{
  let name = "alex";
}

0, bạn vẫn có thể thay đổi giá trị bằng ____15_______9 của đối tượng đó. Nhưng bạn không thể gán lại giá trị đối tượng khác cho cùng một biến. Đây là một lỗi phổ biến mà nhiều nhà phát triển mắc phải

Kiểm tra ví dụ ở đây

const blog = {
    'url': 'https://greenroots.info'
}

blog.url = 'https://blog.greenroots.info"; //Allowed

blog = {}; // Uncaught TypeError: Assignment to constant variable.

Dưới đây là sơ đồ tư duy giúp bạn nắm được cách thức hoạt động của việc gán lại cho các biến được khai báo bằng 3 từ khóa này

Điều gì xảy ra khi bạn truy cập một biến trước khi khai báo nó trong JavaScript

Là một lập trình viên thực dụng, bạn không bao giờ nên thử truy cập một biến mà không khai báo nó. Nhưng trong trường hợp điều đó xảy ra, hãy xem biến có thể hoạt động như thế nào

Với var ở chế độ không nghiêm ngặt, biến sẽ có giá trị

let f_name = "Alex";
 const ZIP = 560089;
 var age = 25;  

// f1() is a function
function f1() {
  console.log(f_name); // Alex
  console.log(ZIP);  // 560089
  console.log(age);  // 25
}

f1();

console.log(f_name); // Alex
console.log(ZIP);  // 560089
console.log(age);  // 25

1. Điều này có nghĩa là một biến đã được khai báo nhưng chưa được gán giá trị

Ở chế độ nghiêm ngặt, bạn sẽ nhận được thông báo

let f_name = "Alex";
 const ZIP = 560089;
 var age = 25;  

// f1() is a function
function f1() {
  console.log(f_name); // Alex
  console.log(ZIP);  // 560089
  console.log(age);  // 25
}

f1();

console.log(f_name); // Alex
console.log(ZIP);  // 560089
console.log(age);  // 25

2 rằng biến không được khai báo

Với let và

{
  let name = "alex";
}

0, nếu bạn cố gắng truy cập vào một biến trước khi khai báo, bạn sẽ luôn nhận được một biến

let f_name = "Alex";
 const ZIP = 560089;
 var age = 25;  

// f1() is a function
function f1() {
  console.log(f_name); // Alex
  console.log(ZIP);  // 560089
  console.log(age);  // 25
}

f1();

console.log(f_name); // Alex
console.log(ZIP);  // 560089
console.log(age);  // 25

2

Đây là một sơ đồ tư duy một lần nữa để giúp bạn hiểu nó một cách trực quan. Trong sơ đồ tư duy, _______ 38 _______ được mô tả cho chế độ không nghiêm ngặt

Đó là tất cả, bạn bè của tôi. Bạn cần xem xét các tình huống và khái niệm này để đánh giá cách var, let và

{
  let name = "alex";
}

0 cư xử. Vì vậy, quy tắc đi

• Đừng dùng var nữa
• Sử dụng let hoặc

  {
    let name = "alex";
  }
  

  0
• Sử dụng

  {
    let name = "alex";
  }
  

  0 thường xuyên hơn. Sử dụng let khi bạn cần gán lại một giá trị khác cho một biến
• Đừng cố truy cập một biến mà không khai báo nó

Trước Khi Chúng Ta Kết Thúc

Đó là câu chuyện đằng sau let,

{
  let name = "alex";
}

0 và var. Tôi hy vọng bạn tìm thấy bài viết sâu sắc và nhiều thông tin. Tin nhắn trực tiếp của tôi mở vào ngày

// Declare variables with initial values
let f_name = "Alex";
const ZIP = 560089;
var age = 25;

// Reassign values
f_name = "Bob"; // the f_name value is 'Bob"
ZIP = 65457; // Uncaught TypeError: Assignment to constant variable.
age = 78; // the age value is 78

8 nếu bạn muốn thảo luận thêm

Hãy kết nối. Tôi cũng chia sẻ kiến ​​thức của mình về JavaScript, Phát triển Web và Viết blog trên các nền tảng này

• Theo dõi tôi trên Twitter
• Đăng ký kênh YouTube của tôi
• Các dự án phụ trên GitHub

Hẹn gặp lại bạn với bài viết tiếp theo của tôi. Cho đến lúc đó, hãy chăm sóc bản thân và luôn vui vẻ nhé.

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

---

QUẢNG CÁO TAPAS

nhà văn. YouTuber. Người sáng tạo. Người hướng dẫn

---

Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn

Học cách viết mã miễn phí. Chương trình giảng dạy mã 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

Let có cần thiết trong JavaScript không?

Let có giống với VAR trong JavaScript không?

Tôi có thể sử dụng var thay vì let không?

Làm cách nào để sử dụng let và const trong JavaScript?