[JavaScript] 2차원 배열의 분리와 배열끼리 합치는 방법

배열 + 배열 : [1, 2, 3] + [4, 5, 6] = [1, 2, 3, 4, 5, 6]

2개 이상의 배열이 주어지고, 이 배열을 하나의 배열로 합치고 싶을 때는 다음과 같은 방법들이 있다.

concat() 사용하기

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const result = arr1.concat(arr2);
console.log(result); // [1, 2, 3, 4, 5, 6]

concat() 메서드는 원래의 배열과 하나 이상의 배열을 합쳐서 새로운 배열을 반환해 주는 역할을 한다.

 

스프레드 연산자(...) 사용하기

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const result = [...arr1, ...arr2]
console.log(result); // [1, 2, 3, 4, 5, 6]

스프레드 연산자를 사용하면, 보다 쉽고 간편하게 배열을 합칠 수 있다. 스프레드 연산자는 배열의 값을 확장하는 기능으로 위의 코드를 예시로 들면 ...arr1 같은 경우에는 [ ]이 벗겨진 1, 2, 3이라고 할 수 있다. 따라서, 새로운 배열 안에 스프레드 연산자를 사용해 주면 배열 안에 요소들만 가져다가 새로운 배열을 만들 수 있다.

 

push() 사용하기

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

배열 안에 요소를 삽입할 때, 가장 많이 쓰이는 메서드가 바로 push()이다. push() 메서드는 배열의 가장 뒤에 새로운 요소를 추가하는 메서드로 스프레드 연산자와 함께 사용하면 배열 안의 요소들을 다른 배열 안에 통으로 넣어줄 수 있다.

 

[배열 + 배열] : [[1, 2, 3], [4, 5, 6]] = [1, 2, 3, 4, 5, 6]

다음은 2차원 배열 안에서 배열들을 모두 해체한 다음 1차원 배열로 만들고 싶을 때 사용하는 방법들이다.

 

concat()과 스프레드 연산자 사용하기

const arr = [[1, 2, 3], [4, 5, 6]];
const result = [].concat(...arr);
console.log(result); // [1, 2, 3, 4, 5, 6]

concat()은 앞에서도 설명했지만, 배열에 배열을 더해줄 때 사용하는 메서드이다.

위 코드를 보면 concat()을 사용해서 arr의 스프레드 연산자를 빈 배열에 더해주었다. 쉽게 얘기하면, concat()은 배열과 배열끼리의 더해주는 역할이라고 보면 된다. 즉, [ ] + [1, 2, 3] + [4, 5, 6] = [1, 2, 3, 4, 5, 6]이 되는 것이다.

 

flat() 사용하기

const arr = [[1, 2, 3], [4, 5, 6]];
const result = arr.flat();
console.log(result); // [1, 2, 3, 4, 5, 6]

const arr2 = [[1, 2, 3], [4, [5, 6]];
const result2 = arr2.flat();
console.log(result2); // [1, 2, 3, 4, [5, 6]]
const result3 = arr2.flat(2);
console.log(result3); // [1, 2, 3, 4, 5, 6]

flat()은 배열의 모든 하위 배열 요소를 지정된 깊이까지 재귀적으로 펼쳐서 새로운 배열을 생성하는 메서드이다.

flat()은 기본적으로 한 단계까지만 펼쳐지는데, 위의 코드를 보면 [[1, 2, 3], [4, 5, 6]]의 2차원 배열이 한 단계 펼쳐져서 [1, 2, 3, 4, 5, 6]의 1차원 배열이 된 것을 확인할 수 있다.

만약, [[1, 2, 3], [4, [5, 6]] 처럼 3차원까지 배열이 되어 있다면 이것을 1차원 배열로 어떻게 만들 수 있을까?

flat()의 파라미터로 2를 넣어주면 깊이를 2만큼 펼쳐주겠다는 뜻으로 3(차원) - 2 = 1차원 배열로 만들 수 있게 된다.

 

1. 배열 + 배열에서 '+' 역할은 concat()이 해준다. ex) [1, 2, 3].concat([4, 5, 6]) === [1, 2, 3] + [4, 5, 6]
2. flat()의 기본값은 1로 2차원 배열을 1차원 배열로 만들어주는 역할을 하며, 파라미터 값만큼 깊이를 펼쳐준다.