Let in Javascript. Confusion

Question

I am really confused about this code

var box = document.getElementsByClassName('box-value');

for(let i = 0; i < box.length; i++){
    box[i].onclick = function(){
        console.log(i);
    }
    console.log("End loop. i:" + i);
}

let i = 0;
box[i].onclick = function(){
    console.log(i);
}
i = 9;

box[0].onclick();

enter image description here

In the first block, i is 0

enter image description here

But in the second block, i is 9.

I really don't understand why?

What part don't you understand? What logs would you have expected instead? — Bergi
– Bergi, Commented Apr 2, 2017 at 12:54
@Bergi The question isn't the same but this answer also covers let in for loops. — melpomene
– melpomene, Commented Apr 2, 2017 at 12:56
@Bergi, I have anyway removed the duplicate... just in case the use of let and block scope deserves a separate answer here. — trincot
– trincot, Commented Apr 2, 2017 at 13:15

Community · Accepted Answer · 2017-05-23 12:02:02Z

2

Because your first i is in a block and doesn't get changed afterwards, while your second i (is not in a block) and does get set to 9 before the click handler is run. You can emulate the behaviour from the loop by doing

{
    let i = 0; // one variable that stays constant
    box[i].onclick = function(){
        console.log(i);
    };
}
let i = 9; // a different variable

and you can also emulate the altering behaviour of the assignment by putting the scope around the loop:

let i = 0;
for(; i < box.length; i++) {
    box[i].onclick = function() {
        console.log(i);
    };
    console.log("End loop. i:" + i);
}

edited May 23, 2017 at 12:02

CommunityBot

11 silver badge

answered Apr 2, 2017 at 12:50

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

TrampolineTales · Accepted Answer · 2017-05-31 20:39:46Z

2

The i declared with let in the for loop won't exist after the loop ends. The second i is separate and you setting that to 9, that's why the value of the second i is 9.

let statement documentation

edited May 31, 2017 at 20:39

TrampolineTales

8274 gold badges15 silver badges32 bronze badges

answered May 29, 2017 at 17:28

mstrdruid

212 bronze badges

Collectives™ on Stack Overflow

Let in Javascript. Confusion

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related