[JavaScript] 자바스크립트의 전개 구문(spread syntax, ...)

React Native를 사용하다 스타일링을 위한 스크립트를 작성하는 도중 ...Platform이라는 구문을 발견하게 되었다. 기존에 사용하던 언어들에서 보지 못한 특이한 종류의 구문들이 JS에서는 종종 보이는 것 같다는 느낌이 든다.

 

우선 이 전개구문(spread syntax)은 이름 처럼 객체나 배열들을 전개하여 사용할 수 있도록 해주는 문법이다. 마치 파이썬에서 함수에 인자 값들을 받을 때 *args를 이용하여 여러 인자를 한 번에 받을 때 사용하는 것과 비슷한 구문이라는 생각이 든다. 하지만 파이썬에선 *만 있으면 뒤에는 *qwer과 같이 앞에 *만 있다면 뒤에 오는 문자는 사용자 마음대로 써도 무관하지만 자바스크립트에서는 ...을 사용해야 한다는 차이점이 있다.

 

{...obj}

[...arr]

{...arr}

 

위와 같이 객체를 전개할 때는 {...obj}, 배열을 전개할 때는 [...arr], 혹은 {...arr}로 사용할 수 있다.

 

우선 객체를 전개하는 예제이다.

 

const coder = {
    name: 'alien',
    age: 26
}

const myObj = {...coder};

 

이렇게 사용하게 되면 당연히 if문으로 myObj와 coder라는 객체는 동일하지 않다. 비록 전개 구문을 이용하여 선언한 객체이지만 서로 다른 주소 값을 할당받게 되기 때문이다. 추가적으로 아래와 같이 사용도 가능하다.

 

const coder = {
    name: 'alien',
    age: 26
}

const coder2 = {
	...coder,
    hobby: 'watching movie'
}

 

하지만 객체 자체는 iterable이 아니므로 아래와 같이 사용하면 에러가 발생한다.

 

const obj = { name: 'Wayne', age: '40' };

console.log(...obj); 	// TypeError: obj is not iterable

 

또한 아래처럼 전개구문은 불변성(immutable) 유지에도 응용될 수 있다. 객체 내부의 객체에는 적용되지 않지만 전개 구문은 객체 자체에는 깊은 복사가 수행되기 때문이다.

 

const obj = { name: 'Wayne', age: '40' };
const newObj = { ...obj, name: 'Bat man' };

console.log(obj1 === newObj); 	// false

 

다음은 배열을 전개하는 경우이다.

 

const marvel = ['iron man', 'thor', 'black widow', 'hulk', 'spider man'];

const heros = [...marvel, 'batman', 'superman'];

const heros_with_index = {...marvel, 'batman', 'superman'};

 

대괄호로 감싸게 되면 배열이 되지만 중괄호로 감싸게 되면 {index: property} 형태로 반환된다. property는 다른 값과 연관을 가지고 있는 값을 의미한다. 이 역시 파이썬에 빗대어 보면 dictionary와 유사하다.

 

마지막으로 매개변수로 이용하는 경우이다.

 

function hero_list(producer, ...heros) {
    return {producer: producer, heros: heros}
}

const marvel = hero_list('Marvel', 'iron man', 'thor', 'black widow', 'hulk');
const dc = hero_list('DC', 'batman', 'superman', 'aquaman');

 

이렇게 사용하게 되면 첫 번째 인자는 producer에 들어가게 되고 이하 나머지 인자들은 모두 heros에 들어가게 된다. 차후 편리하게 사용할 수 있는 기능일 것으로 생각된다.