[Javascript] The spread opertor 스프레드 연산자(...)

 

 

---

목차

 

1.  배열에서의 Spread Operator

2. 객체에서의 Spread Operator

3. Destructuring

4. 함수에서의 Spread Operator

---

 

 

 

스프레드 연산자는 ES6에서 추가된 문법이다.

점 세개가 연달아 있는 '...'로 표시되며 특정 객체 또는 배열의 값을 다른 객체, 배열로 복제하거나 옮길 때 사용한다.

 

 

 

1.  배열에서의 스프레드 연산자

---

- 배열병합

 

ES6의 Spread 연산자를 사용하면 배열병합이 가능하다.

let arr1 = [1,2,3]; 
let arr2 = [4,5,6]; 

let arr = [...arr1, ...arr2]; 
console.log(arr); // [ 1, 2, 3, 4, 5, 6 ]

 

 

- 배열복사

 

ES6의 Spread 연산자를 사용하면 다음과 같이 새로운 복사된 배열을 생성할 수 있다.

// ES6 spread operator
let arr1 = ['철수','영희']; 
let arr2 = [...arr1]; 

arr2.push('바둑이'); 

console.log(arr2); // [ "철수", "영희", "바둑이" ]
// 원본 배열은 변경되지 않습니다.
console.log(arr1); // [ "철수", "영희" ]

 

 

참고로 스프레드 연산자를 이용한 복사는 얕은(shallow) 복사를 수행하며, 배열 안에 객체가 있는 경우에는 객체 자체는 복사되지 않고 원본 값을 참조한다. 따라서 원본 배열 내의 객체를 변경하는 경우 새로운 배열 내의 객체 값도 변경된다.

let arr1 = [{name: '철수', age: 10}]; 
let arr2 = [...arr1]; 

arr2[0].name = '영희';

console.log(arr1); // [ {name:'영희', age: 10}]
console.log(arr2); // [ {name:'영희', age: 10}]

 

 

 

2. 객체에서의 스프레드 연산자

---

- 객체 복사 또는 업데이트

 

객체에서 스프레드 연산자를 이용하여 객체의 복사 또는 프로퍼티를 업데이트 할 수 있다. 

let currentState = { name: '철수', species: 'human'};
currentState = { ...currentState, age: 10}; 

console.log(currentState)// {name: "철수", species: "human", age: 10}

currentState = { ...currentState, name: '영희', age: 11}; 
console.log(currentState); // {name: "영희", species: "human", age: 11}

 

위에서 두번째 예제는 객체의 프로퍼티를 오버라이드 함으로써 객체가 업데이트되는 것을 이용한 내용이다.

 

 

 

3. 구조 분해 할당 (Destructuring)

---

스프레드 연산자 는 배열이나 객체에서의 구조 분해 할당 (Destructuring)에 사용될 수 있다. 

let a, b, rest;
[a, b] = [10, 20];

console.log(a); // 10
console.log(b); // 20

[a, b, ...rest] = [10, 20, 30, 40, 50];

console.log(rest); // [30,40,50]

({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
console.log(a); // 10
console.log(b); // 20
console.log(rest); // {c: 30, d: 40}

 

Destructuring에 대해 더 알고 싶다면 아래를 링크를 참고하자.

https://codingtoddlerr.tistory.com/37

 

 

 

4. 함수에서의 Spread Operator

---

- Rest Parameter

 

함수를 호출할 때 함수의 매개변수(parameter)를 스프레드 연산자로 작성한 형태를 Rest parameter라고 한다. Rest Parameter를 사용하면 함수의 파라미터로 오는 값들을 모아서 배열에 집어넣는다. 이를 통해서 깔끔한 함수 표현을 적용할 수 있다. 

function add(...rest) {
  let sum = 0;
  for (let item of rest) {
    sum += item;
  }
  return sum;
}

console.log( add(1) ); // 1
console.log( add(1, 2) ); // 3
console.log( add(1, 2, 3) ); // 6

 

위의 결과에서 보이듯이 Rest Parameter를 이용하면 인자의 개수에 상관없이 모든 인자를 더하는 함수를 쉽게 구현할 수 있다. (기존 JavaScript에서는 "arguments"를 이용하여 처리할 수 있다.)