[JavaScript] 전개 연산자(Spread Operator) 사용법

전개 연산자(Spread Operator)란?

전개 구문(Spread Syntax)은 ECMAScript6(2015)에서 새로 추가된 문법으로 이름 그대로 객체 혹은 배열들을 펼칠 수 있게 해 준다. 이때 전개 연산자(...)를 활용한다.

 

 

사용법

문법 자체는 정말 간단하다. 배열이나 객체 앞에 점 세 개(...)를 붙여주면 된다.

아래 사용 예시를 살펴보자.

 

사용예시 : 배열

const arr = [1, 2, 3];

console.log(arr);          // [ 1, 2, 3 ]
console.log(...arr);       // 1 2 3

 실행결과

 [ 1, 2, 3 ]

 1 2 3

실행결과를 살펴보면 첫번째 줄은 배열 자체 그대로 출력이 되지만, 전개 연산자를 사용한 두번째 줄은 배열 안의 요소들이 펼쳐져서 출력된 걸 볼 수 있다.

이를 활용한 예시도 살펴보자. 배열을 합칠 경우이다.

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const sumArr = arr1.concat(arr2);  // or Array.prototype.push.apply(arr1, arr2);

console.log(sumArr);		// [ 1, 2, 3, 4, 5, 6 ]

기존에는 위 코드처럼 concat 함수를 이용하여 두 배열의 요소를 합쳤다.

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

console.log(sumArr);		// [ 1, 2, 3, 4, 5, 6 ]

위 코드는 전개연산자를 사용한 경우이다. concat 메소드를 사용한 코드보다 간결하고, 가독성도 개선되었다.

 

concat 메소드로 새로운 배열을 만들어내는 것이 아닌, 기존 배열 요소에 값을 추가한다면 push 메소드를 사용할 것이다.

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

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

이런 방식으로도 활용할 수 있다.

 

사용예시 : 객체

const desk = {
    name: '책상',
};
const colorDesk = {
    ...desk,
    color: '검은색'
};

console.log(colorDesk);

 실행결과

 { name: '책상', color: '검은색' }

이런 식으로 객체 안에 다른 객체의 내용을 전개해서 추가로 프로퍼티를 작성할 수도있다. 

 

const desk = {
    name: '책상',
};
const color = {
    color: '검은색'
};

const wrap = { ...desk, ...color };

console.log(wrap);

 실행결과

 { name: '책상', color: '검은색' }

전개연산자를 이용하여 두 객체를 묶은 경우 각 객체의 프로퍼티가 병합된 모습을 볼 수 있다. 다만 주의할 점은 아래의 코드처럼 프로퍼티의 key 값이 동일한 경우 뒤에 있는 객체의 값만 가져오게 된다.

const desk = {
    name: '책상',
};
const monitor = {
    name: '모니터',
};

const wrap = { ...desk, ...monitor };

console.log(wrap);

 실행결과

 { name: '모니터' }

 

사용예시 : 나머지 매개변수로의 활용

전개 구문은 함수의 매개변수 전달 시 유용하게 활용할 수 있다. 넘겨주는 매개변수가 많을 경우 매개변수에 전개 구문을 활용하면 많은 인자들을 하나의 배열로 모아주는 매개변수로 활용할 수 있다. 아래의 예시를 보자.

function getObject(category, ...item) {
    return { category: category, item: item }
}

const obj = getObject('color', 'red', 'blue', 'green', 'black');

console.log(obj);

 실행결과

 { category: 'color',

   item: [ 'red', 'blue', 'green', 'black' ]

 }

getObject라는 함수 호출 시 첫번째 인자는 category 파라미터로 받게 되고, 그 이후 전달받는 인자들은 item 이라는 하나의 배열로 받게 된다. 이 경우 전달받는 인자의 갯수에 제한없이 하나의 배열로 전달받을 수 있다는 장점이 있다.

 

 

 

 

 

 

반응형