JavaScript · lekcja 03

var i let - pudełka na dane

Dzisiaj:

Czym jest zmienna i jak nadać jej wartość znakiem =?
Dwie różnice między var a let
Zasady nazywania zmiennych
Ćwiczenie przy komputerze: pierwsze własne zmienne

Rozgrzewka · 3 minuty

Rozgrzewka: to, co już wiecie

Gdzie wykonuje się kod JavaScript: na serwerze czy w przeglądarce?
Jakim znacznikiem HTML wstawiamy kod JavaScript do strony?
Jak otworzycie konsolę przeglądarki, żeby zobaczyć wynik console.log?

Część 1 · Zmienna i przypisanie

Czym jest zmienna?

Zmienna to miejsce w pamięci komputera, w którym JavaScript przechowuje wartość pod nazwą, którą sami wybieramy. Życiowe porównanie: zmienna to podpisane pudełko - etykieta to jej nazwa, a to, co włożymy do środka, to jej wartość. Znak = nie oznacza tu równości jak w matematyce, tylko przypisanie: „włóż tę wartość do pudełka”.

MDN: Learn_web_development/Core/Scripting/Variables (sekcje „Declaring a variable”, „Initializing a variable”)

Część 2 · Punkt zaczepienia

Z PHP już to znacie

Jeśli piszecie też w PHP, to znacie tam zmienne ze znakiem dolara, np. $name = "Ala";. W JavaScript nie ma znaku dolara - zamiast niego przed nazwą piszemy słowo let. Zasada zostaje ta sama: nazwa, znak =, wartość.

MDN: Variables (sekcja „Declaring a variable”)

Część 3 · var i let - różnica pierwsza

var i let: dwa słowa na to samo?

var to najstarszy sposób deklarowania zmiennych w JavaScript. let jest nowszy i naprawia jego problemy. Pierwsza różnica: var pozwala zadeklarować tę samą nazwę drugi raz bez błędu, let - nie.

// var: brak błędu
var myName = "Chris";
var myName = "Bob";
console.log(myName);   // "Bob"

// let: błąd składni
let x = 1;
let x = 2;
// SyntaxError: Identifier 'x' has already been declared

MDN zaleca let zamiast var we wszystkich nowych projektach - wszystkie nowoczesne przeglądarki obsługują let od 2015.

MDN: Variables (sekcja „A note about var”)

Część 4 · var i let - różnica druga

Druga różnica: zasięg bloku

Zmienna var jest widoczna w całej funkcji, nawet poza nawiasami { }, w których powstała. Zmienna let ma plakietkę „widoczna tylko w tym bloku” - poza { }, w których ją zadeklarowano, przestaje istnieć.

Ciekawostka z MDN: zmienna let od początku bloku aż do miejsca deklaracji jest w tak zwanej „strefie martwej czasowej” (temporal dead zone) - dlatego mówi się, że let nie jest hoistowany, w przeciwieństwie do var.

MDN: Variables (sekcja „A note about var”, zasięg i hoisting) · ciekawostka: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let (sekcja „Temporal dead zone (TDZ)”)

Część 5 · Nazwy zmiennych

Jak nazwać zmienną?

Nazwa może zawierać litery łacińskie, cyfry i podkreślnik. Nie może zaczynać się od cyfry ani od podkreślnika. Nie może być słowem kluczowym JavaScript (var, let, function, for). Powinna opisywać, co przechowuje. Konwencja zapisu to camelCase: pierwszy wyraz małą literą, kolejne - wielką na początku.

Poprawne	Niepoprawne	Dlaczego
`age`	`1age`	nazwa nie może zaczynać się od cyfry
`myAge`	`_age`	nazwa nie może zaczynać się od podkreślnika
`initialColor`	`var`	to słowo kluczowe JavaScript, nie wolno go użyć jako nazwy

MDN: Variables (sekcja „An aside on variable naming rules”)

Ćwiczenie przy komputerze · 20 minut

Ćwiczenie: pierwsze własne zmienne

Otwórz plik script.js w folderze ze swoją stroną (ten sam, do którego dołączyliście <script src="script.js"> na poprzedniej lekcji).
Zadeklaruj zmienną let name i przypisz jej swoje imię jako tekst w cudzysłowie.
Zadeklaruj zmienną let age i przypisz jej swój wiek jako liczbę, bez cudzysłowu.
Dopisz console.log(name + " ma " + age + " lat");.
Zapisz plik, odśwież page.html w przeglądarce i sprawdź wynik w konsoli (F12 → Console).
Dla chętnych: zmień w kodzie wartość zmiennej age, zapisz plik i odśwież stronę.

Na koniec

Sprawdź się

Czym różni się zmienna zadeklarowana przez var od zmiennej zadeklarowanej przez let?
Dlaczego nazwa zmiennej nie może zaczynać się od cyfry?
Co się stanie, gdy spróbujemy odczytać zmienną let poza blokiem { }, w którym została zadeklarowana?

Na następnej lekcji: stała const i podstawowe typy danych w JavaScript.

Poza szkołą

A jak to wygląda w produkcji?

Na lekcji	W produkcji	Status
`var` - najstarszy sposób deklaracji	`let` i `const`, zalecane przez MDN we wszystkich nowych projektach od 2015	zastępowane
Zmienna widoczna w całej funkcji	Zmienne ograniczone do bloku `{ }`, w którym powstały - mniej pomyłek w dużym kodzie	nadal w użyciu
Nazwy zmiennych sprawdzane przez człowieka	Linter (np. ESLint) automatycznie sprawdza nazwy i styl kodu w każdym projekcie	narzędzia
Literówka w nazwie widoczna dopiero po uruchomieniu	Edytor kodu (np. VS Code) podkreśla nieznaną zmienną na bieżąco, przed uruchomieniem	narzędzia

MDN: Variables (sekcje „A note about var”, „When to use const and when to use let”) - rekomendacja od 2015