[ JavaScript ] 자바스크립트 배열 concat

 

 

만약 [ 1, 2, 3 ] 이렇게 세 개의 값을 가지고 있는 배열 arr 가 있다고 가정할 때,

 

4 를 배열 arr 에 추가 하고 싶다면 push 메서드를 이용하는 경우가 대부분일 것이다.

 

push 를 사용하는 것이 안 좋다는 말은 아님을 분명히 짚고 넘어가며,

 

리액트 등의 특정 환경에서는 배열안의 본래 값을 수정하면 안되는 경우도 존재함에 concat 사용을 권장한다.

 

push 는 본 배열안에 값을 직접적으로 박아넣어버리는 개념이고,

 

concat 은 배열을 하나 복사해 이 복사본에 값을 박아버리는 개념이라고 생각하면 된다.

 

 

예제 코드를 살펴보자.

let arr = [ 1, 2, 3 ];
arr.push(4);

// [ 1, 2, 3, 4 ]
console.log(arr);

 

서론에서 언급한대로 [ 1, 2, 3 ] 값을 가지고 있는 arr 배열에 4 를 push 해 추가했다.

 

그러고 arr 배열을 콘솔로 찍어보면 원 값이 아닌 [ 1, 2, 3, 4 ] 처럼 수정된 값이 나오게 된다.

 

 

이를 concat 을 적용해 작성해보면 다음과 같다.

let arr = [ 1, 2, 3 ];
let arr2 = arr.concat(4);

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

// [ 1, 2, 3 ]
console.log(arr);

 

복사한 새로운 배열 arr2 에는 [ 1, 2, 3, 4 ] 값 들이 들어가 있고,

 

기존의 arr 배열의 원 데이터는 [ 1, 2, 3 ] 값 들을 유지하고 있는 걸 볼 수 있다.

 

이는 복사에 중점을 둔 concat 이기에 가능한 일인데,

 

 

 

 

 

왜 자꾸 복사를 언급하냐면 아래의 예제를 보자.

let arr = [ 10, 20, 30 ];
let arr2 = arr.concat();

// [ 10, 20, 30 ]
console.log(arr);

// [ 10, 20, 30 ]
console.log(arr2);

 

이처럼 concat( ) 에 인자를 넣지 않으면 본 배열을 통째로 복사한다.

 

이전의 예제에서 집어넣을 값 4 를 집어넣게 되면 실행순서가

 

"본 배열을 복사 => 복사 배열에 인자 값을 추가함" 의 과정이 되는 것이다.

 

 

일반 값들 뿐 아니라 배열 내의 객체도 동일하게 concat 을 사용가능하다.

 

예제 코드를 보며 본 포스팅을 마치도록 하겠다.

const data1 = [
    { id: 1, name: '홍길동', age: 20 },
    { id: 2, name: '유재석', age: 30 },
    { id: 3, name: '이효리', age: 40 }
];
const data2 = data1.concat({ id:4, name: '강호동', age: 50 });

console.log(data1);
console.log(data2);

 

 

실행 결과는 다음과 같다. 이전의 내용과 동일하기에 설명은 따로 하지 않았다.