[JavaScript] 배열 합치기 - concat(), ...spread operator, push()

 

 

concat() 메서드와 ...spread operator(전개 연산자), push() 메서드를 사용해

배열을 합치는 방법을 알아보겠습니다.

 

 

• 1. concat() 메서드
• 2. ...spread operator(전개 연산자)
• 3. push() 메서드와 spread operator

 

1. concat()

concat([valueN])

Array 인스턴스의 concat() 메서드는 인자(매개변수, Parameter)로 주어진 배열이나 값들을 

기존 배열에 합쳐서 새 배열을 반환합니다. (기존 배열은 변경되지 않습니다.)

 

 

valueN

새 배열로 연결할 배열 또는 값

 

반환값

새로운 배열

 

const arr = ['a', 'b', 'c'];
const newArr = arr.concat(['d', 'e', 'f']);
console.log(newArr); // ['a', 'b', 'c', 'd', 'e', 'f']
console.log(newArr.length) // 6

console.log(arr); // ['a', 'b', 'c']
console.log(arr.length); // 3

const newArr = arr.concat(['d', 'e', 'f']);

 

arr.concat()에 3개의 값을 가진 배열을 인자로 전달하여 

3개의 값을 가진 arr배열과 병합했습니다.

['a', 'b', 'c'] + ['d', 'e', 'f'] = ['a', 'b', 'c', 'd', 'e', 'f']

 

concat() 함수는 arr배열에 전달받은 인자를 합쳐

새로운 배열을 반환했습니다.

 

concat() 메서드는 인자로 전달받은 값 순으로 배열 끝에서부터 값을 추가합니다.

위 예제에서 보이는 것처럼

인자가 배열인 경우, 배열 안에 요소들을 꺼내어 새로운 배열에 포함시킵니다.

기존 arr배열의 값은 변하지 않습니다.

새로운 newArr배열의 길이는 3이 아닌 6이 됩니다.

 

 

2. ...spread operator(전개 연산자)

ES6(ECMAScript6)에서 제공하는 spread(...) 구문을 사용하여 배열을 이어 붙일 수 있습니다.

 

스프레드 구문은 객체나 배열의 모든 요소를 ​​새 배열이나 객체에 포함해야 하거나

함수 호출의 인수(Argument) 목록에 하나씩 적용해야 할 때 사용할 수 있습니다.

여기에서는 배열에서 사용하는 방법만 설명하겠습니다.

 

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

const newArr = [...arr1, ...arr2, ...arr3];

console.log(newArr); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(newArr.length); // 9

위 예제에서 

'...'이 spread operator(전개 연산자)입니다.

...배열 리터럴은 배열의 어느 위치에서나 사용할 수 있으며 두 번 이상 사용할 수 있습니다.

 

spread operator ...은 배열의 요소를 각각 분해하여 개별 요소로 반환합니다.

newArr는 이렇게 분해된 개별 요소들을 인자로 가진 새로운 배열입니다.

 

concat() 메서드와 마찬가지로 원본 배열을 변경하지 않고, 새로운 배열을 반환합니다.

 

 

3. push() 메서드와 spread operator

push() 메서드를 사용하여 배열을 합치려면 spread operator와 함께 사용해야 합니다.

push() 메서드로 배열 합치기

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

arr1.push(arr2);
console.log(arr1); //[ 1, 2, 3, [ 4, 5, 6 ] ]
console.log(arr1.length); // 4

push() 메서드에 대해서는 아래 포스팅을 참조하세요.

[JavaScript] 배열 앞, 뒤에 요소 추가, 삭제하기 - unshift(), push(), shift(), pop()

 

push() 메서드는 배열에 값을 넣기 위해 사용되는데 

인자로 전달된 배열 자체가 push 됩니다.

 

위 예제에서 보이는 것처럼

인자로 전달된 배열은 arr1의 2번째 요소가 되어

arr1의 길이는 6이 아닌 4가 되는 것을 볼 수 있습니다.

 

 

push() 메서드와 spread operator(...)로 배열 합치기

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

arr1.push(...arr2);
console.log(arr1); // [ 1, 2, 3, 4, 5, 6 ]
console.log(arr1.length); // 6

spread operator ...은 배열의 요소를 각각 분해하여 개별 요소로 반환합니다.

 

위 예제에서 보이는 것처럼

인자로 전달되는 arr2배열에 spread operator를 사용하여 

배열의 요소를 각각 분해해 요소 하나하나가 push 되었습니다.

따라서 arr1의 길이는 6이 됩니다.

 

arr1.push(...arr2) 이 표현식은

arr1.push(4, 5, 6)와 같습니다.

 

이 방법은 원본 배열을 변경합니다.

 

 

concat(), spread operator(전개 연산자), push() 메서드와 spread operator(...)를 사용하여 

배열을 합치는 방법을 알아보았습니다.

각 상황에 따라 필요한 방법이 다르므로 필요에 따라 맞는 방법을 골라 사용하면 좋을 것 같습니다.