JavaScript - 전개연산자 spread 문법

• 2023.01.28(토) 설 연휴 과제
  references | [ES6] Spread Operator (스프레드 연산자)

---

Spread 문법

ES6에 추가된 새로운 내용 중 스프레드 연산자는 연결, 복사 등의 용도로 활용도가 높은 편이다.
(앞에 ...을 추가하면 됨.)

---

1. 배열에서의 Spread 문법

배열 병합 (Array Concatenation)

• 기존 - concat 메서드
• ES6 - spread 연산자

// 기존 방식
var arr1 = [1,2,3];
var arr2 = [4,5,6];

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

// ES6 spread syntax
var arr1 = [1,2,3];
var arr2 = [4,5,6];

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

배열 복사 (Copying Arrays)

• 기존 - slice, map
• ES6 - spread 연산자

// 기존 방식1 - slice
var arr1 = ['철수', '영희'];
var arr2 = arr1.slice();
console.log(arr2); // ['철수', '영희']

// 기존 방식2 - ES5 map
var arr1 = ['철수', '영희'];
var arr2 = arr1.map((item) => item);
console.log(arr2); // ['철수', '영희']

// ES6 spread syntax
var arr1 = ['철수', '영희'];
var arr2 = [...arr1];
console.log(arr2); // ['철수', '영희']

참고로 spread 연산자를 이용한 복사는 얕은(shallow) 복사를 수행하기 때문에 원본 배열 내의 객체를 변경하는 경우 새로운 배열 내의 객체 값도 변경된다.

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

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

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

---

2. 함수에서의 Spread 문법

Rest Parameter

함수를 호출할 때 함수의 매개변수(parameter)를 spread 문법으로 작성한 형태를 뜻함.
Rest 파라미터를 사용하면 함수의 매개변수로 오는 값들을 모아서 '배열'에 집어넣는다.

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 파라미터는 항상 제일 마지막 파라미터로 있어야 한다. function addMul(...rest, method){}와 같은 방식으로는 사용할 수 없다.

함수 호출 인자로 사용

spread 문법을 사용하면 배열 형태 그대로 바로 함수 인자로 넣어줄 수 있다.

// Math 함수 예시
var numbers = [9,4,7,1];
Math.min(...numbers); // 1

---

3. 객체에서의 Spread 문법

객체 복사 또는 업데이트

spread 문법을 활용하여 객체를 복사하거나 프로퍼티 업데이트를 할 수 있음.

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

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

---

4. Destructuring

var 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]