[Javascript/ES6+] Spread(전개연산자)

출처

자바스크립트 ES6+ 기본 - 인프런 | 강의

 

---

 

🚀 Spread

 

◽ Spread

- Syntax: [...iterable]

const list = [21, 22];
console.log(11, ...list, 12);

const obj = {key: 50};
console.log({...obj});

[실행결과]

[11, 21, 22, 12]

{key: 50} // 이터러블 오브젝트는 아니지만 전개 가능

---

◽ Array Spread

1) Spread 대상 배열을 작성한 위치에 Element 단위로 분리한다.

const one = [21, 22];
const two = [31, 32];
const result = [11, ...one, 12, ...two];

console.log(result);
console.log(result.length);

[실행결과]

{11, 21, 22, 12, 31, 32}

6

 

2) 값을 대체하지 않고 전개한다.

const one = [11, 12];
const result = [11, 12, ...one];
console.log(result);
console.log(result.length);

[실행결과]

{11, 12, 11, 12}

6

---

◽ String spread

- spread 대상 문자열을 작성한 위치에 문자단위로 전개한다.

const target = "ABC;
console.log([...target]);

[실행결과]

[A, B, C]

---

◽ Object spread

[코드 1: 프로퍼티 이름이 다를 때]
const one = {key: 11, key2: 22];
const result = {key3: 33, ...one};
console.log(result);

[실행결과]

{key3: 33, key1: 11, key2: 22}

 

[코드 2: 프로퍼티 이름이 같을 때]
const one = {key: 11, key2: 22];
const result = {key1: 33, ...one};
console.log(result);

[실행결과]

// 값이 대체된다.

{key1: 33, key2: 22}

---

◽ push(...spread)

let result = [21, 22];
const add = [51, 52];
result.push(...add);
console.log(result);

result.push(..."abc");
console.log(result);

[실행결과]

[21, 22, 51, 52]

[21, 22, 51, 52, "a", "b", "c"] // 문자열을 분리하여 추가

---

◽ function spread

- 호출하는 함수의 파라미터에 spread 대상 작성

function add(one, two, three) {
    console.log(one + two + three);
}

const value = {10, 20, 30};
add(...value); // 전개한 순서대로 파라미터로 넘겨준다.

[실행결과]

60