Czy chcesz zacząć swoją przygodę z programowaniem w JavaScript i zastanawiasz się, jak działają zmienne JavaScript? W tym artykule omówimy najważniejsze typy danych w języku JavaScript: zmienne, obiekty JS i tablice JS. Dowiesz się, jak deklarować i zarządzać danymi, a także jak manipulować tablicami i obiektami. Wprowadzimy Cię również w zagadnienia takie jak hoisting i scope, które są kluczowe dla zrozumienia działania zmiennych w JavaScript.
JavaScript – co to jest i jak zacząć naukę?
Zmienne w JavaScript
Deklarowanie zmiennych
W języku JavaScript możemy deklarować zmienne za pomocą słów kluczowych var
, let
oraz const
. Każde z nich ma swoje specyficzne zastosowanie i wpływa na zakres zmiennych.
var
– służy do deklarowania zmiennych globalnych lub funkcjonalnych. Zmienne zadeklarowane za pomocąvar
mają zakres globalny lub lokalny w funkcji.let
– wprowadzony w ECMAScript 2015, pozwala na deklarowanie zmiennych o zakresie blokowym.const
– również wprowadzony w ECMAScript 2015, służy do deklarowania stałych, czyli zmiennych, których wartość nie może zostać ponownie przypisana.
Dokumentacja zmiennych na MDN Web Docs
Przykład deklaracji zmiennych:
var liczba = 10;
let tekst = "Hello, World!";
const PI = 3.14;
Używanie let
i const
Słowo kluczowe let
używamy, gdy chcemy zadeklarować zmienną, której wartość może ulec zmianie w trakcie działania programu. const
używamy, gdy chcemy zadeklarować stałą, czyli zmienną, której wartość nie powinna być modyfikowana.
Przykład:
let zmiennaLiczbowa = 5;
zmiennaLiczbowa = 10; // wartość zmiennej zmieniona na 10
const STALA = 100;
// STALA = 200; // Błąd! Nie można zmienić wartości zmiennej const
Uwaga: Chociaż zmienna zadeklarowana za pomocą const
nie może zostać ponownie przypisana, to w przypadku obiektów i tablic możemy modyfikować ich właściwości lub elementy.
Przykład z obiektem:
const osoba = { imie: "Jan", wiek: 30 };
osoba.wiek = 31; // Dozwolone
// osoba = { imie: "Anna", wiek: 25 }; // Błąd! Nie można przypisać nowej wartości do const
Zakres zmiennych i hoisting
Zmienne globalne i lokalne
Zmienne globalne to zmienne dostępne w całym kodzie. Deklarowane są poza funkcjami lub blokami kodu.
Zmienne lokalne mają zakres ograniczony do funkcji lub bloku, w którym zostały zadeklarowane.
Przykład zmiennej globalnej i lokalnej:
let globalnaZmienna = "Jestem globalna";
function przykladFunkcji() {
let lokalnaZmienna = "Jestem lokalna";
console.log(globalnaZmienna); // Dostęp do zmiennej globalnej
console.log(lokalnaZmienna); // Dostęp do zmiennej lokalnej
}
przykladFunkcji();
// console.log(lokalnaZmienna); // Błąd! Zmienna nie jest dostępna poza funkcją
Hoisting
Hoisting to mechanizm w JavaScript, który przenosi deklaracje zmiennych i funkcji na początek ich zakresu. Dotyczy to zmiennych zadeklarowanych za pomocą var
. W przypadku let
i const
zmienne są hoistowane, ale nie można ich używać przed deklaracją.
Przykład z var
:
console.log(liczba); // Undefined
var liczba = 5;
Przykład z let
:
// console.log(tekst); // Błąd! Cannot access 'tekst' before initialization
let tekst = "Hello";
Zmienne w praktyce
Nazewnictwo zmiennych
Używaj czytelnych i opisowych nazw.
Stosuj notację camelCase dla zmiennych i funkcji.
Unikaj używania słów kluczowych jako nazw zmiennych.
Przykład:
let pierwszaLiczba = 10;
const maksymalnaWartosc = 100;
Typy zmiennych
W JavaScript istnieją podstawowe typy danych:
Number – liczby
String – ciągi znaków
Boolean – wartość logiczna (
true
lubfalse
)Null – brak wartości
Undefined – niezdefiniowana wartość
Symbol – unikalne i niezmienne wartości
BigInt – liczby całkowite o dowolnej precyzji
Przykład:
let liczba = 42; // Number
let tekst = "JavaScript"; // String
let prawda = true; // Boolean
let nic = null; // Null
let niezdefiniowane; // Undefined
Obiekty w JavaScript
Obiekty JS to struktury danych, które pozwalają przechowywać pary klucz-wartość. Są fundamentem programowania obiektowego w JavaScript.
Tworzenie obiektów
Przykład:
const osoba = {
imie: "Maria",
wiek: 28,
przedstawSie: function() {
console.log(`Cześć, mam na imię ${this.imie}`);
}
};
osoba.przedstawSie(); // Wyświetli "Cześć, mam na imię Maria"
Dostęp do właściwości obiektu
Notacja kropkowa:
console.log(osoba.imie); // Maria
Notacja nawiasów kwadratowych:
console.log(osoba["wiek"]); // 28
Modyfikacja obiektów
Możemy dodawać, modyfikować lub usuwać właściwości obiektów.
Przykład:
osoba.nazwisko = "Kowalska"; // Dodawanie nowej właściwości
osoba.wiek = 29; // Modyfikacja istniejącej właściwości
delete osoba.imie; // Usuwanie właściwości
Tablice w JavaScript
Tablice JS to uporządkowane kolekcje danych, które mogą przechowywać wiele wartości w jednej zmiennej.
Zobacz tablice w JavaScript na JavaScript.info
Tworzenie tablic
Przykład:
const liczby = [1, 2, 3, 4, 5];
let owoce = ["jabłko", "banan", "gruszka"];
Dostęp do elementów tablicy
Indeksowanie zaczyna się od 0.
console.log(owoce[0]); // "jabłko"
Metody tablicowe
JavaScript oferuje wiele metod do manipulacji tablicami.
Dodawanie elementów:
owoce.push("pomarańcza"); // Dodaje na koniec tablicy owoce.unshift("truskawka"); // Dodaje na początek tablicy
Usuwanie elementów:
owoce.pop(); // Usuwa ostatni element owoce.shift(); // Usuwa pierwszy element
Iterowanie po tablicy:
owoce.forEach(function(owoc) { console.log(owoc); });
Zmienne a obiekty i tablice
Chociaż zmienne zadeklarowane za pomocą const
nie mogą zostać ponownie przypisane, możemy modyfikować zawartość obiektów i tablic przypisanych do tych zmiennych.
Przykład z tablicą:
const liczby = [1, 2, 3];
liczby.push(4); // Dozwolone
// liczby = [5, 6, 7]; // Błąd! Nie można przypisać nowej wartości do const
Przykład z obiektem:
const ustawienia = { motyw: "jasny" };
ustawienia.motyw = "ciemny"; // Dozwolone
Scope (zakres zmiennych)
Zakres zmiennych określa, gdzie w kodzie zmienna jest dostępna.
Zakres globalny – zmienne dostępne w całym kodzie.
Zakres lokalny – zmienne dostępne tylko w obrębie funkcji lub bloku.
Przykład z let
i const
:
{
let lokalnaZmienna = "Jestem lokalna";
const lokalnaStala = "Też jestem lokalna";
console.log(lokalnaZmienna); // Dostępne
}
// console.log(lokalnaZmienna); // Błąd! Zmienna niedostępna poza blokiem
Przykład z var
:
if (true) {
var globalnaZmienna = "Jestem globalna";
}
console.log(globalnaZmienna); // Dostępne
Praktyczne wskazówki
Używaj
let
iconst
zamiastvar
, aby uniknąć problemów z hoistingiem i nieprzewidywalnym zakresem zmiennych.Deklaruj zmienne jak najbliżej miejsca ich użycia, aby zwiększyć czytelność kodu.
Stosuj stałe (
const
) tam, gdzie wartość zmiennej nie powinna się zmieniać.
Podsumowanie
Zrozumienie, jak działają zmienne JavaScript, obiekty JS i tablice JS, jest kluczowe dla efektywnego programowania w JavaScript. Znajomość różnic między var
, let
i const
, a także wiedza na temat hoistingu i zakresu zmiennych, pozwoli Ci pisać bardziej czytelny i niezawodny kod. Pamiętaj, że praktyka czyni mistrza, więc eksperymentuj i twórz własne projekty!
Zapraszamy do dalszej nauki programowania w JavaScript. Pamiętaj, że solidne podstawy to klucz do sukcesu w świecie programowania!