.gif&blockId=11b00c82-b138-8050-a58b-dcbceda2ef8f)
스프레드 문법
•
ES6에서 도입
•
하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 생성
•
스프레드 문법의 대상은 for ... of 문으로 순회할 수 있는 이터러블에 한정
•
... 은 피연산자를 연산하여 값을 생성하는 연산자가 아닌 값들의 목록 표시
•
아래와 같이 쉼표로 구분한 값의 목록을 사용하는 문맥에서만 사용 가능
◦
함수 호출문의 인수 목록
◦
배열 리터럴의 요소 목록
◦
객체 리터럴의 프로퍼티 목록
함수 호출문의 인수 목록에서 사용하는 경우
Math.max(...arr);
TypeScript
복사
•
이전에는 이것과 동일한 연산을 하기 위해 Function.prototype.apply를 사용하여 배열을 2 번째 인수에 전달하여 요소들의 목록을 제공하였다.
•
rest 파라미터의 경우 인수들의 목록을 배열로 전달받기 위해 매개변수 이름 앞에 ...을 붙임
•
스프레드 문법은 뭉쳐있는 배열과 같은 이터러블을 펼쳐서 개별적인 값들의 목록을 만듦
◦
-> 서로 반대의 개념(Rest vs 스프레드)
배열 리터럴 내부에서 사용하는 경우
•
스프레드 문법 사용 시, ES5에서 사용하던 기존 방식보다 더욱 간결하고 가독성 좋게 표현 가능
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]
TypeScript
복사
splice
•
전에는 배열을 해체하기 위해 Function.prototype.apply 메서드를 사용하여 splice 메서드 호출
// ES6 스프레드 문법
const arr1 = [1, 4];
const arr2 = [2, 3];
arr1.splice(1, 0, ...arr2);
console.log(arr1); // [1, 2, 3, 4]
TypeScript
복사
배열 복사
•
전에는 slice 메서드 사용
// ES6
const origin = [1, 2];
const copy = [...origin];
console.log(copy); // [1, 2]
console.log(copy === origin); // false
TypeScript
복사
이터러블을 배열로 변환
•
이터러블을 배열로 변환하려면 Function.prototype.apply 또는 Function.prototype.call 메서드를 사용하여 slice 메서드를 호출함 --> 이터러블뿐만 아니라 유사 배열 객체도 배열로 변환 가능
•
arguments 객체를 스프레드 문법을 사용하여 간단하게 배열로 변환 가능 --> [...arguments]
•
더 나은 방법은 Rest 파라미터 이용
const sum = (...args) => args.reduce((pre, cur) => pre + cur, 0);
console.log(sum(1, 2, 3,)); // 6
TypeScript
복사
•
이터러블이 아닌 유사 배열 객체는 스프레드 문법의 대상이 될 순 없다. --> 유사배열 객체를 Array.from 메서드를 사용해 배열로 반환하여 사용
객체 리터럴 내부에서 사용하는 경우
•
stage 4 단계에 제안이 되어있는 스프레드 프로퍼티를 사용하면 객체 리터럴의 프로퍼티 목록에서도 스프레드 문법을 사용 가능
•
스프레드 프로퍼티 전에는 ES6에서 도입된 Object.assign 메서드를 사용하여 여러개의 객체 병합
// 객체 병합. 프로퍼티가 중복되는 경우 뒤에 위치한 프로퍼티가 우선권 소유
const merged = { ... { x:1, y:2 }, ... { y:10, z:3} };
console.log(merged); // { x:1, y:10, z:3 }
// 특정 프로퍼티 변경
const changed = { ... {x: 1, y: 2 }, y: 100 };
console.log(changed); // { x:1, y:100 }
// 프로퍼티 추가
const added = { ... {x:1, y:2}, z: 0};
console.log(added) // { x:1, y:2, z:0 }
TypeScript
복사
