javaScript-전개 연산자

전개 연산자(Spread Operator)는 주로 배열이나 객체를 다룰 때 사용된다.

배열이나 객체를 펼쳐서 개별적인 요소로 분리한다.

기본적인 문법은 ...를 이용한다.

const a = [1, 2, 3]

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

말 그대로 배열이나 객체를 펼친다.

---

다른 예시를 보자.

const a = [1, 2, 3]
const b = [4, 5, 6]

const c = a.concat(b)
console.log(c)  // [1, 2, 3, 4, 5, 6] 

const d = [a, b]
console.log(d) // [[1, 2, 3], [4, 5, 6]]

여기서 concat 메소드는 두 배열 a와 b를 합쳐서 새로운 배열 c를 생성한다. 

만약 전개 연산자를 사용하면

const d = [...a, ...b]
console.log(d) // [1, 2, 3, 4, 5, 6]

 

---

 

또 다른 예시이다.

const a = { x: 1, y: 2}
const b = { y: 3, z: 4}

const c = Object.assign({}, a, b)
console.log(c)  // {x: 1, y: 3, z: 4}

const d = {a, b}
console.log(d) // { a: { x: 1, y: 2 }, b: { y: 3, z: 4 }}

여기서 

const c = Object.assign() 메소드는

첫 번째 인자로 전달된 빈 객체 {}에

두 번째 인자로 전달된 a 객체와

세 번째 인자인 b 객체의 속성들을 병합하여

새로운 객체 c를 생성한다.

 

하지만 console.log(c) 가 {x: 1, y: 3, z: 4} 인 이유는 뒤에 나오는 객체의 속성이 앞에 있는 객체의 속성을 덮어쓰기 때문이다.

만약 전개 연산자를 사용하면

const d = {...a, ...b}
console.log(d) // { x: 1, y: 3, z: 4 }

function fn(x, y, z){
	console.log(x, y, z)
}

fn(1, 2, 3)

const a = [1, 2, 3]
// fn(a[0], a[1], a[2])
// fn(1, 2, 3)
fn(...a) // 1 2 3