Let và Var trong Javascript

function drawShape(){

var mContent = document.getElementById("mContent");
mContent.innerHTML = "";

for(var i = 1; i<= 10; i++){
	var elmP	= document.createElement("p");
	elmP.innerHTML = i;
	
	elmP.onclick = function(){
		alert("Selected: #" + i);
	}
	// i = 10
	mContent.appendChild(elmP);
}

}
Đoạn mã trên sẽ in ra các số từ 1 đến 10 và khi click vào thì nó đều hiện thông báo là 11 nhưng em đổi từ var thành let trong vòng for thì lại hiện ra thông báo đúng khi click từ 1-10. Mọi người giải thích giúp em tại sao lại vậy ạ.

Mình không chuyên JS, nhưng theo mình hiểu là như thế này:

  1. var tạo 1 variable trong scope của function drawShape, let tạo 1 variable trong scope của for loop.
  2. Vì tính năng trên của let, khi bạn tạo lambda/closure để gán vào event onclick của element p, i được copy vào lambda/closure, giữ giá trị 1 đến 10.
  3. Nếu bạn dùng var, lambda/closure lấy giá trị của i khi event onclick xảy ra. Khi event xảy ra, cái for loop của bạn đã hoàn thành, i = 11, nên giá trị i trong lambda/closure sẽ là 11.

Đọc cái này nhé
Loop and Closure

2 Likes

khi đọc về ts có nhắc về cái sida của js là không hủy biến khi hết vòng lặp. ts dùng let thay var để giải quyết vdd này.

1 Like

var tạo ra một biến có phạm vi truy cập xuyên suốt function chứa nó
let tạo ra một biến có phạm vi truy cập được trong block bao quanh nó

function drawShape(){
	var mContent = document.getElementById("mContent");
	mContent.innerHTML = "";
	// var elmP;

	for(var i = 1; i<= 10; i++){
		var elmP	= document.createElement("p"); // elmP ở đây cũng như là elmP ở trên
		elmP.innerHTML = i;
		
		elmP.onclick = function(){
			alert("Selected: #" + i);
		}
		// i = 10
		mContent.appendChild(elmP);
	}
}
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?