Cập nhật thông tin chi tiết về Es Series #1: Các Kiểu Khai Báo Biến Var Vs Let Vs Const. 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 ES6 đó là sự bổ sung let và const 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.
1. Function Scope vs Block Scope:
Đây là hai khái niệm bạn cần nắm rõ để có thể phân biệt:
Function Scope
Các biến Function Scope sẽ có tác dụng trong phạm vi của một function mà nó được khai báo bên trong. Ngoài ra, nếu bạn khai báo không nằm trong một hàm nào thì sẽ trở thành biến toàn cục (global variable).
function hello() { console.log('hello') }Block Scope
Các biến Block Scope sẽ có tác dụng trong phạm vi của một block mà nó được khai báo bên trong và các block con trong đó. Một block là đoạn code bên trong cặp dấu ngoặc nhọn:
if(true) { console.log('Hello'); }2. Var
Tất cả các biến được khai báo với var đều là function scope. Điều này đồng nghĩ, nếu ta khai báo trong một block scope thì biến đó vẫn có thể truy cập được ở bên ngoài.
Ví dụ:
if(true) { var name = 'D.A.N_3002'; } console.log(name);Kết quả:
3. Let
Tất cả các biến được khai báo với let đều là block scope, ta chỉ có thể truy cập vào biến khi ở cùng 1 block hoặc là các block con.
Ví dụ:
let name = 'Guest'; if(true) { let name = 'D.A.N_3002'; console.log(name); } console.log(name);Kết quả:
D.A.N_3002 GuestCó thể thấy, đoạn code trên sẽ tạo ra 2 biến name ở 2 block scope khác nhau:
4. Const
Từ khóa này tương tự với let, chỉ khác là giá trị của biến sẽ không thể thay đổi. Ta không thể gán một giá trị mới cho biến được khai báo bằng const.
Ví dụ:
const name = 'D.A.N_3002'; name = 'New name';Khi chạy, đoạn code trên sẽ trả về một lỗi như sau:
TypeError: Assignment to constant variable.Tuy nhiên, nếu biến được khai báo bằng const là một object thì ta vẫn có thể thay đổi các thuộc tính trong object đó. Do đây không phải là gán một giá trị mới cho biến, mà chỉ là thay đổi bên trong biến.
Ví dụ:
const person = { name: 'Dinh Anh Nguyen', age: 17, }; console.log(person.name); chúng tôi = 'D.A.N_3002'; console.log(person.name);Kết quả:
Dinh Anh Nguyen D.A.N_30025. Tổng kết:
Vậy khi nào thì bạn nên dùng var, let hoặc const. Điều này thì tùy vào mục đích của bạn, tuy nhiên mình có một số lời khuyên như sau:
Không nên sử dụng var vì từ khóa này rất khó xác định scope cụ thể của biến.
Sử dụng let khi biến đó cần phải thay đổi giá trị.
Sử dụng const khi biến đó không cần thay đổi giá trị (Config DB, nhập liệu từ người dùng,… ).
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 reassignedBiến Kiểu Let Và Var Toàn Tập Trong Javascript
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 Var, Let Và Const Trong Javascript
Trong bài viết này, chúng ta sẽ cùng nhau đi phân biệt var, let và const trong JavaScript.
Giới Thiệu
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 let và const 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. Từ đó bạn có thể biết được khi nào nên dùng var , let và const
Trong JavaScript có 2 loại scope: function-scope và block-scope .
Function-scope
function
myFn
() {var
foo ='peekaboo!'
;console
.log(foo); }console
.log(foo);Code language:
JavaScript
(
javascript
)
Nếu sử dụng var thì phạm vi trong các biến sẽ có bị giới hạn trong function. Khi bạn gọi các biến này ở ngoài function sẽ nhận được thông báo lỗi như trên
Block-scope
if
(true
) {var
foo ='peekaboo!'
;let
bar ='i see u'
;const
baz ='baby blue!'
;console
.log(foo);console
.log(bar);console
.log(baz); }console
.log(foo);console
.log(bar);console
.log(baz);Code language:
JavaScript
(
javascript
)
foo không bị giới hạn bởi if-statement block. Tuy nhiên bar và baz thì bị giới hạn bới block
Đó chính là sự khác biệt giữa let , const và var
Một block là đoạn code nằm trong dấu {} trong JavaScript.
var
Có nhiều khác giữa var và let / const
for
(var
i =0
; i <3
; i++) {console
.log(i); }console
.log(i);Code language:
JavaScript
(
javascript
)
Biến i có thể truy cập bên ngoài vòng lặp for. Điều này được mong đợi vì các biến được xác định bằng var không thể truy cập được bên ngoài hàm.
Redefining var
var bạn có thể thay đổi giá trị của biến đó
function
myFn
() {var
foo =1
; foo =30
;var
foo =101
;console
.log(foo); } myFn();Code language:
JavaScript
(
javascript
)
let
let outside of a for-loop
for
(let
i =0
; i <3
; i++) {console
.log(i); }console
.log(i);Code language:
JavaScript
(
javascript
)
Redefining let
let cũng có thể thay đổi giá trị của biến nhưng cú pháp nó nghiêm ngặt hơn var
function
myFn
() {let
foo =1
; foo =30
; foo =101
;console
.log(foo); } myFn();console
.log(foo);Code language:
JavaScript
(
javascript
)
Từ khóa const là viết tắt của từ constant . Nó cũng giống như let, nhưng tuy nhiên là const không thể reasign giá trị
const
myBoolean =true
;if
(myBoolean) {const
turtles = ['leonardo'
,'donatello'
,'michaelangelo'
,'raphael'
];console
.log(turtles); }console
.log(turtles);Code language:
JavaScript
(
javascript
)
Bạn đang xem bài viết Es Series #1: Các Kiểu Khai Báo Biến Var Vs Let Vs Const. 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!