70-480 – Wdrażanie przepływu programu

70-480

Tworzenie iteracji elementów kolekcji i tablicy; zarządzanie decyzjami programu przy użyciu instrukcji switch, instrukcji if/then i operatorów; ocena wyrażeń.



Wraz z kolejną sekcją jaką jest Wdrażanie przepływu programu rozpoczynam serię poświęconą sterowaniem przepływu w naszym kodzie. Stanowi ona około 25% pytań, które pojawić się mogą na egzaminie.

Przejdźmy od razu do konkretów i pierwszego podrozdziału dzisiejszego wpisu.

Iterowanie po tablicach (for)

Standardowa pęta for nie różni się praktycznie niczym od innych języków programowania:

for (var i = 1; i <= 10; i++) {
  console.log('i: ' + i);
}

Równie proste jest iterowanie po elementach jakieś kolekcji, a konkretniej tablicy:

var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

for (var i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}

Kolejno odwołujemy się w tym wypadku do elementów w tablicy numbers, po czym wyświetlamy na konsoli wartość znajdującą się pod danym indeksem.

Istnieje także inna forma zapisu pętli for, która przy każdym wywołaniu inkrementuje indeks pozwalający odwołać się do wartości kolejnego elementu z tablicy:

var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

for (var i in numbers) {
  console.log(numbers[i]);
}

Zapis ten możemy utożsamiać sobie z pętlami forEach lub each, które dostępne są w innych językach programowania. Metoda forEach występuje także natywnie w obiekcie Array:

var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

numbers.forEach(function (item, i) {
  console.log('i: ' + i + ' item: ' + item);
});

Jako argument funkcji forEach podajemy funkcję, która wykorzystana zostanie jako callback i w parametrach przyjmować będzie odwołanie do wartości elementu (item) oraz indeks (i) z kolekcji. Sam często korzystam z biblioteki Lo-Dash, która również posiada własną implementację _.forEach dla dowolnych kolekcji.

Konstrukcje warunkowe if / else oraz switch

Instrukcje warunkowe występują w praktycznie wszystkich językach programowania. Najważniejsze to zapamiętanie, że:

  • if – wykonanie kodu w bloku nastąpi, gdy wyrażenie zwróci true
  • else – wykonanie kodu następuje w momencie, gdy wyrażenie zdefiniowane przy if zwróci false
  • if else – definicja kolejnego wyrażenia, gdy poprzednie zwróci false
if (time < 10) {
  greeting = 'Good morning';
} else if (time < 20) {
  greeting = 'Good day';
} else {
  greeting = 'Good evening';
}

Warto również wiedzieć, że porównanie z użyciem podwójnego znaku == wykonuje wykonanie instrukcji warunkowej z porównaniem co do wartości, ale nie typu. W przypadku użycia potrójnego znaku === porównanie wykonywane jest zarówno co do typu wartości po obu stronach wyrażenia. Tym samym warto używać wersji z trzema znakami =.

var number = '42';

console.log(42 == number); // true!
console.log(42 === number); // false!

Inną formą instrukcji warunkowych jest switch. Wykorzystujemy ją momencie, gdy mamy wiele bloków kodu do wykonania, a wszystkie zależne są konkretnej wartości wyrażenia. Jej użycie w JavaScript jest wręcz identyczne w porównaniu znów do innych języków programowania. Warto zapamiętać:

  • instrukcja switch wykonywana jest raz
  • wartość wyrażenia porównywana jest z sekcjami case
  • w momencie, gdy dana instrukcja case pokrywa się z wartością wyrażenia wykonywany jest blok kodu
  • polecenie break przerywa wykonywanie instrukcji switch
  • sekcja default wykonywana jest w momencie niedopasowania wartości wyrażenia do jakiejkolwiek sekcji case
  • możemy grupować sekcje case z różnymi wartościami, ale tym samym blokiem kodu do wykonania

Przykład z w3schools pokazujący wszystkie powyższe punkty:

switch (new Date().getDay()) {
  case 1:
  case 2:
  case 3:
  default: 
    text = "Looking forward to the Weekend";
    break; 
  case 4:
  case 5:
    text = "Soon it is Weekend";
    break; 
  case 0:
  case 6:
    text = "It is Weekend";
}

Funkcja eval

Ostatnim tematem wpisu jest funkcja eval. W zasadzie nie powinienem o niej pisać z racji tego, że jej wykorzystywanie jest niebezpieczne, utrudnia debuggowanie kodu oraz powoduje jego wolniejsze wykonywanie ze względu na brak optymalizacji, ale funkcja ta występuje w obiekcie window i dostępna jest z każdego miejsca w naszym kodzie. Stanowi także element, który pojawić się może w formie pytania na egzaminie 70-480.

Funkcja eval powoduje wykonanie kodu JavaScript przekazanego w formie argumentu będącego wartością typu String.

var x = 10,
	y = 20,
	a = eval('x * y');
	
console.log(a); // 200