Deklaracja zmiennych w JavaScript: wyjaśnienie let i const

W tym samouczku zajmiemy się różnymi metodami deklaracji zmiennych w JavaScript, szczególnie słowami kluczowymi let i const zgodnymi z standardem ES6 w porównaniu do var, które do ES5 była jedynym sposobem na tworzenie zmiennych. Wielu deweloperów napotkało nieoczekiwane zachowania podczas korzystania z var, co prowadziło do błędów. Ta lekcja pomoże Ci zrozumieć nowoczesne metody i upewnić się, że skutecznie deklarujesz i używasz zmiennych.

Najważniejsze wnioski

Nowe deklaracje zmiennych let i const oferują korzyści związane z zakresem, widocznością i bezpieczeństwem użycia zmiennych. let pozwala na użycie zmiennej w obrębie scope bloku, podczas gdy const tworzy niezmienną przypisanie.

Przewodnik krok po kroku

Deklaracja zmiennych

Aby efektywnie pracować ze zmiennymi w JavaScript, najpierw zbadamy deklarację zmiennych za pomocą var, let i const. Zaczniemy od pliku main.js, który jest włączony w twoim dokumencie HTML.

Tutaj użyjemy słowa kluczowego var, aby zadeklarować zmienną. Stwórzmy zmienną o nazwie W i przypiszmy jej wartość początkową.

Zachowanie var

Typowym zachowaniem var jest to, że zmienna jest widoczna, nawet jeśli zostanie zainicjowana później w kodzie. Przetestujmy to:

Dodam wyjście konsolowe C przed inicjalizacją. Oczekuj wyniku, gdy ustawię zmienną C na 0. W wyjściu powinno pojawić się undefined, ponieważ wartość jest ustawiana dopiero po linii przypisania.

Wprowadzenie let

Teraz przyjrzyjmy się let. Aby pokazać różnicę, zastąp var słowem let i zainicjalizuj zmienną C jako let C = 0.

Gdy próbuję użyć C przed przypisaniem, otrzymam komunikat o błędzie, że uzyskuję dostęp do nieinicjalizowanej zmiennej. To zachowanie sprawia, że zawsze otrzymujesz błąd, gdy próbujesz uzyskać dostęp do niezdefiniowanej zmiennej.

Blockscope z let

Kolejną zaletą let jest możliwość deklaracji zmiennej w obrębie scope bloku. Użyjmy w tym celu instrukcji if:

Jeśli tworzę let C = -1 wewnątrz bloku if, ta zmienna jest widoczna tylko w tym scope bloku. Jeśli spróbuję użyć C poza blokiem, otrzymam błąd.

Użycie const

Następnym krokiem jest użycie const. Gdybym używał const zamiast let, stworzyłbym stałą zmienną, której nie można już zmienić.

Jeśli spróbuję ponownie przypisać C po przypisaniu const C = 0, pojawi się komunikat, że nie mogę przypisać nowej wartości do stałej zmiennej.

Niezmienne obiekty z const

Gdy używamy const do deklaracji obiektu, obiekt ten może być nadal zmieniany, ale nie referencja. Mogę dodawać elementy do obiektu bez dalszych problemów.

Najlepsze praktyki dotyczące użycia let i const

Na podstawie mojego doświadczenia rekomenduję domyślne użycie const, chyba że jesteś pewien, że wartość zmiennej będzie musiała być później zmieniana. Ta praktyka prowadzi do bardziej czytelnego i łatwego w utrzymaniu kodu.

Użyj let, gdy konieczne jest zmienienie wartości w obrębie scope bloku. Przykładem może być zmienna licznikowa w pętli.

Podsumowanie – Deklaracja zmiennych w JavaScript: let i const versus var

Podsumowując, zbadaliśmy różnice między var, let i const. let i const oferują istotne ulepszenia w zakresie zakresu oraz bezpieczeństwa zmiennych. Podczas gdy var jest globalny lub lokalny dla funkcji, let i const zapewniają widoczność w obrębie scope bloku. Poza tym const zapewnia niezmienność przypisania, co zmniejsza błędy i nieoczekiwane zachowanie w kodzie.