Xem Nhiều 1/2023 #️ Học Javascript 7: Phân Biệt Var, Let Và Const # Top 2 Trend | Sansangdethanhcong.com

Xem Nhiều 1/2023 # Học Javascript 7: Phân Biệt Var, Let Và Const # Top 2 Trend

Cập nhật thông tin chi tiết về Học Javascript 7: Phân Biệt Var, Let Và 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.

Block scope là gì?

if (true) { var text = ‘in if statement’ }

console.log(text)

Đây có thể gọi là cái ngáo đá nhất khi mới học Javascript, khi nhìn thấy code trong dấu { }, ta thường nghĩ là sẽ tạo ra scope mới. Nhưng trong Javascript, chỉ có function mới có thể tạo ra Execution Context mới.

{ var text = ‘in block scope’ console.log(text) }

Vẫn in ra ‘in block scope’ bình thường.

Khai báo biến với var

Khai báo chồng được luôn:

var text = ‘niviki.com’

var text = ‘niviki’

console.log(text)

Mọi người hay nhầm chỗ này:

for ( var count = 0; count < 3; count++ ){

}

console.log(count)

count = 3 sau khi ra khỏi for

ES6 let và const

Phiên bản ES6 của Javascipt giới thiệu 2 cách khai báo mới là let và const, chúng có những điểm khác biệt sau:

Không khai báo chồng lên như var được

let text = ‘niviki.com’

var text = ‘niviki’

let và const gắn với block scope

for ( let count = 0; count < 3; count++ ){

}

if (true ){ const email = ‘[email protected]’ }

console.log(count)

const không thay đổi được giá trị, let thì đổi thoải mái con gà mái:

let text = ‘niviki.com’ const email = ‘[email protected]’

text = ‘niviki’ email = ‘[email protected]’

Cẩn thận với Hoisting

const và let không hoisting như var:

console.log(text)

let text = ‘niviki.com’

Kết quả sẽ là: text is not defined

Tại sao?

Nếu bạn theo dõi những bài trước thì có thể giải thích dễ dàng rồi. Vì có global execution context nên biến khai báo với var được tạo trong execution context đó. Còn với biến được khai báo với const và let thì không thể.

Var đã chết? Giờ dùng cái nào?

Nếu bạn search ‘should I use var let const in Javascript’ sẽ ra một đống bài, anh hùng khắp nơi cùng tranh luận. Mình thấy có một bài giải thích hay về vấn đề này:

Mặc định dùng const

Không nên dùng var trong ES6

Chỉ dùng let nếu thay đổi giá trị của biến.

Theo anh này cũng đúng vì code React Native cũng theo style này

Nói chung tùy phong cách mỗi người, code miễn sao không bug là được

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

)

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 scoped

The 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 declared

let 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 reassigned

Trời Sinh Ra Var Sao Còn Sinh Ra Let Và Const Javascript

Var, let, const trong javascript – Những khái niệm đó không xa lại gì nữa kể từ khi ES6 định nghĩa thêm let và const. Nhưng liệu có bạn nào tự hỏi rằng? Chuyện gì xảy ra với var? Và tại sao có var rồi lại sinh ra thêm const và let? NẾU BẠN LÀ NGƯỜI LƯỜI ĐỌC THÌ ĐÂY LÀ PHIÊN BẢN SO SÁNH GIỮA CONST LET VAR CHO BẠN. ĐỌC NHANH const let var difference – So sánh nhanh cho những người lười đọc

ES6 rất quan trọng để tìm hiểu bởi vì một lý do là, nó làm cho JavaScript tốt hơn và dễ viết hơn, và Sự khác biệt cấu trúc Class giữa ES5 và ES6. Và hơn nữa ES6 cũng đang được sử dụng cùng với các công nghệ web hiện đại của ngày hôm nay như React, chúng tôi v.v. Nhưng trước khi tìm hiểu về let và const thì chúng ta hãy xem var đang có vấn đề gì?

Vậy trong bài viết này, chúng ta sẽ tiếp tục dồng hành cùng nhau để xem chuyện gì xảy ra với var. Để hiểu được var thì trước hết bạn phải hiểu về scope trước. Vì nếu thực sự một developer không hiểu sâu về scope thì dẫn đến làm kết quả sai lệch khi định nghĩa các variable chồng chéo lên nhau, hoặc tệ hơn nữa làm lạm phát những var global. Để thực sự hiểu được về Scope thì tôi khuyên bạn nên đọc qua bài viết này: Vòng đời của một function (The lifecycle of a function)

Nhưng ở đây chúng ta cũng cần lướt qua về khái niệm scope, cho những bạn nào không có thời gian (hay gọi là lười biếng…)Bạn đã đọc bài viết này chưa : Trời sinh ra for loop sao còn sinh array.forEach trong javascript?

Scope trong javascript là gì?

Scope như trong bài này thì chúng ta hiểu đơn giản nhất là “Scope: được định nghĩa là một vòng đời của một variable, từ khi nó sinh ra và chết đi” . Có thể nói đây là định nghĩa đơn giản nhất mà chúng ta đã từng nghe.

Scope trong javascript có 3 loại scope:

Function (Local) Scope Global Scope Block Scope (với ES6)

Mục đích của bài viết này là đi tìm những nhược điểm của var, vì var bị nhiều vấn đề cho nên vì thế những nhà phát triển javascript lại đưa ra thêm let và const.

NOTES: Khi bạn sử dụng var thì var chỉ supports function scope và Global Scope, không sử dụng được trong Block Scope.

Tiếp theo, chúng ta đi tiếp về 3 loại trên, hy vọng các bạn đã biết rồi, còn nếu không biết thì cũng không sao, học mãi, chứ phải học một lúc đâu.

Function Local Scope

Ví dụ 1:

function local() { var number = 1; console.log(number); } console.log(number);

Khi chạy code này thì chúng ta sẽ nhận được một error: Number is not defined

Khi một biến được định nghĩa bên trong một hàm, biến đó được sử dụng local cho function đó và không thể được sử dụng bên ngoài

Global Scope

Ví dụ 2:

var number = 1; function local() { console.log(number); } console.log(number);

Khi một biến được khai báo bên ngoài hàm, không riêng gì var thì có thể sử dụng bất cứ khi nào, và ở đâu

Block scope

Đây là điểm mấu chốt vì sao khi sử dụng var lại có vấn đề, và từ đó let và const lại được trọng dụng, vì như NOTES ở trên var không support trong Block scope

Ví dụ 3:

for(var i = 0; i < 10; i++){ }

Ồ, xem kết quả bạn sẽ thấy, chuyện gì xảy ra với var vậy? Tại sao nó lại chạy tiếp khi ra khỏi block scope (i = 10)? WTF? Để trả lời cho câu hỏi này bạn nên tìm hiểu về Scope closures

Đó là một bất lợi đầu tiên khi sử dụng var, nó sẽ làm thay đổi biến i dẫn đến kết quả sai lệch dù chúng ta rất cẩn thận trong việc lập trình, không ngoại trừ một ai

Bất lợi thứ 2 của việc khi sử dụng var đó chính là có thể redeclaring(khai báo lại)

Ví dụ 4:

var number = 1; var number = 2; console.log(number);

Vâng, xin thưa với các bạn rằng, number = 2, và không có lỗi gì, điều này dẫn đến hệ luỵ hai ông trong team oánh nhau, tại sao tôi khai báo rồi, ông còn khai báo nữa?? blalalalal

Đến đây, tôi và các bạn cũng đã hiểu vì sao var đến lúc thay thế được rồi, mặc dù var chính là công thần khai quốc nhưng vẫn phải hạ bệ.

Let thay thế var trong javascript

Chúng ta cũng lại lấy những nhược điểm khi sử dụng var, để xem let mang đến cho chúng ta gì nào?

Ở ví dụ 3:

Nếu chúng ta thay thế var sử dụng let

for(let i = 0; i < 10; i++){ }

Ok, nó khác với var bằng việc sinh ra một lỗi để cho coder biết rằng, biến i đã kết thúc và hy sinh trong khi làm nhiệm vụ(block scope). Tiếp

Vấn đề thứ 2 của var cũng được thay thế bởi let.

let number = 1; let number = 2; console.log(number);

Chúng ta nhận được một : "Uncaught SyntaxError: Identifier 'number' has already been declared" .

Okay quá ngon, đỡ mất công cãi nhau, đỡ mất công chơi nhầm nhau =]].

Vậy let keyword sử dụng như thế nào?

Có thể sử dụng để thay thế var

Supports in block scope

Không thể redecralation, nhưng vẫn có thể sử dụng khi thay đổi giá trị

Const trong javascript

Giờ nói đến const, thì nói chung khác nhau giữa const và let thì không thể gán lại giá trị khác mà thôi.

Ví dụ 5:

const number = 1; number = 2; console.log(number);

Chúng ta nhận được một lỗi: Uncaught TypeError: Assignment to constant variable . Bởi vì nó là một hằng số nên nó không thay đổi, nhưng sẽ có trường hợp const sẽ thay đổi? Ở bài tiếp theo tôi sẽ nói về sự thay đổi trong const.

Tóm lại const keyword:

Có thể sử dụng để thay thế var

Support block-scoped như let

Không thể thay đổi giá trị khi đã khai báo.

Với việc học ES6 sẽ mang lại cho bạn nhiều tiện lợi vô cùng, nhưng đừng quên ES6 ra đời cách đây khá lâu và bây giờ đã lên tới ES11 rồi. Nếu bạn không muốn bỏ lỡ những tính năng khác thì hãy đọc bài viết này: Tổng hợp tính năng từ ES6 tới ES11.

Hay thì share thôi, nói nhiều 😀

Thanks for reading!

Bạn đang xem bài viết Học Javascript 7: Phân Biệt Var, Let Và 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!