Zmienna Var i setTimeout

Question

Witam, ostatnio czytałem o domknięciach  i natknąłem się na taki przypadek, którego nie rozumiem, szukałem trochę w necie, gdzie były wyjaśnienia, ale nadal tego do końca nie rozumiem, dlaczego poniżej przy wykorzystaniu zmiennej var, otrzymuje wynik 3, a przy let już: 0,1,2. Wiem, że zmienna var jest globalną i ma zasięg poza pętlą, natomiast nie rozumiem, skąd pojawia się nagle cyfra 3 i to trzy razy:

for(var i = 0; i < 3; i++){
  setTimeout(function(){
    console.log(i);
  }, 100);
}

 

Answer 1

Jak sam napisałeś zmienna zdefiniowana przy pomocy var jest globalna. Twoja funkcja przekazana do timeouta przechwytuje tą zmienną a nie jej wartość. Po zakończeniu pętli zmienna i ma wartość 3.

Comments

Czyli mam rozumieć, że zmienna i na starcie do funkcji zostaje przekazana jako wartość 3?

---

Nie. Zmienna zostaje przekazana jako referencja a nie jako wartość. Możesz zmienić wartość zmiennej i a następne wywołania funkcji będą widziały nową wartość

for(var i = 0; i < 3; i++){
  setTimeout(function(){
    console.log(i);
    i = i * 2
  }, 100);
}

 

---

Teraz przed chwilą wyczytałem, ze najpierw wykonywana jest pętla ze względu na kolejkę zdarzeń, a dopiero wyświetlana wartość w setTimeOut co bardziej do mnie trafia skąd się bierze wartość "3". Nie wiem czy to prawda, to co wspomniałeś do referencji trochę jest dla mnie niezrozumiałe, bo jeszcze nie ruszałem obiektów.

---

Chodzi o to, że funkcja nie dostaje wartości 3 tylko widok na zmienną która cały czas jest w pamięci. Jeżeli będziesz w międzyczasie zmieniał wartość zmiennej i to za każdym wykonaniem twojej nienazwanej funkcji będziesz dostawał nową wartość.