Cập nhật thông tin chi tiết về Biến Kiểu Let Và Var Toàn Tập Trong Javascript mới nhất trên website Sansangdethanhcong.com. Hy vọng nội dung bài viết sẽ đáp ứng được nhu cầu của bạn, chúng tôi sẽ thường xuyên cập nhật mới nội dung để bạn nhận được thông tin nhanh chóng và chính xác nhất.
Một trong những tính năng nổi bật của 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 biến khai báo dùng let và biến khai báo dùng var là gì, thì ở bài viết này chúng ta sẽ cùng tìm hiểu .ECMAScript 2015
ES2015 đã giới thiệu 2 keywords mới quan trọng là: let và const.
Hai từ khóa này cung cấp các biến Block Scope (và constant) trong JavaScript.
Trước ES2015, JavaScript chỉ có 2 loại phạm vi: phạm vi toàn cục ( Global Scope) và phạm vi của hàm ( Function Scope).
Global Scope
Những biến được khai báo bên ngoài bất kì một hàm sẽ có phạm vi toàn cục.
Ví dụ:
var carName = "Volvo";Biến toàn cục có thể được truy cập từ bất cứ đâu trong chương trình JavaScript .
Function Scope
Biến được khai báo cục bộ (bên trong một hàm) sẽ có phạm vi cục bộ.
Ví dụ:
Biến cục bộ chỉ có thể được truy cập từ bên trong hàm nơi chúng được khai báo.
JavaScript Block Scope
Biến được khai báo với từ khóa var không thể có Block Scope.
Biến được khai báo bên trong một block (block là code trong dấu ngoặc nhọn {} )có thể được truy cập từ bên ngoài block.
Ví dụ:
{ var x = 2; }Trước ES2015 JavaScript không có Block Scope.
Biến được khai báo với từ khóa let có phạm vi Block Scope.
Biến được khai báo bên trong một block{} không thể được truy cập từ bên ngoài block:
Ví dụ:
{ let x = 2; }Redeclaring (khai báo trùng lặp)
Khai báo lại một biến bên trong một block với từ khóa var sẽ ảnh hưởng biến đó bên ngoài block:
var x = 10;Khai báo lại một biến bên trong một block với từ khóa let sẽ không ảnh hưởng đến biến đó bên ngoài block:
var x = 10;Loop Scope
Sử dụng var trong một vòng lặp :
var i = 5; for (var i = 0; i < 10; i++) { let i = 5; for (let i = 0; i < 10; i++) {Trong ví dụ sử dụng var, biến i được khai báo lại trong vòng lặp sẽ thay đổi giá trị trước đó của biến i bên ngoài vòng lặp.
Trong ví dụ sử dụng let, biến i được khai báo trong vòng lặp sẽ không thay đổi giá trị trước đó của biến i bên ngoài vòng lặp.
Function Scope
Biến được khai báo với var và let là tương tự nhau khi được khai báo bên trong một hàm.
Cả hai sẽ có Function Scope:
function myFunction() { var carName = "Volvo"; function myFunction() { let carName = "Volvo";Global Scope
Biến được khai báo với var và let là tương tự nhau khi được khai báo bên ngoài một block.
Cả hai sẽ có Global Scope:
var x = 2; let x = 2;Biến Global trong HTML
Với JavaScript, phạm vi toàn cục là môi trường JavaScript.
Trong HTML, phạm vi toàn cục là đối tượng window.
Biến global được xác định bằng từ khóa var thuộc về đối tượng window.
Ví dụ:
var carName = "Volvo";Biến global được xác định bằng từ khóa let không thuộc về đối tượng window.
let carName = "Volvo";Redeclaring (khai báo trùng lặp )
Redeclaring một biến JavaScript với var là được phép ở bất cứ đâu trong chương trình:
var x = 2;Redeclaring một biến kiểu , trong cùng phạm vi, hoặc cùng block, là var với letKHÔNG được phép:
var x = 2;Redeclaring một biến kiểu , trong cùng phạm vi, hoặc cùng block, là let với letKHÔNG được phép:
let x = 2;Redeclaring một biến kiểu , trong cùng phạm vi, hoặc cùng block, là let với varKHÔNG được phép:
let x = 2;Redeclaring một biến với let, trong một phạm vi khác, hoặc một block khác, là được phép:
let x = 2;Hoisting
Biến kiểu var sẽ bị hoisting và có thể được khởi tạo bất cứ lúc nào.
Thế nào là hoisting? Hoisting là cách javascript kéo tất cả các khai báo biến lên trên scope hiện tại.
console.log(carName);//not error,in ra underfined var carName = "Volvo";Sau khi hoisting đoạn code trên được viết lại như sau:
var carName;Biến kiểu let sẽ bị hoisting nhưng không được khởi tạo.
console.log(carName);// Error: không thể truy cập 'carName' trước khi khởi tạo let carName = "Vinfast";Lời kết
Phân Biệt Kiểu Biến Var, Let, Và Const Trong Javascript
ES6 (viết tắt của ECMAScript 6) là một tập hợp các kỹ thuật nâng cao của Javascript. ECMAScript do hiệp hội các nhà sản xuất máy tính Châu Âu đề xuất làm tiêu chuẩn của ngôn ngữ Javascript. Bạn cứ nghĩ xem hiện nay có khá nhiều trình duyệt Browser ra đời và nếu mỗi Browser lại có cách chạy Javascript khác nhau thì các trang web không thể hoạt động trên tất cả các trình duyệt đó được, vì vậy cần có một chuẩn chung để bắt buộc các browser phải phát triển dựa theo chuẩn đó.
Một trong những tính năng nổi bật của ES6 đó là sự bổ sung và phục vụ cho việc khai báo biến dữ liệu. Vậy tại sao lại cần tới let và const dù trước đó đã có var để khai báo biến, thì ở bài viết này chúng ta sẽ cùng tìm hiểu lý do của từng kiểu khai báo biến.
2.1. Biến var
Như đã biết trong Vanilla Javascript, với từ khóa chúng ta có thể khai báo đa dạng các kiểu biến như number, string, boolean, etc. Trừ trường hợp được khai báo bên trong 1 function (khi đó biến var sẽ có scope là function/locally scoped), biến var sẽ có scope là globally scoped. Đặc biệt, biến var còn có thêm tính chất hoisting: nghĩa là dù khai báo ở đâu thì biến đều sẽ được đem lên đầu scope trước khi code được thực hiện.
Lấy ví dụ:
sẽ được biên dịch là:
Nhưng có một vấn đề với biến var. Giả sử ta có ví dụ như sau:
Vì thỏa điều kiện if nên greeting khi này sẽ có giá trị là "say Hello instead" và sẽ vẫn giữ nguyên giá trị này sau khi thoát ra khỏi block if. Điều này sẽ không có gây vấn đề gì nhưng nếu trong trường hợp code của chúng ta lên đến hàng trăm, hàng nghìn dòng code, hoặc chúng ta cũng không biết được giá trị của biến liệu có bị thay đổi ở đoạn code nào sẽ dẫn đến việc debug là vô cùng khó khăn. Để giải quyết vấn đề trên thì ES6 cung cấp cho chúng ta thêm 2 cách khác để khai báo biến bao gồm let và const.
2.2. Biến let
Một trong những nguyên nhân khiến có thể thay thế var để xử lý vấn đề nêu trên là vì biến let được khai báo sẽ có scope là block scoped chứ không phải globally hay locally scoped.
Chúng ta có thế thấy là đối với biến có scope là block scoped nếu ra khỏi scope được khai báo thì sẽ không thể sử dụng được nữa.
let cho phép chúng ta cập nhật giá trị của biến chứ không cho phép chúng ta tái khái báo lại biến đó.
Tuy nhiên, đối với các block khác nhau thì việc tái khai báo biến sẽ không sinh ra lỗi vì đối với từng scope, mỗi biến sẽ được xem xét là 1 biến riêng khác biệt.
Giống với var, let cũng có tính hoisting tuy nhiên lại khác nhau ở chỗ thay vì var được khởi tạo với giá trị là undefined thì let sẽ không có bất kỳ giá trị khởi tạo nào. Điều này dẫn đến việc nếu chúng ta sử dụng biến let trước khi khai báo thì sẽ gặp lỗi Reference Error.
2.3. Biến const
Tương tự với let cũng có scope là block scoped, và hoisting thì chúng ta có thêm 1 kiểu khai báo biến nữa là . Trong biến const nếu trường hợp kiểu của biến là primitive (bao gồm string, number, boolean, null, và undefined) thì chúng ta sẽ không thể tái khai báo hay cập nhật giá trị mới để thay thế cho giá trị trước đó của biến.
Đối với trường hợp kiểu biến là reference (bao gồm object, array, và function) thì tuy không thể tái khai báo hay cập nhật giá trị của biến nhưng chúng ta vẫn có thể cập nhật giá trị cho thuộc tính của biến đó.
All Rights Reserved
Sự Khác Nhau Giữa Var, Let Và Const Trong Javascript
Với việc ra mắt ES6, hai từ khóa khá quan trọng trong JavaScript cũng được giới thiệu là let và const. Trước khi ra đời ES6, cách duy nhất để khai báo một biến trong JavaScript là sử dụng var. Nhưng sự khác biệt giữa var, let và const là gì? Và khi nào chúng ta sử dụng cho phạm vi nào?
1. Var
Như bạn có thể biết, cách thức cũ để khai báo một biến trong JavaScript là sử dụng từ khóa var.
var name = "NhiTT"; console.log(name);Khi bạn log biến name trong console, đầu ra rõ ràng sẽ là NhiTT . Biến name hiện tại là biến có phạm vi global. Sẽ thú vị hơn khi chúng ta thêm một hàm.
function setup() { var name = "Benjamin"; } setup(); console.log(name);Có thể sử dụng các biến có phạm vi toàn cầu bên trong một hàm. Điều này có nghĩa là biến age có thể được sử dụng bên trong hàm setup. Điều này sẽ in ra “NhiTT 16 tủi” trong console.
var age = 16; function setup() { var name = "NhiTT"; console.log(name + age + " tủi"); } setup();Bạn chỉ có thể truy cập các biến có cùng phạm vi hoặc phạm vi cao hơn. Vì vậy, trong một chức năng, bạn có thể truy cập phạm vi toàn cầu. Nhưng, trên toàn cầu, bạn không thể truy cập vào một biến chỉ được tạo trong một hàm.
var age = 16; function setup() { var name = "Benjamin"; age = 15; } setup(); console.log(age);Nó trở nên khó khăn hơn khi var được sử dụng trong một vòng lặp for hoặc trong một câu lệnh if. Vòng lặp for hoặc lệnh if sẽ không tạo ra các biến của riêng chúng.
Điều này có nghĩa là biến có thể truy cập rộng rãi hơn vòng lặp hoặc câu lệnh mà chúng được tạo. Trong ví dụ bên dưới, biến i có phạm vi toàn cục. Điều này sẽ in ra 10 trong console.
for (var i = 1; i <= 10; i++) {2. Let
Let sử dụng phạm vi khối và không phạm vi từ vựng. Điều này có nghĩa là let không quan tâm đến toàn cầu hoặc cục bộ hoặc liệu bạn có ở trong một hàm hay không. Thay vào đó, let quan tâm đến khối bạn đang ở. Một khối về cơ bản là bất cứ thứ gì có dấu ngoặc nhọn. Đây có thể là một hàm, nhưng cũng là một vòng lặp for v hoặc một câu lệnh if.
let i = 5; for (let i = 1; i <= 10; i++) {Trong ví dụ trên, biến i không được cập nhật trong phạm vi toàn cầu; do đó đầu ra sẽ là 5.
Let hữu ích khi bạn muốn có một biến trong phạm vi của nó. Có thể truy cập các biến từ một khối cao hơn, giống như var có thể truy cập các biến từ phạm vi cao hơn.
3. Const
Const hoạt động gần giống như let. Tuy nhiên, sự khác biệt duy nhất là một khi bạn đã gán một giá trị cho một biến const, bạn không thể gán lại nó cho một giá trị mới. Giống như từ khóa implies.
for (const i = 1; i <= 10; i++) {Ví dụ trên sẽ đưa ra một lỗi cho bạn biết rằng bạn đang cố gán giá trị mới cho 1 const.
Const là hữu dụng với bất cứ khi nào bạn biết rằng bạn có một biến mà bạn sẽ cố định. Và bây giờ bạn tự hỏi, tại sao chúng ta lại lưu trữ một giá trị trong một biến có giá trị không thay đổi?
Một phần của điều đó là đúng. Mặt khác, bạn có thể sử dụng nếu để dễ đọc. Bạn có thể chọn hard code một số giá trị trong code của mình ở nhiều nơi, nhưng sử dụng một biến const làm cho mã của bạn dễ bảo trì hơn. Bất cứ khi nào giá trị mã hóa thay đổi, bạn chỉ phải thay đổi biến const, thay vì đi qua toàn bộ mã tìm kiếm giá trị mã hóa cứng đó.
const username = document.querySelect('input[name="username"]').value;Điều tương tự áp dụng cho ví dụ tiếp theo. Bất cứ khi nào bạn đang xử lý các đối tượng lớn, bạn cũng có thể sử dụng const để cải thiện khả năng đọc.
const books = api.data.sources['library'].books;Sử dụng const có thể giúp làm cho code sau này của bạn rõ ràng hơn. Điều này đặc biệt hữu ích khi bạn làm việc trong một nhóm. Nếu ai đó nhìn thấy một mã const, người đó biết rằng giá trị có lẽ không nên thay đổi.
4. Ngoại lệ: Sự kết hợp của const và các đối tượng
Các declaration const tạo ra một tham chiếu chỉ đọc đến một giá trị. Điều đó không có nghĩa là giá trị mà nó giữ là bất biến, chỉ là định danh biến không thể được gán lại.
Điều này có nghĩa là không thể thực hiện được những điều sau vì chúng tôi cố gắng gán lại cho tên người dùng cho biến const.
const user = { 'name': 'NhiTT'}; user = { 'name': 'Truong Thi Nhi'}; console.log(user);Nhưng có thể thay đổi các thuộc tính của đối tượng này. Điều này là do giá trị mà một const nắm giữ không phải là bất biến.
const user = { 'name': 'NhiTT'};5. Khi nào nên sử dụng loại biến nào?
Tôi nghĩ một trong những lý do duy nhất mà bạn nên sử dụng var là khi bạn làm việc trên một base code không hỗ trợ ES6.
Nói chung, let tốt hơn là var vì nó làm giảm phạm vi. Trong hầu hết các trường hợp, bạn sẽ có thể biến tất cả các câu lệnh var thành câu lệnh let mà không có bất kỳ thay đổi ngữ nghĩa nào.
Const được đánh giá là tốt hơn so với let. Từ góc độ kỹ thuật, const không bao giờ là bắt buộc. Mỗi const có thể được thay thế bằng một biến let, nhưng sử dụng const có thể làm cho mã sạch hơn. Trừ khi bạn cần thay đổi giá trị, hãy sử dụng const. Nó bao gồm tất cả lợi ích khi sử dụng let cùng với việc giảm sự hiện diện của các biến chưa được khởi tạo và làm cho mã dễ đọc và thiện cảm hơn. Nếu bạn không chắc chắn liệu mình có cần thay đổi giá trị hay không, hãy biến nó thành một const cho đến khi bạn cần thay đổi nó.
source:
https://medium.com/better-programming/javascript-variables-the-difference-between-var-let-and-const-10efef5d2728
Var Vs Let Vs Const In Javascript
Variable Declaration vs Initialization
A variable declaration introduces a new identifier.
Above we create a new identifier called declaration. In JavaScript, variables are initialized with the value of undefined when they are created. What that means is if we try to log the declaration variable, we’ll get undefined.
So if we log the declaration variable, we get undefined.
In contrast to variable declaration, variable initialization is when you first assign a value to a variable.
So here we’re initializing the declaration variable by assigning it to a string.
Scope
Scope defines where variables and functions are accessible inside of your program. In JavaScript, there are two kinds of scope – global scope, and function scope. According to the official spec,
“If the variable statement occurs inside a FunctionDeclaration, the variables are defined with function-local scope in that function.”.
What that means is if you create a variable with var, that variable is “scoped” to the function it was created in and is only accessible inside of that function or, any nested functions.
Above we try to access a variable outside of the function it was declared. Because date is “scoped” to the getData function, it’s only accessible inside of getDate itself or any nested functions inside of getDate (as seen below).
And the implementation might look something like this
Seems simple enough but what does this have to do with block scope? Take a look at that for loop. Are the variables declared inside of it accessible outside of it? Turns out, they are.
Now that we’ve discussed variable declarations, initializations, and scope, the last thing we need to flush out before we dive into let and const is hoisting.
Hoisting
Remember earlier we said that “In JavaScript, variables are initialized with the value of undefined when they are created.”. Turns out, that’s all that “Hoisting” is. The JavaScript interpreter will assign variable declarations a default value of undefined during what’s called the “Creation” phase.
For a much more in depth guide on the Creation Phase, Hoisting, and Scopes see “The Ultimate Guide to Hoisting, Scopes, and Closures in JavaScript”
Let’s take a look at the previous example and see how hoisting affects it.
Notice all the variable declarations were assigned a default value of undefined. That’s why if you try access one of those variables before it was actually declared, you’ll just get undefined.
Now that you know everything there is to know about var, let’s finally talk about the whole point of why you’re here, what’s the difference between var, let, and const?
var VS let VS const
First, let’s compare var and let. The main difference between var and let is that instead of being function scoped, let is block scoped. What that means is that a variable created with the let keyword is available inside the “block” that it was created in as well as any nested blocks. When I say “block”, I mean anything surrounded by a curly brace {} like in a for loop or an if statement.
So let’s look back to our discountPrices function one last time.
Remember that we were able to log i, discountedPrice, and finalPrice outside of the for loop since they were declared with var and var is function scoped. But now, what happens if we change those var declarations to use let and try to run it?
var VS let var: function scoped let: block scopedThe next difference has to do with Hoisting. Earlier we said that the definition of hoisting was “The JavaScript interpreter will assign variable declarations a default value of undefined during what’s called the ‘Creation’ phase.” We even saw this in action by logging a variable before it was declared (you get undefined)
var VS let var: function scoped undefined when accessing a variable before it's declared let: block scoped ReferenceError when accessing a variable before it's declaredlet VS const
Now that you understand the difference between var and let, what about const? Turns out, const is almost exactly the same as let. However, the only difference is that once you’ve assigned a value to a variable using const, you can’t reassign it to a new value.
The take away above is that variables declared with let can be re-assigned, but variables declared with const can’t be.
Cool, so anytime you want a variable to be immutable, you can declare it with const. Well, not quite. Just because a variable is declared with const doesn’t mean it’s immutable, all it means is the value can’t be re-assigned. Here’s a good example.
Notice that changing a property on an object isn’t reassigning it, so even though an object is declared with const, that doesn’t mean you can’t mutate any of its properties. It only means you can’t reassign it to a new value.
Now the most important question we haven’t answered yet, should you use var, let, or const? The most popular opinion, and the opinion that I subscribe to, is that you should always use const unless you know the variable is going to change. The reason for this is by using const, you’re signalling to your future self as well as any other future developers that have to read your code that this variable shouldn’t change. If it will need to change (like in a for loop), you should use let.
So between variables that change and variables that don’t change, there’s not much left. That means you shouldn’t ever have to use var again.
Now the unpopular opinion, though it still has some validity to it, is that you should never use const because even though you’re trying to signal that the variable is immutable, as we saw above, that’s not entirely the case. Developers who subscribe to this opinion always use let unless they have variables that are actually constants like _LOCATION_ = ....
So to recap, var is function scoped and if you try to use a variable declared with var before the actual declaration, you’ll just get undefined. const and let are blocked scoped and if you try to use variable declared with let or const before the declaration you’ll get a ReferenceError. Finally the difference between let and const is that once you’ve assigned a value to const, you can’t reassign it, but with let, you can.
var VS let VS const var: function scoped undefined when accessing a variable before it's declared let: block scoped ReferenceError when accessing a variable before it's declared const: block scoped ReferenceError when accessing a variable before it's declared can't be reassignedBạn đang xem bài viết Biến Kiểu Let Và Var Toàn Tập Trong Javascript trên website Sansangdethanhcong.com. Hy vọng những thông tin mà chúng tôi đã chia sẻ là hữu ích với bạn. Nếu nội dung hay, ý nghĩa bạn hãy chia sẻ với bạn bè của mình và luôn theo dõi, ủng hộ chúng tôi để cập nhật những thông tin mới nhất. Chúc bạn một ngày tốt lành!