2026년 상식닷컴 선정 식당 & 카페 리스트
최근에 오픈한 호텔을 찾는다면 살펴보세요

자바스크립트에서 Array.prototype.concat()의 사용법은 무엇인가요?

_____
Q1: Array.prototype.concat()란 무엇인가요?
A1: Array.prototype.concat()은 기존 배열에 하나 이상의 배열 또는 값들을 합쳐 새로운 배열을 반환하는 메서드입니다. 원본 배열은 변경되지 않습니다.

Q2: 사용법은 어떻게 되나요?
A2:
```javascript
let newArray = arr.concat(value1, value2, ..., valueN);
```
- `arr`: 원본 배열
- `value1, value2, ...`: 배열 또는 단일 값들
- 반환값은 원본과 합쳐진 새로운 배열입니다.

Q3: 여러 개의 배열이나 값들을 한번에 합칠 수 있나요?
A3: 네, 가능합니다. 예:
```javascript
let arr1 = [1, 2];
let arr2 = [3, 4];
let arr3 = [5];
let result = arr1.concat(arr2, arr3, 6);
console.log(result); // [1,2,3,4,5,6]
```

Q4: concat()은 원본 배열을 변경하나요?
A4: 아니요. concat()은 원본 배열을 변경하지 않고 새로운 배열을 반환합니다.

Q5: 단일 값도 concat()으로 추가할 수 있나요?
A5: 네, 배열뿐 아니라 단일 값도 인자로 넘겨 추가할 수 있습니다.
예:
```javascript
let arr = [1, 2];
let result = arr.concat(3);
console.log(result); // [1, 2, 3]
```

Q6: concat()이 중첩 배열을 평탄화시켜주나요?
A6: 아닙니다. 배열을 합칠 때 1단계까지만 펼쳐서 합칩니다. 중첩 배열은 평탄화되지 않습니다.
예:
```javascript
let arr1 = [1];
let arr2 = [[2,3]];
let result = arr1.concat(arr2);
console.log(result); // [1, [2, 3]]
```

Q7: concat()과 스프레드 연산자의 차이점은 무엇인가요?
A7: 둘 다 배열 병합에 쓰이지만, concat()은 복사된 새 배열을 반환하며 중첩 배열은 1단계만 합칩니다. 스프레드 연산자(...)는 배열 내부 요소를 펼쳐서 새로운 배열에 넣기 때문에 좀 더 유연하게 병합이 가능합니다.

Q8: concat()을 빈 배열에 사용하면 어떻게 되나요?
A8: 빈 배열에 다른 배열이나 값을 concat()하면 단순히 새 배열에 추가된 값들만 들어갑니다.
예:
```javascript
[].concat([1,2], 3); // [1,2,3]
```

Q9: concat() 메서드는 어떤 상황에서 자주 사용되나요?
A9: 배열을 병합할 때 기존 배열을 변경하지 않고 새로운 배열을 만들고 싶을 때 사용합니다. 불변성을 유지하는 상태 관리에서 특히 유용합니다.

---

요약:
- `concat()`은 원본 배열을 변경하지 않고, 인자로 넘긴 배열 또는 값들을 합쳐 새 배열을 반환합니다.
- 중첩 배열은 평탄화하지 않고 1단계까지만 펼칩니다.
- 여러 개의 배열과 값을 동시에 인자로 받을 수 있습니다.
`Array.prototype.concat()`는 JavaScript에서 배열을 합치는 데 사용되는 메서드입니다.

이 메서드는 기존 배열을 변경하지 않고 새로운 배열을 반환합니다.

`concat()` 메서드는 하나 이상의 배열이나 값(원시 타입)을 인수로 받아들여, 이들을 결합하여 새로운 배열을 생성합니다.

기본 사용법 `concat()` 메서드는 다음과 같은 형식으로 사용됩니다: ```javascript let newArray = array1.concat(array2, array3, ..., value1, value2, ...); ``` 여기서 `array1`, `array2`, `array3` 등은 합칠 배열들이고, `value1`, `value2` 등은 배열에 추가할 원시 값들입니다.

예제 1. 배열 합치기 ```javascript let array1 = [1, 2, 3]; let array2 = [4, 5, 6]; let combinedArray = array1.concat(array

2); console.log(combinedArray); // [1, 2, 3, 4, 5, 6] ```

2. 여러 배열과 값 합치기 ```javascript let array1 = ['a', 'b']; let array2 = ['c', 'd']; let combinedArray = array1.concat(array2, 'e', 'f'); console.log(combinedArray); // ['a', 'b', 'c', 'd', 'e', 'f'] ```

3. 중첩 배열 합치기 `concat()` 메서드는 중첩 배열을 평탄화하지 않습니다.

즉, 배열 안에 배열이 있을 경우, 그 배열은 그대로 유지됩니다.

```javascript let array1 = [1, 2]; let array2 = [3, 4]; let nestedArray = array1.concat(array2, [5, 6]); console.log(nestedArray); // [1, 2, 3, 4, 5, 6] ```

4. 원시 값과 배열 합치기 ```javascript let array1 = [1, 2, 3]; let combinedArray = array1.concat(4,

5); console.log(combinedArray); // [1, 2, 3, 4, 5] ``` 주의사항 - `concat()` 메서드는 원본 배열을 변경하지 않습니다.

항상 새로운 배열을 반환합니다.

- `concat()` 메서드는 깊은 복사를 수행하지 않으므로, 객체나 배열을 포함하는 경우 참조가 유지됩니다.

성능 고려사항 `concat()` 메서드는 여러 개의 배열을 합치는 데 유용하지만, 대량의 데이터를 처리할 때는 성능에 영향을 줄 수 있습니다.

이 경우, `Array.prototype.push()`와 `spread operator`를 사용하는 것이 더 효율적일 수 있습니다.

```javascript let array1 = [1, 2, 3]; let array2 = [4, 5, 6]; // Spread operator 사용 let combinedArray = [...array1, ...array2]; console.log(combinedArray); // [1, 2, 3, 4, 5, 6] ``` 결론 `Array.prototype.concat()`는 배열을 결합하는 간단하고 유용한 방법입니다.

배열과 원시 값을 쉽게 결합할 수 있으며, 원본 배열을 변경하지 않는 특성 덕분에 안전하게 사용할 수 있습니다.

다양한 상황에서 배열을 합치는 데 유용하게 활용할 수 있으며, JavaScript에서 배열 작업을 할 때 자주 사용되는 메서드 중 하나입니다.

작성자: 박시연 [비회원] | 작성일자: 1년 전 2024-09-08 14:47:27
조회수: 159 | 댓글: 0 | 좋아요: 0 | 싫어요: 0
내용이 부정확하다면 싫어요를 클릭해주세요.