Confused for loop in react

Question

componentDidMount() {
    for (let i = 0; i < 3; i++) {
        let i = 'not a number'
        console.log(i)  // output only one time
    }
}

componentDidMount() {
    let i = 5 // add one line...
    for (let i = 0; i < 3; i++) {
        let i = 'not a number'
        console.log(i)  // output three times
    }
}

Please notice that output times, if run these loops in browser directly, both these codes will output three times, but in react, it outputs only one time in for loop.

Answer 1

How do I fix it?

Change the second variable name

Why?

With your React environment, you are most likely using a JS compiler like Babel. Babel will take your code and make it runnable in most browsers, with this you have to get rid of const and let as some browsers don't support them, babel does this for you and replaces them with var .

What's the difference? const and let are block scoped but var is function scoped. So your variable i get hoisted (moved) to the top of the "function" and shared by everyone. const and let are block scoped so they are only visible to their respective scopes, the i declared in the for loop's initializer can be seen by the initializer and the block of code following, but if you declare another variable i in the follow block they become two different variables like such:

for (let i = 0; i < 3; i++) {
  // they act like two different variables and are independent of each other
  let g = 'not a number'
  console.log(g)
}
// 1: i = 0, g (inner i) = 'not a number'
// 2: i = 1, g (inner i) = 'not a number'
// 3: i = 2, g (inner i) = 'not a number'

While React gets compiled to something like this

// variable i gets hoisted to the top
var i;
for (i = 0; i < 3; i++) {
  i = 'not a number'
  console.log(i)
}
// 1: i = 0
// 2: i = 'not a number' ('not a number' < 3 is false)