스프레드 문법 & 디스트럭처링 할당

스프레드 문법

• 이터러블에 사용할 수 있다.
  이터러블 참고 링크
• ... 은 하나로 뭉쳐 있는 여러 값들의 집함을 펼쳐서 개별적인 값들의 목록으로 만든다.
• 연산자가 아니므로 스프레드 문법의 결과는 값이 아니며 변수에 할당할 수 없다.

//…..[1, 2, 31은 [1, 2, 3]을 개별 요소로 분리한다(1, 2, 3)
console. log(... [1, 2, 31); // 1 2 3
//문자열은 이터러블이다.
console.log(... 'Hello'); // H e l l o
//Map과 Set은 이터러블이다.
console. log(... new Map([['a', '1'], ['b', '2']])); // [ 'a', '1' ] [ 'b', '2' ]
console. log( ... new Set([1, 2, 3])); // 1 2 3
//이터러블이 아닌 일반 객체는 스프레드 문법의 대상이 될 수 없다.
console. log( ... { a: 1, b: 2 });
// TypeError: Found non-callable @@iterator

//스프레드 문법의 결과를 변수에 할당할 수 없다.
const list = ...[1,2,3]; // SyntaxError

스프레드 문법과 Rest 주의

• Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받기 위해 매개별수 앞에 ...을 붙이는 것
• 스프레드 문법은 이터러블을 펼쳐서 개별적인 값들의 목록을 만드는 것
• 즉, 서로 반대되는 개념임

//Rest
function foo (...rest){
	console.log(rest); // 1,2,3 -> [1,2,3]
}

// Spread
//[1,2,3] => 1,2,3
foo(...[1,2,3]);

스프레드 문법의 사용

• 함수 호출문의 인수 목록에 사용
• 배열 리터럴의 요소 목록에 사용
• 객체 리터럴의 프로퍼티 목록에 사용

함수 호출문의 인수 목록에서의 사용

const arr= [1,2,3];
const max = Math.max(arr); // NaN
const max = Math.max(...arr); // 3
// 위와 같다
const max = Math.max.apply(null,arr); // 3

배열 리터럴의 요소 목록에 사용

아래 코드는 참고하기 위해 원본 배열 손상과 변수 사용등의 대한 고려는 잠시 내려두고 참고하길 바란다.

//배열 결합 - concat 사용
//ES5
var arr= [1,2].concat([3,4]);
console.log(arr); // [1,2,3,4]

//ES6
const arr = [...[1,2], ...[3,4]];
console.log(arr); // [1,2,3,4]

//배열 수정 - splice 사용
//ES5
var arr1 = [1,4];
var arr2 = [2,3];
arr1.splice(1,0,arr2) 
console.log(arr1); // [1,[2,3],4]

//ES6
const arr1 = [1,4];
const arr2 = [2,3];
arr1.splice(1,0,...arr2);
console.log(arr1); // [1,2,3,4]

// 배열 복사 - slice
var origin = [1,2];
var copy = origin.slice();
console.log(copy);  // [1,2]
console.log(copy === origin); //false 

//ES6
const origin = [1,2];
const copy = [...origin]; // 얕은복사
console.log(copy);  // [1,2]
console.log(copy === origin); //false 

추가적으로 객체에서도 스프레드 문법을 사용할 수 있다.

---

배열 디스트럭처링 (구조분해) 할당

스프레드 문법과 마찬가지고 배열 구조분해 할당의 대상은 이터러블이어야 하며 할당 기준은 배열의 인덱스다.

• 변수의 개수와 이터러블의 요소 개수가 반드시 일치할 필요는 없다.
• 우변에 이터러블을 할당하지 않으면 에러가 발생한다.
• 변수에 기본값 설정이 가능하다.
  기본값보다 할당된 값이 우선이다.

const [a,b] = [1,2];
console.log(a,b) // 1 2

const [c,d] = [1,2,3];
console.log(c,d) // 1,2 

const [e,f,g] = [1,2];
console.log(e,f) // 1 2 undefined

const [h,i,j=3] = [1,2];
console.log(h,i,j) // 1 2 3

const [k,l=5,m=9] = [1,2];
console.log(k,l,m) // 1 2 9

const [q,w] = {} // TypeError
const [x,y]; // SyntaxError

객체 구조분해 할당

• 할당 기준은 프로퍼티 키다.
• 키의 순서는 상관없고 변수이름과 프로퍼티 키가 일치하면 할당 된다.

const user = {firstName: ' Joe', lastName: 'Ho'};

// 축약표현 사용
const {lastName, firstName} = user ;
// 위와 아래는 동치다.
const {lastName:lastName, firstName:firstName} = user ;

// 변수이름과 프로퍼티 키를 다르게 사용하고 싶으면
const {lastName: ln, firstname: fn} = user;
console.log(fn,ln); // Joe Ho