Là một người mới bắt đầu học JavaScript, có lẽ bạn đã học cách khai báo các biến và gán giá trị. Trong thời kỳ 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 thế đã thay đổi! Với ES6 (EcmaScript 2015), sự khởi đầu của kỷ nguyên hiện đại trong

Bạn đang xem: sử dụng let in javascript

Là một người mới bắt đầu JavaScript, bạn có thể đã học cách khai báo biến và gán giá trị.

Trong thời kỳ 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 thế đã thay đổi!

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

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 ) cùng 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, thì 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 lại viết về nó? Chà, những từ khóa này có thể khó học vì:

  1. Nhiều nhà phát triển cố gắng sử dụng chúng thay thế cho nhau (đặc biệt là let với hai từ 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 khái niệm JavaScript cơ bản được gọi là Phạm vi .

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 thiết yếu. Tôi hy vọng bạn sẽ thích đọc nó.

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

Trong JavaScript, chúng ta có thể khai báo biến trong ba cách khác nhau như sau:

  // Không có từ khóa. Về cơ bản nó giống với var
// và không được phép ở chế độ 'nghiêm ngặt'.
tên = 'Jack';

// Sử dụng var
giá var = 100;

// Sử dụng let
let isPermanent = false;

// Sử dụng const
const PUBLICATION = 'freeCodeCamp'
 

Tốt nhất bạn nên hiểu var, let và const với ba khái niệm sau:

  • 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.

Variable Scope trong JavaScript

Trong JavaScript, chúng tôi sử dụng scope 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ậy khối là gì? Một khối (nghĩa là một khối mã) là một phần của mã chúng ta xác định bằng một cặp ngoặc nhọn s ({…}). Một cái gì đó như thế này:

  {
  để tên = "alex";
}
 

Mặt khác, một hàm là một loạt các lệnh mã mà bạn muốn đặt cùng nhau một cách hợp lý.

Thông thường, bạn xác định một hàm bằng cách sử dụng từ khóa function và tên. Chỉ cần lưu ý rằng bạn có thể xác định một hàm mà không có tên, mà chúng tôi gọi là hàm ẩn danh . Nhưng chúng ta sẽ không thảo luận điều đó trong bài viết hôm nay để đơn giản hơn.

Xem Thêm  Hướng dẫn sử dụng dịch vụ web SOAP: Giao thức SOAP là gì? THÍ DỤ - phong bì xà phòng là gì

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

  hàm kiểm tra () {
  để tên = "alex";
}
 

Mọi thứ và mọi thứ bên ngoài một khối hoặc một hàm mà chúng tôi sẽ gọi là Global . Vì vậy, khi chúng ta khai báo các biến, chúng có thể tồn tại 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: < / p>

  • 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 const hoạt động xung quanh các phạm vi này. Vì vậy, hãy hiểu cách mọi thứ khớ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 {} đượ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 let hoặc từ khóa const . Các biến được khai báo với từ khóa var bên trong khối {} 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 tuổi = 25;
}

console.log (f_name); // Uncaught ReferenceError: f_name không được định nghĩa
console.log (ZIP); // Uncaught ReferenceError: ZIP không được xác định
console.log (tuổi); // 25  

Như bạn thấy, giá trị của biến độ tuổi có thể vô tình bị ghi đè và cuối cùng tạo ra một lỗi. Vì vậy, đạo lý 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 sử dụng let const .

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

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

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 lại một ví dụ:

  // f1 () là một chức năng

hàm f1 () {
 let f_name = "Alex";
 const ZIP = 560089;
 var tuổi = 25;
}

f1 ();

console.log (f_name); // Uncaught ReferenceError: f_name không được định nghĩa
console.log (ZIP); // Uncaught ReferenceError: ZIP không được xác định
console.log (tuổi); // Uncaught ReferenceError: age không được định nghĩa  

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, thậm chí cả age được khai báo bằng cách sử dụng var . Vì vậy, kết luận là,

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

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

Các biến được khai báo bên ngoài bất kỳ hàm và khối nào đều là global và được cho là có Global Scope . Đ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 const để 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 tuổi = 25;

// f1 () là một hàm
hàm f1 () {
  console.log (f_name); // Alex
  console.log (ZIP); // 560089
  console.log (tuổi); // 25
}

f1 ();

console.log (f_name); // Alex
console.log (ZIP); // 560089
console.log (tuổi); // 25  

Như bạn thấy, các biến có thể truy cập ở 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 const , đây là thứ tự khả năng truy cập trong phạm vi bắt đầu bằng mức thấp nhất:

  • var : Mức phạm vi chức năng
  • let : Khối cấp phạm vi
  • const : Cấp 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. < / p> 28

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 tôi gán lại giá trị mới cho một biến.

Cách Gán lại Giá trị Mới cho 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 giá trị mới cho biến thể trong quy trình lập trình của bạn. Có thể thực hiện được nếu biến có thể truy cập được để gán giá trị. Nhưng với const , bạn không thể gán lại giá trị mới.

  // Khai báo các biến với các giá trị ban đầu
let f_name = "Alex";
const ZIP = 560089;
var tuổi = 25;

// Gán lại giá trị
f_name = "Bob"; // giá trị f_name là 'Bob "
ZIP = 65457; // Uncaught TypeError: Gán cho biến hằng.
tuổi = 78; // giá trị tuổi là 78 ​​ 

Có một phần khó khăn với cost mà bạn phải lưu ý. Khi một đối tượng được khai báo và gán giá trị bằng const , bạn vẫn có thể thay đổi giá trị của các thuộc tính của nó. Nhưng bạn không thể gán lại một giá trị đối tượng khác cho cùng một biến. Đây là lỗi phổ biến mà nhiều nhà phát triển mắc phải.

Hãy xem ví dụ ở đây:

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

blog.url = 'https://blog.greenTHER.info "; // Được phép

blog = {}; // Uncaught TypeError: Gán cho biến hằng số.  

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

29 -1

Điều gì sẽ 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 vào một biến mà không khai báo nó. Nhưng trong trường hợp nó 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ị không xác định . Điều này có nghĩa là một biến đã được khai báo nhưng không có giá trị nào được gán.

Ở chế độ nghiêm ngặt, bạn sẽ nhận được ReferenceError mà biến không được khai báo.

Với let const , nếu bạn cố gắng truy cập một biến trước khi khai báo, bạn sẽ luôn nhận được ReferenceError .

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

30

Đó là tất cả, các bạn của tôi. Bạn cần xem xét các trường hợp và khái niệm này để đánh giá cách hoạt động của var , let const . Vì vậy, quy tắc là:

  • Không sử dụng var nữa.
  • Sử dụng let hoặc const .
  • Sử dụng const 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 vào một biến mà không khai báo.

Before We End ...

Đó là câu chuyện đằng sau let , const var . Tôi hy vọng bạn tìm thấy bài viết sâu sắc và thông tin. DM của tôi được mở trên Twitter nếu bạn muốn thảo luận thêm.

Hãy kết nối. Tôi chia sẻ những 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:

Hẹn gặp lại các bạn trong 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 hạnh phúc.


Xem thêm những thông tin liên quan đến chủ đề sử dụng let in javascript

Sử Dụng Cho Đúng Javascript Var, Let, Const | Justin Nguyen

alt

  • Tác giả: Justin Nguyen
  • Ngày đăng: 2021-08-14
  • Đánh giá: 4 ⭐ ( 6169 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Chào mừng các bạn đến với series video Học Javascript qua Ví Dụ, chủ đề về khai báo biến cho đúng trong javascript ES6+

    Nội dung video:
    🟢 0:38 Sử dụng VAR
    🟢 2:06 Sử dụng LET
    🟢 3:20 Sử dụng CONST

    ♥️ Xem toàn bộ series Học Javascript Qua Ví Dụ: https://www.youtube.com/watch?v=QXwotZn5WrY&list=PL80CNtS5d8_yEuis6Cc4xTnNB4ePE5obx

    ♥️ Xem toàn bộ video trong series Học Javascript Qua Khái Niệm: https://www.youtube.com/watch?v=61rUGyUiw8U&list=PL80CNtS5d8_ytV3Jq5RSH3luyT3qGd0GY

    ♥️ Xem thêm khái niệm về Lexical, Execution Context để hiểu thêm: https://youtu.be/yRPhqCM-3Rk

    Hãy bấm like, chia sẻ nếu bạn thích video này nhé, đăng ký kênh để theo dõi những series video tiếp theo.

    Liên kết tham khảo:
    ➡️ Tải visual studio code: https://code.visualstudio.com/
    ➡️ Xem thêm ví dụ var: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var
    ➡️ Xem thêm ví dụ let: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
    ➡️ Xem thêm ví dụ const: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const

    Website: https://appsindie.com/
    Twitter: https://twitter.com/apps_indie
    Facebook: https://www.facebook.com/AppsIndie
    Github: https://github.com/justindannguyen

    © Copyright 2021 by Justin Nguyen, AppsIndie.com

Tuyển tập những câu hỏi phỏng vấn JavaScript thường gặp nhất

  • Tác giả: www.topcv.vn
  • Đánh giá: 5 ⭐ ( 8467 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: JavaScript là một trong những loại ngôn ngữ lập trình quan trọng và phổ biến hiện nay. Ở bài viết này, TOPCV sẽ gợi ý bộ câu hỏi phỏng vấn JavaScript hay nhất

Sử dụng từ khóa let trong Javascript

  • Tác giả: viblo.asia
  • Đánh giá: 3 ⭐ ( 1153 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong hướng dẫn này, bạn sẽ tìm hiểu cách sử dụng từ khóa cho phép JavaScript để khai báo các biến trong phạm vi khối.

Let và Var trong JavaScript

  • Tác giả: hocjavascript.net
  • Đánh giá: 4 ⭐ ( 9353 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: ECMAScript 2015 đó là sự bổ sung let và const phục vụ cho việc khai báo biến dữ liệu. Vậy sự khác biệt giữa let và var trong JavaScript

Câu lệnh trong Javascript khái niệm và cách sử dụng

  • Tác giả: nguyenvanhieu.vn
  • Đánh giá: 4 ⭐ ( 3658 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Câu lệnh trong Javascript là gì nhỉ ? Ở bài viết này mình sẽ hướng dẫn cho các bạn  khái niệm và cách sử dụng câu lệnh trong Javascrip.

JavaScript Let

  • Tác giả: www.w3schools.com
  • Đánh giá: 3 ⭐ ( 2197 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Hướng dẫn Airbnb JavaScript Style Guide

  • Tác giả: www.codehub.com.vn
  • Đánh giá: 3 ⭐ ( 7509 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Những nội dung của bài viết gồm có:

    Types
    References
    Objects
    Arrays
    Destructuring
    Strings
    Functions
    Arrow Functions
    Constructors
    Modules
    Iterators and Generators
    P...

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php