tek4

let và var trong JavaScript

by - September. 26, 2021
Kiến thức
Học
<p><img class="aligncenter wp-image-8168 size-full" src="https://tek4.vn/wp-content/uploads/2021/02/Capture-43.png" alt="let v&agrave; var trong JavaScript" width="750" height="441" /></p> <p>Từ kh&oacute;a let v&agrave; var trong JavaScript đều được sử dụng để khai b&aacute;o biến. Trong b&agrave;i viết n&agrave;y, ta sẽ c&ugrave;ng t&igrave;m hiểu về sự kh&aacute;c nhau của hai từ kh&oacute;a n&agrave;y c&ugrave;ng với c&aacute;c v&iacute; dụ.</p> <h1>So s&aacute;nh let v&agrave; var trong JavaScript</h1> <p>Trong JavaScript, cả hai từ kh&oacute;a var v&agrave; let đều được sử dụng để khai b&aacute;o c&aacute;c biến. Tuy nhi&ecirc;n, ch&uacute;ng c&oacute; một số điểm kh&aacute;c biệt. Từ kh&oacute;a let đ&atilde; được giới thiệu trong phi&ecirc;n bản JavaScript sau n&agrave;y được gọi l&agrave; ES6 (ES2015). V&agrave; n&oacute; thường xuy&ecirc;n được sử dụng để khai b&aacute;o c&aacute;c biến.</p> <table> <tbody> <tr> <td style="text-align: center;">Từ kh&oacute;a let</td> <td style="text-align: center;">Từ kh&oacute;a var</td> </tr> <tr> <td>Let c&oacute; phạm vi trong khối.</td> <td>Var c&oacute; phạm vi trong h&agrave;m.</td> </tr> <tr> <td>Kh&ocirc;ng cho ph&eacute;p khai b&aacute;o lại c&aacute;c biến.</td> <td>Cho ph&eacute;p khai b&aacute;o lại c&aacute;c biến.</td> </tr> <tr> <td>Let kh&ocirc;ng hỗ trợ cơ chế hoisting.</td> <td>C&oacute; hỗ trợ cơ chế hoisting.</td> </tr> </tbody> </table> <h2>1. var c&oacute; phạm vi trong h&agrave;m</h2> <p>Biến được khai b&aacute;o b&ecirc;n trong một h&agrave;m với var c&oacute; thể được sử dụng ở bất kỳ đ&acirc;u trong một h&agrave;m.</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">function vi_du() { &nbsp;&nbsp;&nbsp; var a = 100; &nbsp;&nbsp;&nbsp; console.log(a); } vi_du();</pre> <p>Kết quả:</p> <pre>100</pre> <p>Trong chương tr&igrave;nh tr&ecirc;n, biến a được khai b&aacute;o bằng var. Biến a c&oacute; thể được sử dụng ở bất kỳ đ&acirc;u b&ecirc;n trong h&agrave;m vi_du().</p> <h2>2. let c&oacute; phạm vi trong khối</h2> <p>Biến được khai b&aacute;o với let chỉ c&oacute; thể được truy cập b&ecirc;n trong một khối m&atilde;.</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">function vi_du() { &nbsp;&nbsp;&nbsp; var a = 100; &nbsp;&nbsp;&nbsp; console.log(a); &nbsp;&nbsp;&nbsp; if(a==100){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; let c = 1; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console.log(c); &nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp; console.log(c); } vi_du();</pre> <p>Kết quả nhận được sẽ l&agrave; th&ocirc;ng b&aacute;o lỗi.</p> <p>Trong chương tr&igrave;nh tr&ecirc;n, biến a được khai b&aacute;o b&ecirc;n trong h&agrave;m v&agrave; n&oacute; c&oacute; thể được truy cập ở bất kỳ đ&acirc;u b&ecirc;n trong h&agrave;m. Tuy nhi&ecirc;n, biến c được khai b&aacute;o b&ecirc;n trong c&acirc;u lệnh khối if. c sẽ c&oacute; phạm vi trong khối if v&agrave; chỉ c&oacute; thể được truy cập b&ecirc;n trong khối if. Do đ&oacute;, khi ta cố gắng truy cập biến c b&ecirc;n ngo&agrave;i khối if, sẽ xảy ra lỗi</p> <p><strong><span style="background-color: #ffff00;">Ch&uacute; &yacute;: C&aacute;c biến được khai b&aacute;o b&ecirc;n trong một h&agrave;m sẽ c&oacute; phạm vi trong h&agrave;m đối với cả var v&agrave; let.</span></strong></p> <h2>3. let kh&ocirc;ng cho ph&eacute;p khai b&aacute;o lại c&aacute;c biến. Trong khi, một biến được khai b&aacute;o với var c&oacute; thể được khai b&aacute;o lại.</h2> <p>V&iacute; dụ: Khai b&aacute;o biến với từ kh&oacute;a var.</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">var a = 100; var a = 200;</pre> <p>Một biến được khai b&aacute;o với let kh&ocirc;ng thể được khai b&aacute;o lại trong c&ugrave;ng một khối hoặc c&ugrave;ng một phạm vi.</p> <p>V&iacute; dụ: Khai b&aacute;o biến với từ kh&oacute;a let.</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">let a = 100; let a = 200;</pre> <h2>4. Khai b&aacute;o lại một biến với từ kh&oacute;a var trong một phạm vi hoặc khối kh&aacute;c cũng sẽ thay đổi gi&aacute; trị của biến b&ecirc;n ngo&agrave;i.</h2> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">var a = 100; console.log(a); { &nbsp;&nbsp;&nbsp; var a = 200; &nbsp;&nbsp;&nbsp; console.log(a); } console.log(a);</pre> <p>Kết quả:</p> <pre>100 200 200</pre> <p>Khai b&aacute;o lại một biến với từ kh&oacute;a let trong một phạm vi hoặc khối kh&aacute;c sẽ coi biến đ&oacute; như một biến kh&aacute;c. V&agrave; gi&aacute; trị của một biến b&ecirc;n ngo&agrave;i kh&ocirc;ng thay đổi.</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">let a = 100; console.log(a); { &nbsp;&nbsp;&nbsp; let a = 200; &nbsp;&nbsp;&nbsp; console.log(a); } console.log(a);</pre> <p>Kết quả:</p> <pre>100 200 100</pre> <h2>5. Khi một biến được khai b&aacute;o với từ kh&oacute;a var được sử dụng trong một v&ograve;ng lặp, gi&aacute; trị của biến đ&oacute; sẽ thay đổi.</h2> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">var a = 100; for(var a = 0; a &lt; 2; a++) { } console.log(a);</pre> <p>Kết quả:</p> <pre>2</pre> <p>Trong chương tr&igrave;nh tr&ecirc;n, v&ograve;ng lặp for khai b&aacute;o lại biến a. Do đ&oacute; gi&aacute; trị của a được thay đổi th&agrave;nh 2.</p> <p>Khi một biến được khai b&aacute;o với let được sử dụng trong một v&ograve;ng lặp, gi&aacute; trị của một biến kh&ocirc;ng thay đổi.</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">let a = 100; for(let a = 0; a &lt; 2; a++) { } console.log(a);</pre> <p>Kết quả:</p> <pre>100</pre> <p>Trong chương tr&igrave;nh tr&ecirc;n, v&ograve;ng lặp for coi biến a l&agrave; một biến kh&aacute;c với biến được khai b&aacute;o ở tr&ecirc;n. V&agrave; phạm vi của biến đ&oacute; chỉ nằm trong v&ograve;ng lặp for. Do đ&oacute; gi&aacute; trị của biến a vẫn l&agrave; 100 sau khi được in ra.</p> <h2>6. let kh&ocirc;ng hỗ trợ cơ chế Hoisting</h2> <p>C&aacute;c biến được khai b&aacute;o với từ kh&oacute;a var được đưa l&ecirc;n đầu phạm vi của chương tr&igrave;nh.</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">console.log(a); var a;</pre> <p>Kết quả:</p> <pre>undefined</pre> <p>V&iacute; dụ 2:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">console.log(a); let a;</pre> <p>Kết quả sẽ l&agrave; lỗi.</p> <p>Hầu hết c&aacute;c tr&igrave;nh duyệt hiện tại đều hỗ trợ việc sử dụng let. Tuy nhi&ecirc;n, một số tr&igrave;nh duyệt kh&ocirc;ng hỗ trợ đầy đủ let.</p> <p><strong><span style="background-color: #ffff00;">Ch&uacute; &yacute;: Trong trường hợp phạm vi to&agrave;n cục, cả var v&agrave; let sẽ hoạt động theo c&ugrave;ng một c&aacute;ch.</span></strong></p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">var a = 100;</pre> <p>Biến a sẽ c&oacute; phạm vi to&agrave;n cục v&agrave; c&oacute; thể được truy cập ở bất kỳ đ&acirc;u trong chương tr&igrave;nh.</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">let b = 100;</pre> <p>Biến b sẽ c&oacute; phạm vi to&agrave;n cục v&agrave; c&oacute; thể được truy cập ở bất kỳ đ&acirc;u trong chương tr&igrave;nh.</p> <p>Tr&ecirc;n đ&acirc;y l&agrave; kh&aacute;i niệm v&agrave; v&iacute; dụ cơ bản về hai từ kh&oacute;a let v&agrave; var trong JavaScript. Hy vọng mọi người c&oacute; thể &aacute;p dụng v&agrave;o trong chương tr&igrave;nh của m&igrave;nh. Mọi người h&atilde;y tiếp tục theo d&otilde;i c&aacute;c b&agrave;i tiếp theo v&agrave; cập nhật c&aacute;c b&agrave;i tiếp theo về lập tr&igrave;nh JavaScript tr&ecirc;n <a href="http://tek4.vn">tek4</a> nh&eacute;!</p> <p>P/s: Cảm ơn mọi người đ&atilde; tin tưởng tek4!</p>