Variables with the same name in nested functions

Question

I'm reading You Don't Know JS, and the following example confuses me a little bit:

function foo () {
    function bar (a) {
        i = 3; // changing the `i` in the enclosing scope's for-loop
        console.log(a + i);
    }

    for (var i = 0; i < 10; i++) {
        bar(i * 2); // oops, infinite loop ahead!
    }
}

foo();

Wouldn't the engine look up (and stick to the assignment) of i inside the for loop, since it's declared and inside the scope of foo?

Why would it go to the i inside of bar?

Furthermore, even if i's value was reassigned to 3, wouldn't it still go up one every time, thus avoiding the infinite loop?

The i inside of bar() is the same one as the i inside of foo() — Pointy
– Pointy, Commented Nov 17, 2018 at 20:09

wizzwizz4 · Accepted Answer · 2021-05-27 16:39:19Z

2

Because bar's i is not declared with var, it uses the first i it can find in an outer scope: foo's i. So this happens:

The for loop sets i to 0.
bar(0); sets i to 3.
The for loop increments i from 3 to 4.
bar(8); sets i to 3...

Steps 3 and 4 repeat endlessly, since i<10 is always true.

(This sort of thing is why I don't like JavaScript.)

edited May 27, 2021 at 16:39

answered Nov 17, 2018 at 20:10

wizzwizz4

6,5212 gold badges29 silver badges68 bronze badges

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

8 Comments

Hernan Ariel Over a year ago

Thank you. But, if execution is from top to bottom (except async, etc), wouldn´t the for loop rewrite the value of i? Sorry, I´m trying to wrap my head around it.

wizzwizz4 Over a year ago

@HernanAriel Execution isn't top to bottom. Each statement is usually followed by the next. But functions cause execution to jump to somewhere else, for loops cause execution to jump to the top of the for loop... The for loop doesn't remember what number it got to; it just adds 1 to the current value of i and then checks to see if it's less than 10.

wizzwizz4 Over a year ago

I can tell you're new to programming. Might I suggest starting with a saner language than JavaScript? Like Python 3? I mean, JavaScript was one of my first languages, but I messed around with Batch and Scratch before that so I got a general familiarity with the concepts. JavaScript's just got so much... bleh.

Hernan Ariel Over a year ago

Hahaha, I wanna get into web development, so I can´t really avoid Javascript. So, just to sum up, the variables are hoisted (declared) before they are assigned a value? (So, that´s why bar i is the same as the i inside the for loop). One last question: does the for loop gets hoisted as well or not? Thanks!

juexu Over a year ago

@wizzwizz4,I thin in the fourth step of your answer,it need to be bar(8),like this answer:stackoverflow.com/questions/55260180/…

|

Ahsan Sohail · Accepted Answer · 2018-11-17 20:10:33Z

2

Javascript has this concept of hoisting .. where you can use variable before they are declared. Before you code is executed javascript brings all declaring the variable statements to the top hence making the scope of i same inside for and bar.

you can read about hoisting here https://www.w3schools.com/js/js_hoisting.asp

answered Nov 17, 2018 at 20:10

Ahsan Sohail

6706 silver badges18 bronze badges

Collectives™ on Stack Overflow

Variables with the same name in nested functions

2 Answers 2

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related