Let và Var trong Javascript

thaiviptn1201 · January 20, 2018, 2:17am

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 ạ.

thai_ng · January 19, 2018, 7:48pm

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

var tạo 1 variable trong scope của function drawShape, let tạo 1 variable trong scope của for loop.
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.
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.

drgnz · January 20, 2018, 6:25am

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

tienganh1247 · January 20, 2018, 7:14am

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.

kiennguyen · January 20, 2018, 7:46am

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);
	}
}