spread operator (...) 점 세 개를 알아보자

온점 세 개를 찍어서 표현하는 spread syntax(…)라고 한다.
이 spread operator는 S2015에서 새로 추가된 systax으로 병합, 구조 분배 할당(destructuring)등에 다양하게 활용할 수 있다.

객체/배열 병합

객체와 배열의 병합에 사용할 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
const newDBinfo = {
DATABASE_HOST: '나혜석',
DATABASE_PASSWORD: '나혜석123',
}

const config = {
DATABASE_HOST: '유관순',
DATABASE_PASSWORD: '유관순123',
DATABASE_USERNAME: 'user',
... newDBinfo,
}

const config2 = {
... newDBinfo,
DATABASE_HOST: '유관순',
DATABASE_PASSWORD: '유관순123',
DATABASE_USERNAME: 'user',

}

console.log(config)
/*
{
DATABASE_HOST: "나혜석"
DATABASE_PASSWORD: "나혜석123"
DATABASE_USERNAME: "user"
[[Prototype]]: Object
}
*/


console.log(config2)
/*
/*
{
DATABASE_HOST: "유관순"
DATABASE_PASSWORD: "유관순123"
DATABASE_USERNAME: "user"
[[Prototype]]: Object
}
*/

이 결과값으로 알 수 있듯 spread syntax(…)의 위치에 따라 덮어쓰기가 가능하다.




객체/배열 reset

객체와 배열을 자를 수 있다.

객체예시

1
2
3
4
5
6
7
8
9
10
const person = {
name: '유관순',
age: '17',
}

const {age, ...independenceData} = person
console.log(independenceData)
/*
{name: "유관순"}
*/



배열 예시

1
2
3
const [one, ...others] = [1,2,3]
console.log(one) // 1
console.log(others) // [2,3]

Comments