스프레드 문법, 전개 문법

하나로 뭉쳐 있는 여러 값(문자열, 배열, 객체)들의 집합을 전개해서 개별적인 값들의 목록으로 만듬

<배열을 인수 목록으로 확장해 보기>

let arr = [10, 30, 20];
console.log(...arr);
console.log(`가장 큰 값: ${Math.max(...arr)}`);         // 30

let arr1 = [10, 30, 20];
let arr2 = [100, 300, 200];

console.log(...arr1, ...arr2);
console.log(`두 배열에서 가장 작은 값: ${Math.min(...arr1, ...arr2)}`);

/* 일반 값과 혼합해서도 사용 가능 */
console.log(`가장 작은 값: ${Math.min(1, ...arr1, 2, ...arr2, 3)}`);

<스프레드 문법을 통해 배열을 생성하고 활용할 수 있음>

let merged = [10, ...arr1, ...arr2, 2];
// 하나의 배열로 합침

/* 문자열일 때 */
let str = "JavaScript";
console.log(...str);  // 1

console.log([...str]); // 2    
console.log(Array.from(str));  // 3

• 배열 간의 조합을 할 경우 concat을 통해 배열을 합쳤지만 스프레드 문법을 통해 쉽게 합칠 수 있음
• 문자열에 스프레드 문법을 사용할 경우 문자 하나씩 들어간 배열을 쉽게 만들 수 있음
  • 무언가를 배열로 바꿀 때 보편적으로 사용하는 배열의 from메소드와 동일한 성능

스프레드 문법을 이용한 배열, 객체 복사

< 배열을 복사하는 경우 >

/* 1. 배열 복사 */
let arr = [10, 30, 20];
let arrCopy = [...arr];          // 스프레드 문법을 활용한 깊은 복사

console.log(arr);
console.log(arrCopy);
console.log(arr === arrCopy);   // false 

arrCopy.push(50);
console.log(arr);     // [ 10, 30, 20 ]
console.log(arrCopy); // [ 10, 30, 20, 50 ]

전개 문법을 사용하여 객체의 프로퍼티는 복사해 올 수 있지만 객체 참조값은 다르기 때문에 동일 객체라고 볼 수 없음

<객체를 복사하는 경우>

/* 2. 객체 복사 */
let obj = {name : '홍길동', age : 20};
let objCopy = {...obj};

console.log(obj);
console.log(objCopy);
console.log(obj === objCopy); // false

objCopy.age = 30;
console.log(obj);     // { name: '홍길동', age: 20 }
console.log(objCopy); // { name: '홍길동', age: 30 }

배열과 동일하게 프로퍼티만 복사 하는 구조라서 동일 객체라고 볼 수 없음