[JavaScript] 자바스크립트 concat 메서드 이해하기

conat 메서드란?

concat 메서드는 파라미터로 전달되는 값들을 기존 배열에 합쳐서 새로운 배열을 반환해주는 배열의 메서드들 중 하나이다.

한 가지 특별한 점은, 만약 파라미터로 전달되는 인자 값이 배열일 경우에는 해당 배열이 펼쳐지면서 기존 배열에 합쳐진다.

참고로, concat은 concatenation이라는 단어의 줄임말이라고 한다.

 

문법

concat 메서드는 배열에 사용되고, 파라미터로 어떤 값이든 전달할 수 있다.

const myArr = [1, 2, 3];

// arr.concat(value1, value2, ...)
console.log(myArr.concat(4, 5)); // [1, 2, 3, 4, 5]
console.log(myArr.concat('육', '칠')); // [1, 2, 3, '육', '칠']
console.log(myArr.concat(true, false)); // [1, 2, 3, true, false]
console.log(myArr.concat({name: 'bigtop'})); // [1, 2, 3, {...}]

이렇게 보면 push와 크게 다를 게 없어 보이지만, 일단 가장 큰 차이점은, push는 기존 배열의 마지막 요소로 값을 추가하는 반면, concat메서드는 slice메서드처럼 기존 배열에 아무런 영향을 주지 않는다는 것이다.

만약 파라미터에 아무런 값도 전달하지 않을 경우에는 이 부분도 slice와 마찬가지로 기존의 배열 전체가 그대로 반환된다.

const myArr = [1, 2, 3];

// arr.concat(value1, value2, ...)
console.log(myArr.concat()); // [1, 2, 3]

사실 concat메서드는 배열에 값을 추가하는 용도보다는 주로 배열과 배열을 합치는데 사용된다. 

앞서 concat메서드의 정의에서도 살펴볼 수 있듯이 파라미터로 배열이 전달될 경우에는 전달된 배열을 다 펼쳐서 합친다는 특징이 있다.

앞선 예시코드에서도 볼 수 있듯 이런 펼쳐짐(?) 현상은, 인자 값이 배열인 경우에만 해당되고 객체인 경우에는 펼쳐지지 않고 그냥 객체가 추가되니 오해하지 말아야할 부분이다.

const myArr1 = [1, 2];
const myArr2 = [3, 4];

console.log(myArr1.concat(myArr2)); // [1, 2, 3, 4]
console.log(myArr1); // [1, 2]
console.log(myArr2); // [3, 4]

위 코드의 마지막 두 줄에서 볼 수 있듯, concat메서드는 기존의 배열에는 아무런 영향도 미치지 않는다.

 

그리고 만약 여러 배열을 합치는 경우에는 그냥 파라미터로 계속해서 이어서 값을 전달해주면 된다.

단, 순서가 중요한 경우에는 가장 앞쪽으로 기준이 될 배열에 concat메서드를 활용해야 한다.

const myArr1 = [5, 6];
const myArr2 = [1, 2];
const myArr3 = [3, 4];

const sumArr = myArr2.concat(myArr3, myArr1);
console.log(sumArr); // [1, 2, 3, 4, 5, 6]

 

주의사항

하지만, 한 가지 주의해야될 부분은 인자값이 배열인 경우에도 한번만 펼칠 뿐, 중첩된 배열을 모두 펼치진 않는다.

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

console.log(arr1.concat(arr2));
// [1, 2, 3, 4, [1, 2]]

 

문자열에도!!

concat 메서드는 문자열에도 사용될 수 있다.

const str1 = 'Big';
const str2 = 'Top';

console.log(str1.concat(' ', str2)); // "Big Top"

console.log(str2.concat(', ', str1)); // "Top, Big"

단, 결과가 모두 문자열로 형 변환돼서 반환되고

- 인자가 배열인 경우에는 쉼표로 값들이 구분되어 문자열로 합쳐진 결과가,

- 인자가 객체가 경우에는 [object Object]라는 문자열이 이어 붙는다.

const str1 = 'Big';
const str2 = 'Top';

console.log(str1.concat([1, 2, 3])); // Big1,2,3
console.log(str2.concat({name: 'Bigtop'})); // Top[object Object]