Zmienne, obiekty i tablice w JavaScript

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

Frontend Master 2026 · Kodożercy

Pisz kod, nie tylko prompty

Frontend Master 2026 to pakiet sześciu kursów Kodożerców (HTML, CSS, JavaScript, Git) w polskim wideo z 12-miesięcznym dostępem. Fundamenty frontu od pierwszej linijki kodu do deploy.

Wchodzę w to →

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 lub false)

• 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 i const zamiast var, 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!

Mateusz Wojdalski

Specjalista SEO i content marketingu w Devstock. Zajmuję się strategią treści, automatyzacją procesów marketingowych i wdrożeniami AI w codziennej pracy. Badam nowe narzędzia, adaptuję je do realnych zadań i piszę o tym, co faktycznie działa.