Pętle w dowolnym języku programowania to rzecz, bez której ani rusz. Można powiedzieć, że programista bez pętli jest jak żołnierz bez karabinu… albo uczeń bez jedynki.

W dzisiejszym poradniku chcielibyśmy pokazać wam podstawy działań na pętli. Ale nie będą to przykłady typu:  

for (let i = 0; i < 5; i++) {
  console.log(i);
}

…Nauka programowania jest trochę jak nauka matematyki: widzi i rozwiązuje się przy tablicy proste przykłady, a potem nagle dostajemy od życia na głowę jakieś skomplikowane działania, przez które nie możemy przebrnąć.

Przejdźmy więc do pierwszego przykładu:

const obj = { miasto: 'Poznań', city: 'Województwo wielkopolskie' };
for (let key in obj) {
  console.log(key + ': ' + obj[key]);
}

Mamy tu zwykłą pętlę for. Iteruje się ona po każdym z elementów wypisując tylko console. log. Nic nam nie zwraca.

A jakbyśmy ją trochę „upiększyli”? Co może nam w ogóle robić taka pętla, do czego może nam służyć?
Np. do tego:

const wojewodztwa = [
'Województwo dolnośląskie',
    'Województwo kujawsko-pomorskie',
    'Województwo lubelskie',
    'Województwo lubuskie',
    'Województwo łódzkie',
    'Województwo małopolskie',
    'Województwo mazowieckie',
    'Województwo opolskie',
    'Województwo podkarpackie',
    'Województwo podlaskie',
    'Województwo pomorskie',
    'Województwo śląskie',
    'Województwo świętokrzyskie',
    'Województwo warmińsko-mazurskie',
    'Województwo wielkopolskie',
    'Województwo zachodniopomorskie'
];
miasta = [
    {miasto: 'Bydgoszcz', wojewodztwo: 'Województwo kujawsko-pomorskie'},
    {miasto: 'Poznań', wojewodztwo: 'Województwo wielkopolskie'},
    {miasto: 'Warszawa', wojewodztwo: 'Województwo mazowieckie'}
];

function stworzSpisMiastWWojewodztwach() {
const spis = []
    for (let wojewodztwo of wojewodztwa) {
      const object = {
        wojewodztwo: wojewodztwo,
        miasta: []
      }
      for (let miasto of miasta) {
        if (miasto.wojewodztwo === wojewodztwo) {
          console.log('pasuje', miasto.miasto)
          object.miasta.push(miasto)
        }
      }
      spis.push(object)
    }
    console.log('spis', spis)
}

Ok, a tak właściwie co tu się dzieje? Krótko mówiąc, mamy tu pętlę w pętli. Najpierw patrzymy po kolei na wszystkie województwa i każdemu z nich się przyglądamy, a potem na warsztat bierzemy po kolei każde miasto w odniesieniu do województwa. Czy dane miasto leży w danym województwie? Jeśli tak — wepchniemy to miasto do specjalnego obiektu, który reprezentuje nam w spisie jedno województwo. Tak jak widzicie, mamy w tym obiekcie napisaną nazwę województwa i tablicę ze wszystkimi miastami.
Na koniec wszystkie takie województwa wypychamy, do jednej tablicy otrzymując pełny, ładny spis.
Uf.
Nie musicie tego ogarniać już teraz. Ale zauważcie, że w przypadku pętli for mamy jedno znaczące słówko, bez którego by się to nie odbyło:


Dokładnie. of pomaga nam się literować po konkretnej treści tego obiektu, a nie indeksie. Gdybyśmy napisali coś takiego:

 for (let wojewodztwo in wojewodztwa) {
      console.log(wojewodztwo);
    }

Otrzymalibyśmy wypisanie w konsoli numerów od 0 do 15, czyli wypisałoby nam indeksy poszczególnych elementów w tablicy.

A jeśli wypiszemy taki kod, jak jest powyżej otrzymamy wynik:


To, co właśnie zrobiliśmy, to pętla zagnieżdżona 🙂