Cách mở rộng (extend) mảng JavaScript bằng mảng khác (concat)

Để nối mảng hiện có với mảng khác, tạo mảng mới chứa tất cả phần tử, dùng phương thức Array.concat(). Phương thức này không thay đổi mảng gốc mà trả về mảng mới.

Cú pháp

const newArray = array1.concat(array2, array3, ...);

Ví dụ cơ bản

const numbers = [1, 4, 9];
const numbers2 = [2, 5];

const combined = numbers.concat(numbers2);
console.log(combined); // [1, 4, 9, 2, 5]
console.log(numbers);  // [1, 4, 9] - GỐC KHÔNG THAY ĐỔI

Nối nhiều mảng cùng lúc

const arr1 = [1, 2];
const arr2 = [3, 4];
const arr3 = [5, 6];

const all = arr1.concat(arr2, arr3, [7, 8], 9); // Cũng chấp nhận giá trị không phải mảng
console.log(all); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

Cách cũ (Mutation) - Push + Spread (ES6) - Thay đổi mảng gốc

Nếu muốn thay đổi mảng gốc (mutate) thay vì tạo mảng mới:

const numbers = [1, 4, 9];
const numbers2 = [2, 5];

// Cách 1: push + spread (ES6)
numbers.push(...numbers2);
console.log(numbers); // [1, 4, 9, 2, 5]

// Cách 2: splice (ES5)
numbers.splice(numbers.length, 0, ...numbers2);
console.log(numbers); // [1, 4, 9, 2, 5]

So sánh

Phương pháp	Thay đổi mảng gốc?	Trả về	Hiệu năng	Khuyên dùng
`arr1.concat(arr2)`	❌ Không (Immutable)	Mảng mới	Tốt	✅ Mặc định (An toàn, functional)
`arr1.push(...arr2)`	✅ Có (Mutable)	Độ dài mới	Tốt (tránh tạo mảng trung gian lớn)	✅ Khi CẦN mutate gốc
`arr1.splice(arr1.length, 0, ...arr2)`	✅ Có	Mảng phần tử xóa (rỗng)	Trung bình	⚠️ Cũ, phức tạp hơn push
`[...arr1, ...arr2]` (Spread)	❌ Không	Mảng mới	Tốt (ngắn gọn)	✅ Thay thế concat (ES6+)

⚠️ Lưu ý quan trọng

Shallow Copy: concat(), push(...), spread chỉ copy tham chiếu (reference) đối với Object/Array lồng nhau. Thay đổi object con trong mảng mới -> ảnh hưởng mảng gốc.
Hiệu năng mảng lớn: push(...arr) có thể gây "Maximum call stack size exceeded" nếu mảng quá lớn (> ~100k phần tử). Dùng vòng lặp for (const item of arr2) arr1.push(item) hoặc concat an toàn hơn.
concat() ép kiểu đối số không phải mảng thành mảng 1 phần tử: [1].concat(2, [3]) -> [1, 2, 3].

Ví dụ hoàn chỉnh (HTML)

<!DOCTYPE html>
<html>
<head>
    <title>JS Array Concat</title>
</head>
<body>
<script>
    var numbers = [1, 4, 9];
    var numbers2 = [2, 5];
    
    // concat - tạo mảng mới (khuyên dùng)
    var newNumbers = numbers.concat(numbers2);
    document.write("concat: " + newNumbers + "<br>"); // 1,4,9,2,5
    document.write("gốc: " + numbers + "<br>");       // 1,4,9
    
    // push + spread - thay đổi mảng gốc
    numbers.push(...numbers2);
    document.write("push: " + numbers + "<br>");      // 1,4,9,2,5
    
    // Spread operator (ES6) - tạo mảng mới, ngắn gọn
    var combined = [...numbers, 10, 11];
    document.write("spread: " + combined); // 1,4,9,2,5,10,11
</script>
</body>
</html>

Tóm lại: Dùng arr1.concat(arr2) hoặc [...arr1, ...arr2] (ES6) để tạo mảng mới (immutable, an toàn). Dùng arr1.push(...arr2) khi cần thay đổi mảng gốc (mutable, tiết kiệm bộ nhớ).