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

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!