# A most weird javascript behaviour

**URL:** <https://forum.freecodecamp.org/t/a-most-weird-javascript-behaviour/145336>\
**Category:** General\
**Created:** [September 2, 2017, 5:31am UTC](https://forum.freecodecamp.org/t/a-most-weird-javascript-behaviour/145336 "2017-09-02T05:31:00Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![amitshrivastavafcc](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/amitshrivastavafcc/32/65932_2.png) [@amitshrivastavafcc](https://forum.freecodecamp.org/u/amitshrivastavafcc)\
**Post date:** [September 2, 2017, 5:31am UTC](https://forum.freecodecamp.org/t/a-most-weird-javascript-behaviour/145336/1 "2017-09-02T05:31:00Z")

</div>

Hi,

As i was doing my Twitch Tv project , i came across a problem where by in the for loop only the last stream was returning, i was suggested to use closure …It worked but i am unable to understand it …

For example here -

for(var i = 0;i\< 10; i++){  
for(var k = 0; k \< 5; k++){

console.log(i);  
}  
}

Now my logic says the “i” will not console log after k fails to satisfy the value but it just keeps printing ignoring value of k by acessing the value of i outside of it …My fiddle here - [https://jsfiddle.net/jinisner/Lww7akjq/](https://jsfiddle.net/jinisner/Lww7akjq/)

Kindly help me understand closure as its making all my programming understanding go haywire …

---

<div class="post-metadata">

**Author:** ![owel](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/owel/32/48425_2.png) [@owel](https://forum.freecodecamp.org/u/owel)\
**Post date:** [September 2, 2017, 6:25am UTC](https://forum.freecodecamp.org/t/a-most-weird-javascript-behaviour/145336/2 "2017-09-02T06:25:49Z")

</div>

The output of your program above is this

![](https://global.discourse-cdn.com/freecodecamp/original/3X/7/7/779c67e815243685fd528684943bfd1c2c005f9c.png)

Notice, it’s printing the value of “i” five times (5x, i.e. which is your k loop) for each unique i value.

What are you exactly trying to do? Can you let us know the output/sequence that you want.

You’re not doing anything with the value of k (you’re not printing it). You’re just using it as a counter for the inner loop, causing console.log(i) to print 5x.

* * *

Maybe this will help you see it more clearly If you replace your console.log statement with

```auto
console.log(i, k);

 0 0
 0 1
 0 2
 0 3
 0 4
 1 0
 1 1
 1 2
 1 3
 1 4
 2 0
 2 1
 2 2
 2 3
 2 4
 3 0
 3 1
 3 2
 3 3
 3 4
 4 0
 4 1
 4 2
 4 3
 4 4
 5 0
 5 1
 5 2
 5 3
 5 4
 6 0
 6 1
 6 2
 6 3
 6 4
 7 0
 7 1
 7 2
 7 3
 7 4
 8 0
 8 1
 8 2
 8 3
 8 4
 9 0
 9 1
 9 2
 9 3
 9 4

```

---

<div class="post-metadata">

**Author:** ![amitshrivastavafcc](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/amitshrivastavafcc/32/65932_2.png) [@amitshrivastavafcc](https://forum.freecodecamp.org/u/amitshrivastavafcc)\
**Post date:** [September 2, 2017, 7:02am UTC](https://forum.freecodecamp.org/t/a-most-weird-javascript-behaviour/145336/3 "2017-09-02T07:02:49Z")

</div>

@owel - thanks for your reply , so as i said earlier - here is my outer loop-

```auto
for(var i = 0;i< 10; i++){

}

which should run for i<10 , then i add another loop inside it

for(var i = 0;i< 10; i++){
for(var k = 0; k < 5; k++){

console.log(i);
}
}

this loop should run for k < 5 and do what ever i want to do , why it run 10 times ?

How can i make i print only 0,1,2,3,4

Or am i confusing it with closure as the only way i could make my code work with another for loop was by doing this ---

////-------------------
for(var k = 0; k < following.length; k++){
    (function(k){
      
      
     ////----do stuff here
     
  
    
    
     if (ourData2.stream !== null) {
        
       /////---Access K here for each individual value
     
    $("#info").prepend("<div class = 'row'>" + "<div class = 'col-md-4'>" + "<img src = ' " + logo + " ' height = '100px' width = '100px'>" +
                       "</div>" + "<div class = 'col-md-4'>" + "<a href=https://www.twitch.tv/" + following[k] + ' target="_blank">' + name + "</a>" + " is online" + "</div>" + "<div class = 'col-md-4'>" +
                       
                       status + "</div></div><p></p>");
      
     }
     
   else if(ourData2.stream === null){

//////////-----------Access k here for each value

       
 var myRequest4 = new XMLHttpRequest();
   var url4 = "https://wind-bow.glitch.me/twitch-api/channels/" + following[k];
   myRequest4.open("GET", url4, true);
     
   myRequest4.onload = function (){
 
    var ourData4 = JSON.parse(myRequest4.responseText);
     if(ourData4.logo !== null){
     var logo4 = ourData4.logo;
     }
     else {
       logo4 = "http://wtctheology.org.uk/wp-content/forum/uploads/2015/10/OpenWTC_offline_LOGO.png";
     }
      var name4 = ourData4.display_name;
      $("#OffInfo").prepend("<div class = 'row'>" + "<div class = 'col-md-4'>" + "<img src = ' " + logo4 + " ' height = '100px' width = '100px'>" +
                       "</div>" + "<div class = 'col-md-4'>" + "<a href=https://www.twitch.tv/" + following[k] + ' target="_blank">' + name4 + "</a>" + " is Offline" + "</div>" + "<div class = 'col-md-4'>" +
                       
                       "Offline" + "</div></div><p></p>");
    
    
    
   };
   
     
   
     }
  
   myRequest4.send(); 
       
   };
      
       myRequest2.send();
 
    })(k); ///////-------------call it here 
     

//////-----------------------

```

Regards

---

<div class="post-metadata">

**Author:** ![amitshrivastavafcc](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/amitshrivastavafcc/32/65932_2.png) [@amitshrivastavafcc](https://forum.freecodecamp.org/u/amitshrivastavafcc)\
**Post date:** [September 2, 2017, 8:23am UTC](https://forum.freecodecamp.org/t/a-most-weird-javascript-behaviour/145336/4 "2017-09-02T08:23:32Z")

</div>

Ok i got it, it continues the console log as the outer loop still has to fulfill its condition, getting confused with closure, IIFE etc … thanks

---

<div class="post-metadata">

**Author:** ![amitshrivastavafcc](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/amitshrivastavafcc/32/65932_2.png) [@amitshrivastavafcc](https://forum.freecodecamp.org/u/amitshrivastavafcc)\
**Post date:** [September 2, 2017, 2:44pm UTC](https://forum.freecodecamp.org/t/a-most-weird-javascript-behaviour/145336/6 "2017-09-02T14:44:45Z")

</div>

@rmdawson71 - thanks, i will surely post as you have suggested …

Regards

---

<div class="post-metadata">

**Author:** ![kevinSmith](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/kevinsmith/32/72934_2.png) [@kevinSmith](https://forum.freecodecamp.org/u/kevinSmith)\
**Post date:** [September 2, 2017, 3:36pm UTC](https://forum.freecodecamp.org/t/a-most-weird-javascript-behaviour/145336/7 "2017-09-02T15:36:45Z")

</div>

> [@jinisner](#):
>
> Ok i got it, it continues the console log as the outer loop still has to fulfill its condition, getting confused with closure, IIFE etc … thanks

But this has nothing to do with closure, IIFEs, etc. This is just normal loop operation. It is doing exactly what you are telling it to do and doing exactly what it would do in any language. I suspect that if you think that you did not understand it because of closure or IIFEs, then you have a fundamental misunderstanding of how loops work.

Your statement _Now my logic says the “i” will not console log after k fails to satisfy the value but it just keeps printing ignoring value of k by acessing the value of i outside of it_ makes me think that maybe you think the outer loop will finish before the inner loop runs? Or something like this?

But again, none of this has anything to do with closure or IIFEs. Those are both important topics, but that is not what is happening here.

To elaborate of Owel’s example, maybe this will help:

```auto
for(var i = 0;i< 10; i++){
  console.log('\n\nBeginning a new outer loop, i = ' + i);
  for(var k = 0; k < 5; k++){
    console.log('Inside inner loop, i = ' + i + ' and k = ' + k);
  }
  console.log('Back in outer loop after completing inner loop, i = ' + i);
}

```

Run that and check your console. Do some more research on for loops.

---

<div class="post-metadata">

**Author:** ![amitshrivastavafcc](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/amitshrivastavafcc/32/65932_2.png) [@amitshrivastavafcc](https://forum.freecodecamp.org/u/amitshrivastavafcc)\
**Post date:** [September 3, 2017, 6:11am UTC](https://forum.freecodecamp.org/t/a-most-weird-javascript-behaviour/145336/8 "2017-09-03T06:11:49Z")

</div>

@ksjazzguitar - yes it has noting to do with closure, but the moment i came across the looping problem in javascript and when the values where not getting printed as per the assumptions, like 0,1,2,3,4 etc but only the final value, i got confused …

Now i am thinking that as javascript was browse end it needed to hold on to things and not let them go so that it can perform operations at browser end itself , leads to all this logic of remembering scope etc …

It will take some time to get adjusted to new concepts 🙂

Thanks

---

<div class="post-metadata">

**Author:** ![kevinSmith](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/kevinsmith/32/72934_2.png) [@kevinSmith](https://forum.freecodecamp.org/u/kevinSmith)\
**Post date:** [September 3, 2017, 6:16am UTC](https://forum.freecodecamp.org/t/a-most-weird-javascript-behaviour/145336/9 "2017-09-03T06:16:43Z")

</div>

Again, scope really isn’t an issue here. And again, this functions exactly the same in any programming language (at least any I’ve learned). What if we came at this from the opposite direction - can you show us what you think this code should output? Maybe that would help us to understand what you’re not understanding.

```auto
for (var i=0; i<10; i++) {
  for (var k=0; k<5; k++) {
    console.log(i);
  }
}

```

What do you think this should output?

---

<div class="post-metadata">

**Author:** ![amitshrivastavafcc](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/amitshrivastavafcc/32/65932_2.png) [@amitshrivastavafcc](https://forum.freecodecamp.org/u/amitshrivastavafcc)\
**Post date:** [September 3, 2017, 7:10am UTC](https://forum.freecodecamp.org/t/a-most-weird-javascript-behaviour/145336/10 "2017-09-03T07:10:19Z")

</div>

I guess now that i have already tried it , i can say , it will for the outer loop value(i) of 0 print (0,1,2,3,4)(k) , then again for value of 1(i) for outer loop (0,1,2,3,4)(k) … i was confused when i saw 5 for k , but now i know that javascript holds on to the value … still a bit confusing though…

Thanks

---

<div class="post-metadata">

**Author:** ![kevinSmith](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/kevinsmith/32/72934_2.png) [@kevinSmith](https://forum.freecodecamp.org/u/kevinSmith)\
**Post date:** [September 3, 2017, 11:55pm UTC](https://forum.freecodecamp.org/t/a-most-weird-javascript-behaviour/145336/11 "2017-09-03T23:55:15Z")

</div>

It’s not “holding on to the value” in the sense that it’s doing something anything weird, it’s doing exactly what it is supposed to do. Once you set the value of _i_ it will stay that value until you change it, or if _i_ goes out of scope. But since everything is in the same scope here, scope is not relevant. Also not relevant are closure and IIFEs.

Is it the “5” that’s bothering you? If I can steal a graphic from my buddy owel:

![ik](https://global.discourse-cdn.com/freecodecamp/original/3X/7/7/779c67e815243685fd528684943bfd1c2c005f9c.png)

You need to understand what that “5” is and what it isn’t. But in order to understand that, we need to understand that _console.log_ is not technically part of JavaScript, but is part of the browser. Every browser chooses how to implement _console.log_. That “5” is not being output from JavaScript. JavaScript is outputting “1” by the _console.log_, and the console puts it on it’s own line. But your program (because of the _k_ loop) outputs each number 5 times. Rather than write the same line five times in a row, your console (and most if not all as far as I know) just writes it once and puts the “5” there to tell you that it did it 5 times in a row. Your console does this to save space and make things more readable. So, that “5” in the blue circle is not coming from your program but is coming from the console not wanting to write the same number over and over. If you change the number in the k loop, the number in the blue circle will change.

So, to refresh, your snippet:

```auto
for (var i=0; i<10; i++) {
  for (var k=0; k<5; k++) {
    console.log(i);
  }
}

```

The _i_ loop sets _i_ to _0_, then the _k_ loop logs it to the console 5 times. Because the console doesn’t want to write the same thing 5 times in a row, it writes it once and tells you that there are 5 lines in a row writing the same thing. Then your _i_ loop sets _i_ to _1_ and the _k_ loop logs it to the console 5 times …

I hope that clears it up.

---

<div class="post-metadata">

**Author:** ![amitshrivastavafcc](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/amitshrivastavafcc/32/65932_2.png) [@amitshrivastavafcc](https://forum.freecodecamp.org/u/amitshrivastavafcc)\
**Post date:** [September 4, 2017, 4:42am UTC](https://forum.freecodecamp.org/t/a-most-weird-javascript-behaviour/145336/12 "2017-09-04T04:42:18Z")

</div>

@ksjazzguitar - thanks for the very detailed explanation …

Regards

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 17, 2021, 8:40pm UTC](https://forum.freecodecamp.org/t/a-most-weird-javascript-behaviour/145336/13 "2021-01-17T20:40:37Z")

</div>

Closed on January 17, 2021, 8:40pm UTC