#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
)
}