JS - 전개 연산자

전개 연산자는 배열이나 객체의 요소를 확장할 때 사용되는 연산자로 0개 이상의 배열을 하나의 배열로 병합할 수 있습니다.

<script>
var arr1 = [1,2,3];
var arr2 = [4,5,6];
var arr3 = [...arr1, ...arr2];

console.log(arr3);
// 1,2,3,4,5,6
</script>

위와 같이 전개 연산자는 '...iterableObj' 인 형식으로 배열을 받아 하나로 합칠 수 있을 뿐 아니라 객체 요소를 확장시킬 수 있습니다.

<script>
var arr1 = {a:1, b:2, c:3};
var arr2 = {d:4, e:5, f:6};
var arr3 = {...arr1, ...arr2};

console.log(arr3);
// a:1, b:2, c:3, d:4, e:5, f:6
</script>

아래 예제도 눈여겨볼 필요가 있습니다.

<script>
var arr1 = [1, 2, 3];
var arr2 = [1, 2, 3, ...arr1];

console.log(arr2);
// 1,2,3,1,2,3
</script>

배열을 new 키워드와 함께 사용할 수 있습니다.

<script>
var date = [2019, 06, 12];
var newdate = new Date(...date);

console.log(newdate);
// Fri Jul 12 2019 00:00:00 GMT+0900 (한국 표준시)
</script>

배열을 조합하기 위해 push(), shift(), splice(), concat() 과 같은 함수를 사용했어야 했지만 전개 연산자로 인해 코드가 보다 간결하게 되었습니다. 아래 예제는 원하는 위치에 배열을 삽입합니다.

<script>
var arr1 = [1,2,3];
var arr2 = [4,5, ...arr1, 6,7];

console.log(arr2);
// 4,5,1,2,3,6,7
</script>