Chodzi o prosty, ale bardzo użyteczny mechanizm: dodanie jednego lub kilku elementów na początek tablicy bez ręcznego przebudowywania indeksów. Pokażę, jak działa `unshift()`, co zwraca, kiedy zachowuje się inaczej, niż wielu początkujących zakłada, oraz jak odróżnić sytuacje, w których lepiej użyć innego podejścia. To przydaje się zarówno w ćwiczeniach z tablicami, jak i w kodzie interfejsu, gdzie kolejność elementów ma znaczenie.
Najważniejsze fakty o dodawaniu na początek tablicy
- `unshift()` wstawia elementy na początek tablicy i zmienia oryginał.
- Zwraca nową długość tablicy, a nie samą tablicę.
- Jeśli podasz kilka argumentów naraz, zostaną dodane w tej samej kolejności.
- Wiele pojedynczych wywołań może dać inny wynik niż jedno wywołanie z kilkoma argumentami.
- Gdy nie chcesz mutować danych, lepiej sprawdzi się nowa tablica tworzona przez spread albo `toSpliced()`.
Jak działa metoda `unshift()` w tablicy
Mechanika jest prosta: metoda przesuwa istniejące elementy w prawo, a na początku zapisuje nowe wartości. Oryginalna tablica zostaje zmieniona, więc nie dostajesz kopii, tylko tę samą strukturę danych po modyfikacji. W praktyce traktuję ją jako narzędzie do list, które naturalnie rosną od najnowszego wpisu, na przykład historii aktywności, kolejki powiadomień albo listy ostatnio używanych elementów.
To ważne, bo od razu wyjaśnia dwa rzeczywiste skutki: zmienia się zawartość tablicy i zmienia się jej długość. Z tego właśnie wynika też sposób zapisu i to, jak interpretować wynik działania tej metody.
Składnia i zwracana wartość
Sama składnia jest krótka, ale warto ją czytać dokładnie, bo tu najłatwiej o pomyłkę:
tablica.unshift(element1, element2, element3);Najważniejszy szczegół brzmi tak: metoda zwraca nową długość tablicy, a nie nową tablicę. Jeśli więc zapiszesz wynik do zmiennej, dostaniesz liczbę, nie listę elementów. To jeden z tych błędów, które widuję często u osób uczących się JavaScriptu.
const koszyk = ["mleko", "chleb"];
const nowaDlugosc = koszyk.unshift("masło");
console.log(nowaDlugosc); // 3
console.log(koszyk); // ["masło", "mleko", "chleb"]Technicznie metoda jest generyczna, więc da się ją wywołać także na obiektach podobnych do tablicy, jeśli mają `length` i indeksy numeryczne. W codziennym kodzie zwykle i tak pracuje się po prostu na zwykłych tablicach. Kiedy już to masz, najlepiej zobaczyć zachowanie metody na kilku krótkich przykładach.
Przykłady, które pokazują najważniejsze zachowania
Jeden element na początek
const liczby = [2, 3];
liczby.unshift(1);
console.log(liczby); // [1, 2, 3]To najbardziej podstawowy wariant. Wstawiasz jeden element i od razu widzisz, że trafia przed wszystko, co już było w tablicy.
Kilka elementów naraz
const liczby = [4, 5, 6];
liczby.unshift(1, 2, 3);
console.log(liczby); // [1, 2, 3, 4, 5, 6]Tu widać ważną rzecz: jeśli dodajesz kilka wartości w jednym wywołaniu, ich kolejność zostaje zachowana. To praktyczniejsze niż wielokrotne wywołania, bo nie trzeba potem odwracać wyniku w głowie.
Dlaczego kolejność bywa myląca
const liczby = [4, 5, 6];
liczby.unshift(1);
liczby.unshift(2);
liczby.unshift(3);
console.log(liczby); // [3, 2, 1, 4, 5, 6]To klasyczna pułapka. Każde kolejne wywołanie dopisuje element przed aktualnym początkiem tablicy, więc ostatni dodany ląduje na samym froncie. Jeżeli chcesz zachować naturalny porządek, użyj jednego wywołania z wieloma argumentami.
Przeczytaj również: JS defer - klucz do szybszej strony? Sprawdź, jak to działa!
To nie jest automatyczne spłaszczanie tablic
const lista = [10, 20];
lista.unshift([1, 2]);
console.log(lista); // [[1, 2], 10, 20]Ten przykład dobrze pokazuje, że metoda nie „rozpakowuje” tablicy przekazanej jako argument. Wstawia ją jako pojedynczy element, więc jeśli chcesz innego efektu, musisz go przygotować świadomie. Właśnie dlatego ten temat tak dobrze łączy się z porównaniem innych metod pracy z tablicami.
Czym różni się od `push()`, `shift()` i `splice()`
Najprościej myśleć o tym tak: `unshift()` dodaje na początek, `push()` dodaje na koniec, a `shift()` usuwa pierwszy element. `splice()` jest bardziej wszechstronne, bo pozwala wstawiać elementy w dowolnym miejscu, ale przez to bywa mniej czytelne, jeśli Twoim jedynym celem jest dopisanie wartości na start.
| Metoda | Co robi | Czy mutuje tablicę | Kiedy wybrać |
|---|---|---|---|
unshift() |
Dodaje elementy na początek | Tak | Gdy nowy element ma trafić na front listy |
push() |
Dodaje elementy na koniec | Tak | Gdy kolejność rośnie od początku do końca |
shift() |
Usuwa pierwszy element | Tak | Gdy zdejmujesz element z początku kolejki |
splice(0, 0, ...) |
Wstawia elementy na wskazanej pozycji, tu na początku | Tak | Gdy potrzebujesz większej kontroli nad miejscem wstawienia |
[element, ...tablica] |
Tworzy nową tablicę z elementem na początku | Nie | Gdy chcesz uniknąć mutacji i zachować oryginał |
toSpliced(0, 0, ...) |
Tworzy nową tablicę z wstawieniem na początku | Nie | Gdy pracujesz w nowoczesnym kodzie i zależy Ci na niemutowaniu |
W praktyce wybór sprowadza się do dwóch pytań: czy chcesz zmieniać oryginał i czy naprawdę potrzebujesz wstawiania na początek, czy tylko nowej tablicy z takim samym efektem. Jeśli odpowiedź brzmi „nie chcę mutować”, wersja ze spreadem albo `toSpliced()` jest często czytelniejsza niż klasyczne operacje modyfikujące.
Najczęstsze błędy i rozsądne zamienniki
- Mylenie wyniku z tablicą. `unshift()` zwraca liczbę, więc nie przypisuj jej do zmiennej, jeśli później chcesz używać listy elementów.
- Zakładanie, że wiele pojedynczych wywołań da ten sam efekt co jedno wywołanie z kilkoma argumentami. Nie da.
- Nieświadoma mutacja współdzielonego stanu. Jeśli ta sama tablica jest używana w kilku miejscach, zmiana będzie widoczna wszędzie.
- Traktowanie tej metody jako automatycznie wygodnej dla bardzo dużych tablic. Im więcej elementów trzeba przesunąć, tym mniej naturalnie wygląda taki model pracy.
Z mechaniki tej metody wynika prosty kompromis: im większa tablica i im częściej dopisujesz z przodu, tym mniej wygodne staje się to podejście. To nie jest powód, żeby unshiftu unikać zawsze, tylko sygnał, żeby świadomie dobrać narzędzie. W kodzie UI często wolę wersję niemutującą, na przykład `const nowa = [nowyElement, ...stara]` albo `stara.toSpliced(0, 0, nowyElement)`, bo wtedy łatwiej kontrolować przepływ danych.
Kiedy `unshift()` jest najprostszym wyborem
Jeśli chcesz zapamiętać jedną rzecz, zapamiętaj tę: `unshift()` jest prosty, ale zmienia oryginalną tablicę i zwraca liczbę. Reszta to kwestia wyboru między wygodą a kontrolą nad stanem. Dla list, które mają być czytane od najnowszego elementu, to nadal bardzo sensowne narzędzie.
- Używaj go, gdy element naprawdę powinien trafić na początek listy.
- Podawaj wiele wartości naraz, jeśli mają zachować naturalny porządek.
- W kodzie bez mutacji wybieraj spread albo `toSpliced()`.
Na ćwiczeniach najlepiej sprawdza się prosty test w konsoli: tworzysz małą tablicę, dodajesz jeden element, potem kilka, a na końcu sprawdzasz, co metoda zwróciła. Taki krótki eksperyment dobrze utrwala intuicję i później oszczędza błędów w prawdziwym projekcie.
