#1. Zagadka JavaScript

Paweł Niedźwiecki

Hej! Co niedzielę, będę tutaj na blogu, dodawał zagadki związane z JavaScript i nie tylko, myślę, że systematyczne rozwiazywanie takich łamigłówek to świetna forma nauki programowania. Dlatego też, dziś startujemy z pierwszą zagadką z tej serii. Dziś daniem głównym jest sprawdzenie naszej wiedzy związanej z zasięgami w JS.

Jak myślisz jakie wartości uzyskamy w konsoli i po jakim czasie?

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

W powyższym przykładzie zostaną wyświetlone następujące wartości: 

3 // po 1 sekundzie

3 // po 2 sekundach 

3 // po 3 sekundach 

Krótkie objasnienie : 

Wiec setTimeout wywołuje funkcję po określonym czasie opóźnienia. W powyższym przykładzie setTimeout sprawił, iż console.log zostanie wyświetlony po zakończeniu pętli. Wykorzystanie var sprawia, że zmienna jest dostępna w function scope, tak wiec również poza blokiem pętli for. W efekcie czego, wszystkie wywołania funkcji console.log wykorzystają ostatnią wartość i=3

Jak można ograniczyć zasięg do bloku pętli?

w tym przykładzie można to zrobić w bardzo prosty sposób. Jeżeli mamy do dyspozycji ES6, wystarczy zmienić zmienną var na let. Dzięki zmiennej let ograniczymy scope do bloku pętli.

1 2 3 4 5 for (let i = 0; i < 3; i++) { setTimeout(function () { console.log(i) }, i * 1000) }

Co w przypadku, jeżeli mamy do dyspozycji tylko i wyłącznie ES5 ?

W przypadku ES5 możemy ratować się IIFE. Jeżeli nie wiesz jak działa funkcja IIFE,  tutaj masz super wyjaśnienie, czym jest funkcja IIFE i jak działa. Poniżej zastosowanie jej w praktyce, IIFE pomaga nam ograniczyć zasięg zmiennej var nie rezygnując przy tym z ES5. Uważam, że warto zna też składnię ES5, ponieważ jako programiści JS będziemy mieli z nią styczność jeszcze przez jakiś czas.

1 2 3 4 5 6 7 8 9 10 for (var i = 0; i < 3; i++) { setTimeout( (function (index) { return function () { console.log(index) } })(i), i * 1000 ) }
Paweł Niedźwiecki

elektronika, programowanie, biznes, podróże

więcej
  • praca

    Software Developer

  • lokalizacja

    Warszawa, Polska

  • wiek

    31

Więcej odPaweł

  • Add article