[ES6 JavaScript] Spread syntax(전개 구문)

 안녕하세요. 오늘은 전개 구문에 대해서 공부해보도록 하겠습니다. 전개 구문은 배열이나 문자열 같이 반복 가능한 문자를 0개 이상의 인수 또는 요소로 확장하여 0개 이상의 키-값의 쌍으로 학장시킬 수 있는 문법입니다. 나머지 파라매터와 같이 ... 을 붙여 사용합니다. 그럼 어떻게 사용하는지 한 번 확인해보겠습니다.

 

Pixabay로부터 입수된 Gerd Altmann님의 이미지 입니다.  

 

함수 호출에서의 전개

apply() 대체 하기

 일반적으로 배열의 엘리먼트를 함수의 인자로 전달할 때, Function.prototype.apply()를 사용했습니다.

// apply 사용
function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction.apply(null, args);

// 전개 구문 사용
function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction(...args);

위 소스는 apply를 사용한 코드와 전개 구문을 사용한 코드입니다. 배열을 인수로 넘기기 위해 전개 구문을 사용할 수 있습니다.

 

function myFunction(v, w, x, y, z) { }
var args = [0, 1];
myFunction(-1, ...args, 2, ...[3]);
/*
	v == -1
    	w == 0
    	x == 1
    	y == 2
    	z == 3
*/

 나머지 파라매터의 경우, 함수의 마지막에만 사용 가능했지만, 전개 구문의 경우, 함수 인자의 개수가 분명하기 때문에 중간에도 사용할 수 있고 여러번 사용도 가능합니다.

 

new에 적용

var dateFields = [1970, 0, 1];  // 1 Jan 1970
var d = new Date(...dateFields);
// var d = new Date(1970, 0, 1);

 전개 구문을 이용해 new를 사용해 생성자를 호출할 때, 배열을 인자로 넘길 수 있게 되었습니다. 주석으로 처리한 아래 구문과 동일한 결과를 얻을 수 있습니다.

 

배열 리터럴에서의 전개 구문

var parts = ['shoulders', 'knees']; 
var lyrics = ['head', ...parts, 'and', 'toes']; 
// ["head", "shoulders", "knees", "and", "toes"]

 전개 구문을 사용하지 않고 이미 존재하는 배열을 일부로 하는 새로운 배열을 생성하는 것은 굉장히 불편한 일이었습니다. 하지만 전개 구문을 통해 위 예제처럼 아주 간단하게 가능합니다.

배열 복사

var arr = [1, 2, 3];
var arr2 = [...arr]; // arr.slice() 와 유사
arr2.push(4); 

console.log(arr);
console.log(arr2);
// arr2 은 [1, 2, 3, 4] 이 됨
// arr 은 영향을 받지 않고 남아 있음

 배열 복사도 전개 구문을 이용하여 간단하게 할 수 있습니다. 단, 1차원 배열일 때만 효과적으로 동작합니다. 다차원 배열에서의 복사는 적합하지 않을 수 있습니다.

배열을 연결하는 방법

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];

// arr2 의 모든 항목을 arr1 에 붙임
var concatArray = arr1.concat(arr2);
console.log(concatArray);
var spreadArray = [...arr1, ...arr2];
console.log(spreadArray);

// arr2 의 모든 항목을 arr1 의 앞에 붙임
Array.prototype.unshift.apply(arr1, arr2);
console.log(arr1);

arr1 = [0, 1, 2];
arr2 = [3, 4, 5];
arr1 = [...arr2, ...arr1];
console.log(arr1);

 이전에는 배열 위에 배열을 붙이거나 배열 앞에 배열을 붙일 경우, 아래와 같은 방법을 사용했습니다.

arr1.concat(arr2);
Array.prototype.unshift.apply(arr1, arr2);

 하지만, 전개 구문을 사용하면 더 쉽게 새로운 배열을 만들 수 있습니다.

[...arr1, ...arr2];
[...arr2, ...arr1];

 

객체 리터럴에서의 전개 구문

var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };

var clonedObj = { ...obj1 };
// Object { foo: "bar", x: 42 }

var mergedObj = { ...obj1, ...obj2 };
// Object { foo: "baz", x: 42, y: 13 }

 전개 구문을 사용하면 얕은 복사와 객체 병합을 더 쉽게 할 수 있습니다. clonedObj는 얕은 복사의 결과이고 mergedObj는 객체 병합의 결과입니다. foo 속성의 경우, obj1과 obj2에 모두 있으므로 병합될 때, 뒤 쪽에 위치한 obj2 값으로 덮여쓰여진 것을 확인할 수 있습니다.

 

 

참고: 

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax

전개 구문