[Javascript] 전개구문(spread syntax)

Spread Syntax?

ECMAScript6(2015) 에서 새로 추가된 문법이다.

spread operator는 반복 가능한(iterable) 객체에 적용할 수 있는 문법이다.

배열이나 문자열 등을 풀어서 요소 하나 하나로 전개 시킬 수 있다. 

함수 호출

매개변수에 전개구문을 사용할 수 있다.

 

구문

exFunction(...iterableObj);

예시

function add(x, y) {
	return x + y;
}

const arr = [1, 2];

console.log(add(...arr)); //3

 

 

배열 리터럴과 문자열

구문

[...iterableObj, '1', 2];

예시

const arr = [1, 2];

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

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

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

 

객체리터럴

ECMAScript(2018)에서 추가됨

 

구문

exFunction(...iterableObj);

예시

const obj1 = {
    a : '1',
    b : '2'
}

const obj2 = {
    ...obj1,
    c : '3'
};

console.log(obj1);
console.log(obj2);

 

 

Reference

- https://bigtop.tistory.com/62

- https://chanhuiseok.github.io/posts/js-8/

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