JavaScript

Te trzy słowa kluczowe do deklaracji zmiennych różnią się fundamentalnie, a ich właściwe użycie jest kluczowe dla pisania nowoczesnego i przewidywalnego kodu. • `var`: To starszy sposób deklaracji. Zmienne `var` mają zasięg funkcyjny (są widoczne w całej funkcji, w której zostały zadeklarowane). Podlegają hoistingowi, co oznacza, że ich deklaracja jest przenoszona na początek funkcji i inicjalizowana wartością `undefined`. Można je wielokrotnie deklarować w tym samym zakresie bez błędu. Uważane za przestarzałe i podatne na błędy. • `let`: Wprowadzone w ES6. Zmienne `let` mają zasięg blokowy (są widoczne tylko w bloku `{...}`, w którym je zadeklarowano). Również podlegają hoistingowi, ale trafiają do tzw. Temporal Dead Zone (TDZ), co oznacza, że próba dostępu do nich przed deklaracją rzuci błędem. Nie można ich ponownie zadeklarować w tym samym bloku, ale można im przypisać nową wartość. • `const`: Również ma zasięg blokowy i podlega zasadom TDZ, tak jak `let`. Główna różnica polega na tym, że jest to stała referencja. Oznacza to, że po przypisaniu wartości nie można jej ponownie przypisać. Należy jednak pamiętać, że w przypadku obiektów czy tablic, 'stała' jest referencja, a nie sama zawartość – wciąż można modyfikować właściwości obiektu lub elementy tablicy. W nowoczesnym JavaScript preferuje się użycie `const` domyślnie, a `let` tylko wtedy, gdy wiemy, że zmienna będzie musiała być ponownie przypisana.

Różnica między tymi operatorami jest kluczowa dla unikania subtelnych błędów w kodzie. • Operator `==` (luźne porównanie): Porównuje dwie wartości pod kątem równości, ale po dokonaniu konwersji typów (type coercion). Oznacza to, że jeśli wartości mają różne typy, silnik JavaScript spróbuje je sprowadzić do wspólnego typu przed porównaniem. • Operator `===` (ścisłe porównanie): Porównuje dwie wartości, ale zwraca `true` tylko wtedy, gdy mają one ten sam typ i tę samą wartość. Nie dokonuje żadnej konwersji typów. Praktyczny przykład: ```javascript 5 == '5'; // Zwróci: true (string '5' został przekonwertowany na liczbę 5) 5 === '5'; // Zwróci: false (ponieważ liczba i string to różne typy) 0 == false; // Zwróci: true (boolean false jest konwertowany na liczbę 0) 0 === false; // Zwróci: false (liczba i boolean to różne typy) ``` Zasadą dobrej praktyki jest niemal zawsze używanie ścisłego porównania `===`, aby uniknąć nieoczekiwanych zachowań związanych z niejawną konwersją typów.

Domknięcie (closure) to fundamentalny mechanizm w JavaScript. Powstaje ono, gdy funkcja wewnętrzna ma dostęp do zmiennych z zewnętrznego, otaczającego ją zakresu, nawet po tym, jak ta zewnętrzna funkcja zakończyła swoje działanie. W skrócie: funkcja 'pamięta' środowisko leksykalne, w którym została utworzona. Praktyczne zastosowania i problemy, które rozwiązuje: 1. Tworzenie prywatnych zmiennych i enkapsulacja: Możemy stworzyć funkcję, która zwraca inną funkcję. Zmienne zadeklarowane w funkcji zewnętrznej są niedostępne z zewnątrz, ale funkcja wewnętrzna ma do nich dostęp. To klasyczny sposób na emulację prywatnych pól w obiektach. ```javascript function createCounter() { let count = 0; return function() { count++; return count; }; } const counter = createCounter(); console.log(counter()); // 1 console.log(counter()); // 2 // Nie ma bezpośredniego dostępu do zmiennej 'count' ``` 2. Zachowywanie stanu: Domknięcia pozwalają na zachowanie stanu między kolejnymi wywołaniami funkcji, jak w powyższym przykładzie licznika. 3. Obsługa zdarzeń: W pętlach, przy dodawaniu event listenerów, domknięcia pozwalają 'zamknąć' poprawną wartość zmiennej iteracyjnej dla każdego listenera.

Hoisting (podnoszenie) to mechanizm w JavaScript, w którym deklaracje zmiennych i funkcji są 'przenoszone' na początek ich zakresu (scope) podczas fazy kompilacji, jeszcze przed wykonaniem kodu. Zachowanie to różni się w zależności od sposobu deklaracji: • Zmienne `var`: Deklaracje `var` są podnoszone i inicjalizowane domyślną wartością `undefined`. Oznacza to, że możemy odwołać się do zmiennej `var` przed jej deklaracją w kodzie i otrzymamy `undefined` (bez błędu). ```javascript console.log(myVar); // undefined var myVar = 10; ``` • Zmienne `let` i `const`: Deklaracje `let` i `const` również są podnoszone, ale nie są inicjalizowane żadną wartością. Od momentu rozpoczęcia bloku do miejsca deklaracji, zmienna znajduje się w tzw. Temporal Dead Zone (TDZ). Każda próba dostępu do zmiennej w TDZ skutkuje błędem `ReferenceError`. Zapobiega to przypadkowemu użyciu niezainicjalizowanej zmiennej. • Deklaracje funkcji (`function foo() {}`): Deklaracje funkcji są podnoszone w całości – zarówno nazwa, jak i ciało funkcji. Dlatego możemy wywołać funkcję, zanim zostanie ona zdefiniowana w kodzie.

Wartość słowa kluczowego `this` jest dynamiczna i zależy od kontekstu wywołania funkcji, a nie od miejsca jej zdefiniowania. Główne zasady: 1. W metodzie obiektu: `this` wskazuje na obiekt, na którym metoda została wywołana (np. `obiekt.metoda()`, `this` to `obiekt`). 2. W zwykłej funkcji: W trybie ścisłym ('use strict'), `this` ma wartość `undefined`. W trybie luźnym, wskazuje na obiekt globalny (`window` w przeglądarce). 3. W konstruktorze (z `new`): `this` wskazuje na nowo tworzoną instancję obiektu. 4. W event listenerach: `this` zazwyczaj wskazuje na element DOM, który wywołał zdarzenie. Manipulacja `this`: Możemy jawnie ustawić wartość `this` za pomocą metod: `.call()`, `.apply()` i `.bind()`. Różnią się one sposobem przekazywania argumentów do funkcji. Funkcje strzałkowe (`=>`): To kluczowa różnica. Funkcje strzałkowe nie mają własnego kontekstu `this`. Zamiast tego, `this` jest dziedziczone leksykalnie z otaczającego je zakresu. Oznacza to, że wartość `this` wewnątrz funkcji strzałkowej jest taka sama, jak na zewnątrz niej. Jest to niezwykle przydatne np. wewnątrz metod takich jak `.forEach` czy `setTimeout`, gdzie eliminuje potrzebę stosowania `bind` lub `var self = this;`.

Aby dynamicznie dodać element do struktury DOM, należy wykonać trzy kroki: 1. Stworzenie nowego elementu: Używamy metody `document.createElement()`, podając nazwę tagu jako argument. ```javascript const newParagraph = document.createElement('p'); ``` 2. Ustawienie jego zawartości: Możemy ustawić tekst wewnątrz elementu za pomocą właściwości `textContent` (zalecane dla zwykłego tekstu, ponieważ jest bezpieczniejsze) lub `innerHTML` (jeśli chcemy wstawić HTML). ```javascript newParagraph.textContent = 'Hello World!'; ``` 3. Dodanie elementu do drzewa DOM: Używamy metody `appendChild()`, aby dodać nowo stworzony element jako ostatnie dziecko wybranego rodzica, w tym przypadku `document.body`. ```javascript document.body.appendChild(newParagraph); ```