Pętla For … in

Zacznijmy od tego, że od około pół roku, ze względu na nową pracę, zmuszony jestem pracować z JavaScriptem. Jako programista PHP nigdy nie przywiązywałem wagi do mojego kodu JS i traktowałem ten język tylko i wyłącznie jako sposób manipulowania DOM. Od wspomnianego pół roku dużo się zmieniło: poznałem magię obiektowości tego języka opartego na prototypach, jego mocne i słabe strony, wiele się nauczyłem a także popełniłem wiele szkolnych błędów.

O jednym z tych szkolnych błędów chciałem dzisiaj napisać. Mianowicie jest to konstrukcja pętli for-in. Mogę się założyć, że wiele osób używa do końca poprawnej formy tej pętli. Moje przekonania potwierdza fakt, że wiele stron traktujących o JS pokazuje czytelnikom tylko tą formę (np. http://www.w3schools.com/js/js_loop_for_in.asp).

Teraz zagadka. Co zrobi poniższy kod?

function print() {
   document.write(id+"\n");
}

function test() {
   var obj = {
      'id1': 'val1',
      'id2': 'val2',
      'id3': 'val3'
   }

   for(id in obj) {
      print();
   }
}

test();

Dokładnie! Wypiszemy wszystkie id’ki mimo, że nie przekazaliśmy nic do funkcji print(). Okazuje się, że id jest zmienną globalną. A jak by inaczej!? JS jest konsekwentny i nawet w nagłówku pętli należy używać słowa kluczowego var. Niestety, jak pisałem, wiele źródeł nam tego nie uświadamia. Jako jeden z niewielu piszę więc – poprawna forma pętli for-in to:

for(var id in obj) {
   kod do wyołania
}

Więcej o pętli for-in:
http://javascriptweblog.wordpress.com/2011/01/04/exploring-javascript-for-in-loops/