W praktyce chodzi o metodę łączenia tablic w JavaScript, która pozwala scalić dane bez naruszania oryginałów. To wygodne, gdy budujesz listę produktów, łączysz wyniki z API albo przygotowujesz jedną tablicę do dalszego przetwarzania. Pokażę Ci, jak to działa, kiedy najlepiej użyć concat, a kiedy lepiej sięgnąć po spread, push albo flat.
Najważniejsze fakty o łączeniu tablic metodą concat
- concat tworzy nową tablicę i nie zmienia tablic wejściowych.
- Możesz połączyć dwie, trzy lub więcej tablic jednym wywołaniem.
- To płytka kopia, więc zagnieżdżone obiekty pozostają współdzielone.
- Jeśli chcesz zmodyfikować istniejącą tablicę, częściej wybierzesz
push(...drugaTablica). - Spread bywa krótszy w zapisie, ale
concatdobrze pokazuje zamiar: scalić dane i zostawić źródła w spokoju.
Jak działa concat i dlaczego nie zmienia oryginału
Najważniejsza cecha tej metody jest prosta: zwraca nową tablicę. Oznacza to, że gdy łączysz dwie listy, oryginalne zmienne pozostają takie same. To dobry wybór w kodzie, w którym zależy Ci na przewidywalności i unikaniu efektów ubocznych.
const pierwsza = ["HTML", "CSS"];
const druga = ["JavaScript", "TypeScript"];
const polaczone = pierwsza.concat(druga);
console.log(pierwsza); // ["HTML", "CSS"]
console.log(druga); // ["JavaScript", "TypeScript"]
console.log(polaczone); // ["HTML", "CSS", "JavaScript", "TypeScript"]Jeśli wywołasz concat bez argumentów, dostaniesz płytką kopię tablicy. To przydatne, gdy chcesz zachować strukturę, ale pracować na osobnym egzemplarzu. Ja traktuję ten wariant jako prosty sposób na bezpieczne skopiowanie listy, choć w nowym kodzie równie często spotkasz zapis ze spreadem.
W praktyce najważniejsze jest to, że metoda nie przepisuje niczego „w miejscu”. Jeśli chcesz tylko skleić kilka tablic w nową całość, właśnie o to chodzi. W następnym kroku zobaczysz, jak wygląda to przy większej liczbie źródeł.
Jak połączyć dwie, trzy i więcej tablic
concat dobrze sprawdza się nie tylko przy dwóch tablicach. Możesz podać kilka argumentów naraz i otrzymać jedną, uporządkowaną tablicę wynikową. Kolejność ma znaczenie, bo elementy trafiają do wyniku dokładnie w takiej kolejności, w jakiej je przekażesz.
const frontend = ["HTML", "CSS"];
const backend = ["Node.js", "Express"];
const narzedzia = ["Git", "Docker"];
const stack = frontend.concat(backend, narzedzia);
console.log(stack);
// ["HTML", "CSS", "Node.js", "Express", "Git", "Docker"]To samo podejście dobrze działa, gdy łączysz wyniki z kilku endpointów albo składasz jedną listę z różnych części aplikacji. Jeśli chcesz do tablicy dodać pojedyncze wartości, możesz je podać razem z tablicami, ale w kontekście łączenia zbiorów zwykle najczytelniejsze są same tablice.
const baza = [1, 2];
const wynik = baza.concat([3, 4], [5, 6]);
console.log(wynik); // [1, 2, 3, 4, 5, 6]W tym miejscu widać, że metoda jest po prostu przewidywalna. Nie ma tu żadnej magii: dostajesz jedną nową tablicę, ułożoną od lewej do prawej. To dobry moment, żeby zestawić ją z innymi sposobami, bo właśnie tam najłatwiej pomylić cel narzędzia z jego składnią.
concat, spread, push i flat w praktyce
Przy łączeniu tablic najczęściej wybór rozgrywa się między czterema rozwiązaniami. Każde robi coś trochę innego, więc nie warto traktować ich jako zamienników jeden do jednego.
| Metoda | Zmienia oryginał | Co otrzymujesz | Kiedy wybieram |
|---|---|---|---|
concat |
Nie | Nową tablicę połączoną z kilku źródeł | Gdy chcę scalić dane i zachować niezmienność |
[...a, ...b] |
Nie | Nową tablicę z rozpakowanych elementów | Gdy chcę krótszy, nowoczesny zapis |
a.push(...b) |
Tak | Zmodyfikowaną istniejącą tablicę | Gdy mutacja jest akceptowalna i liczy się prosty dopis |
flat() |
Nie | Tablicę spłaszczoną o określoną głębokość | Gdy mam tablicę tablic i chcę zejść poziom niżej |
Najkrócej: concat i spread służą do sklejania tablic, push do dopisywania w miejscu, a flat() do spłaszczania struktury. To ostatnie jest ważne, bo flat() nie jest zamiennikiem zwykłego łączenia. Jeśli masz [[1], [2]] i chcesz dostać [1, 2], wtedy flat() ma sens. Jeśli chcesz zachować tablice jako elementy większej całości, lepszy będzie concat.
Ja najczęściej wybieram concat, gdy kod ma być czytelny dla kolejnej osoby w zespole i nie chcę zostawiać wątpliwości, że chodzi o stworzenie nowej tablicy. To prowadzi prosto do miejsc, w których ta metoda potrafi zaskoczyć, zwłaszcza przy bardziej złożonych danych.
Na co uważać przy łączeniu tablic
Największa pułapka jest taka, że concat robi płytką kopię, a nie głębokie klonowanie. Jeśli w tablicy trzymasz obiekty albo inne tablice, nowa tablica będzie miała własny „kontener”, ale same elementy nadal mogą wskazywać na te same referencje.
Płytka kopia to nie deep clone
Przykład jest prosty: jeśli połączysz tablice zawierające obiekty i potem zmienisz właściwość jednego z obiektów, zobaczysz tę zmianę we wszystkich miejscach, które trzymają referencję do tego samego obiektu. To nie jest wada samego concat, tylko konsekwencja tego, że metoda nie kopiuje głęboko zawartości.
const a = [{ name: "Ala" }];
const b = [{ name: "Ola" }];
const razem = a.concat(b);
razem[0].name = "Asia";
console.log(a[0].name); // "Asia"Jeżeli potrzebujesz pełnego odcięcia danych, szukasz innego narzędzia niż zwykłe łączenie tablic. Warto odróżniać kopiowanie referencji od kopiowania wartości, bo to właśnie tu rodzi się większość błędów w kodzie front-endowym.
Zagnieżdżone tablice zostają zagnieżdżone
concat nie schodzi rekurencyjnie do środka tablic. Jeśli przekażesz jako argument tablicę zagnieżdżoną, dostaniesz ją jako kolejny element wyniku, a nie jej spłaszczoną zawartość.
const a = [1, 2];
const b = [[3, 4]];
console.log(a.concat(b));
// [1, 2, [3, 4]]To dobra cecha, jeśli chcesz zachować strukturę danych. To zła cecha tylko wtedy, gdy oczekujesz automatycznego spłaszczenia. Wtedy właśnie lepiej sięgnąć po flat() i świadomie ustawić głębokość.
Przeczytaj również: Pętla for w JavaScript - Pełny przewodnik i przykłady
Puste miejsca i obiekty array-like potrafią zaskoczyć
Przy tablicach rzadkich, czyli takich z pustymi slotami, concat zachowuje puste miejsca. Dla kogoś, kto patrzy tylko na wynik w konsoli, może to wyglądać jak „dziura”, ale to normalne zachowanie metody.
const sparse = [1, , 3];
const wynik = sparse.concat([4]);
console.log(wynik); // [1, empty, 3, 4]Warto też pamiętać, że metoda jest dość elastyczna wobec obiektów podobnych do tablic. Jeśli pracujesz z nietypowymi strukturami, które mają cechy array-like, zachowanie może zależeć od ich właściwości wewnętrznych. To już bardziej niszowy przypadek, ale przy integracjach z bibliotekami potrafi dać o sobie znać.
Po takich niuansach łatwiej ocenić, kiedy metoda jest naprawdę trafionym wyborem, a kiedy tylko najprostszym ruchem, który dobrze wygląda w przykładzie, ale niekoniecznie w projekcie.
Gdzie concat daje najczystszy kod w prawdziwym projekcie
W mojej praktyce concat wygrywa tam, gdzie ważna jest przewidywalność i brak efektów ubocznych. Jeśli buduję nową listę na potrzeby renderowania, filtrów, wysyłki danych albo agregacji wyników z kilku źródeł, chętnie wybieram właśnie tę metodę.
- Gdy łączę dane z API i chcę zachować oryginalne odpowiedzi bez zmian.
- Gdy składam listę do UI, a później jeszcze ją sortuję lub filtruję.
- Gdy pracuję w kodzie funkcyjnym i unikam mutowania stanu.
- Gdy czytelność jest ważniejsza niż najkrótszy możliwy zapis.
Jeśli natomiast pracujesz na jednej tablicy roboczej i świadomie chcesz ją rozszerzyć, push(...drugaTablica) bywa sensowniejszy. To oszczędza tworzenie dodatkowego obiektu wynikowego, ale płacisz za to mutacją. Ja traktuję to jako uczciwy kompromis: mniej alokacji, większa odpowiedzialność za stan.
Jeżeli mam wybrać jedną zasadę, trzymam się jej prosto: gdy chcesz stworzyć nową tablicę, użyj concat albo spreadu; gdy chcesz zmienić istniejącą, sięgnij po push. Dzięki temu kod jest czytelny nie tylko dziś, ale też za kilka miesięcy, kiedy ktoś będzie musiał go bez stresu utrzymać.
