자바스크립트에서 두개 이상의 배열을 하나의 배열로 합치는 방법을 소개합니다.
1. concat()을 이용하여 배열 합치기
아래와 같이 concat을 이용하여 arr1, arr2, arr3의 배열을 합칠 수 있습니다. concat()
은 원본 배열(arr1, arr2, arr3)을 변경하지 않고, 합쳐진 배열이 리턴됩니다.
const arr1 = ['a', 'b', 'c'];
const arr2 = ['1', '2', '3'];
const arr3 = ['A', 'B', 'C'];
const arr4 = arr1.concat(arr2, arr3);
console.log(arr4);
Output:
[
'a', 'b', 'c',
'1', '2', '3',
'A', 'B', 'C'
]
다음과 같이 2개의 배열만 합칠 수도 있습니다.
const arr = arr1.concat(arr2);
또한, 아래와 같은 방식으로 두개의 배열을 합칠 수도 있습니다.
const arr = [].concat(arr1, arr2);
2. Spread operator를 이용하여 배열 합치기
Spread operator는 ...
와 같이 배열의 요소들을 나열하는 전개 연산자입니다.
이 연산자를 이용하여 아래와 같이 여러 배열을 하나의 배열로 합칠 수 있습니다.
const arr1 = ['a', 'b', 'c'];
const arr2 = ['1', '2', '3'];
const arr3 = ['A', 'B', 'C'];
const arr4 = [
...arr1,
...arr2,
...arr3
];
console.log(arr4);
Output:
[
'a', 'b', 'c',
'1', '2', '3',
'A', 'B', 'C'
]
3. push()를 이용하여 배열 합치기
Spread operator와 push()
를 이용하여 아래와 같이 여러 배열을 하나의 배열로 합칠 수 있습니다.
const arr1 = ['a', 'b', 'c'];
const arr2 = ['1', '2', '3'];
const arr3 = ['A', 'B', 'C'];
const arr4 = [];
arr4.push(...arr1);
arr4.push(...arr2);
arr4.push(...arr3);
console.log(arr4);
Output:
[
'a', 'b', 'c',
'1', '2', '3',
'A', 'B', 'C'
]
만약 Spread operator를 사용하지 않고 그냥 push()
에 객체를 전달하면 아래와 같이 배열 안에 배열이 추가됩니다.
const arr1 = ['a', 'b', 'c'];
const arr2 = ['1', '2', '3'];
const arr3 = ['A', 'B', 'C'];
const arr4 = [];
arr4.push(arr1);
arr4.push(arr2);
arr4.push(arr3);
console.log(arr4);
Output:
[ [ 'a', 'b', 'c' ], [ '1', '2', '3' ], [ 'A', 'B', 'C' ] ]
Loading script...
Related Posts
- JavaScript - slice()로 배열 자르기, 나누기
- Node.js - 파일에 특정 문자열이 포함되어있는지 확인
- Node.js - 특정 패턴과 일치하는 모든 파일 찾기
- Node.js - 디렉토리의 파일 리스트 가져오기
- Node.js - 파일, 디렉토리(하위 파일) 삭제
- Node.js - 파일 이름 변경
- JavaScript - switch 조건문
- JavaScript - 배열의 특정 요소 찾기, Index 찾기
- JavaScript - 특정 값으로 배열 채우기, Array.fill()
- JavaScript - null, undefined 체크 방법
- JavaScript - 배열을 객체로 변환, 4가지 방법
- JavaScript - 이번 달(특정 달)의 1일, 마지막 일 구하기
- JavaScript - 배열의 특정 요소 삭제 방법
- JavaScript - 배열에 특정 값이 포함되어있는지 확인
- JavaScript - Date에 시간(일/시/분/초) 더하기
- JavaScript - 변수가 배열인지 확인, 3가지 방법
- JavaScript - 변수가 문자열인지 확인
- JavaScript - 문자열이 숫자인지 확인
- JavaScript - Map의 key를 배열로 변환
- JavaScript - Map의 value를 배열로 변환
- JavaScript - Map 요소 삭제 방법