35장 스프레드 & 36장 디스트럭처링 & 37장 Set과 Map

35

 

p.627

- 스프레드 문법(spread syntax: 전개 문법) ... 은 하나로 뭉쳐 있는 여러 값들의 집 합을 펼쳐서 개별적인 값들의 목록으로 만든다. Array, String, Map, Set, DOM 컬렉션(NodeList, HTMLCollection), arguments와 같이 for ... of 문으로 순회할 수 있는 이터러블에 한정된다.

 

1. 함수 호출문의 인수 목록

 

p.629

- 스프레드 문법이 제공되기 이전에는 배열을 펼쳐서 요소들의 목록을 함수의 인수로 전달하고 싶은 경우 Function.prototype.apply를 사용했다. 스프레드 문법을 사용하면 더 간결하고 가독성이 좋다.

// Math.max 메서드에 숫자가 아닌 배열을 인수로 전달하면 최대값을 구할 수 없다
Math.max([1, 2, 3]); // NaN

// Function.prototype.apply
var arr = [1, 2, 3];
var max = Math.max.apply(null, arr); // 3

// 스프레드 문법
const arr = [1, 2, 3];
const max = Math.max(...arr); // 3

 

- Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받기 위해 매개변수 이름 앞에 ... 을 붙이는 것이고 스프레드 문법은 여러 개의 값이 하나로 뭉쳐 있는 배열과 같은 이터러블을 펼쳐서 개별적인 값들의 목록을 만드는 것이다. 따라서 Rest 파라미터와 스프레드 문법은 서로 반대의 개념이다.

// Rest 파라미터는 인수들의 목록을 배열로 전달받는다.
function foo(...rest) {
  console.log(rest); // 1, 2, 3 -> [1, 2, 3]
}

// 스프레드 문법은 배열과 같은 이터러블을 펼쳐서 개별적인 값들의 목록을 만든다.
// [1, 2, 3] -> 1, 2, 3
foo(...[1, 2, 3]);

 

2. 배열 리터럴 내부

- 2개의 배열을 1개의 배열로 결합

// ES5 concat
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]

- 배열 중간에 다른 배열의 요소들을 추가하거나 제거

// ES5 splice
var arr1 = [1, 4];
var arr2 = [2, 3];
Array.prototype.splice.apply(arr1, [1, 0].concat(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]

- 이터러블이 아닌 유사 배열 객체를 배열로 변경하려면 ES6에 도입된 Array.from 메서드를 사용한다.

// Array.from은 유사 배열 객체 또는 이터러블을 배열로 변환한다.
Array.from(arrayLike); // [1, 2, 3]

 

 

3. 객체 리터럴 내부

- Rest 프로퍼티와 함께 스프레드 프로퍼티를 사용하면 객체 리터럴의 프로퍼티 목록에서도 스프레드 문법을 사용할 수 있다. 스프레드 문법의 대상은 이터러블이어야 하지만 스프레드 프로퍼티 제안은 일반 객체를 대상으로 스프레드 문법의 사용을 허용한다.

// 스프레드 프로퍼티가 제안되기 이전에는 ES6에서 도입된 Object.assign 메서드를 사용하여
// 여러 개의 객체를 병합하거나 특정 프로퍼티를 변경 또는 추가했다.
const merged = Object.assign({}, {x:1, y:2}, {y:10, z:3});
console.log(merged); // {x:1, y:10, z:3}

// 객체 병합. 프로퍼티가 중복되는 경우 뒤에 위치한 프로퍼티가 우선권을 갖는다.
const merged = { ...{x:1, y:2}, ...{y:10, z:3} };
console.log(merged); // {x:1, y:10, z:3}

 

 

36

p. 636

- 디스트럭처링 할당(destructuring assignment: 구조 분해 할당)은 구조화된 배열과 같은 이터러블 또는 객체를 destructuring(비구조화, 구조 파괴)하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다. 배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용하다.

 

1. 배열 디스트럭처링 할당

 

p.637

- 배열 디스트럭처링 할당의 기준은 배열의 인덱스다. 즉, 순서대로 할당된다. 이때 변수의 개수와 이터러블의 요소 개수가 반드시 일치할 필요는 없다. 배열 디스트럭처링 할당을 위한 변수에 기본값을 설정할 수 있고 기본값보다 할당된 값이 우선된다.

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

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

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

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

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

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

 

2. 객체 디스트럭처링 할당

 

- 객체 디스트럭처링 할당의 기준은 프로퍼티 키다. 즉, 순서는 의미가 없으며 선언된 변수 이름과 프로퍼티 키가 일치하면 할당된다. 객체 리디스트럭처링 할당을 위한 변수에 기본값을 설정할 수 있고 객체를 인수로 전달받는 함수의 매개변수에도 사용할 수 있다.

const { lastName, firstName } = { firstName: 'Ungmo', lastName: 'Lee' };

const { lastName, firstName } // SyntaxError
const { lastName, firstName } = null; // TypeError

const user = { firstName: 'Ungmo', lastName: 'Lee' };
const { lastName: ln, firstName: fn } = user;
console.log(fn, ln); // Ungmo Lee

const { firstName = 'Ungmo', lastName } = { lastName: 'Lee'};
console.log(firstName, lastName); // Ungmo Lee

function printTodo({ content, completed }) {
  console.log(`할일 ${content}은 ${completed ? '완료' : '비완료'} 상태입니다.`);
}

printTodo({ id: 1, content: 'HTML', completed: true }); // 할일 HTML은 완료 상태입니다.

 

p. 642

배열의 요소가 객체인 경우 배열 디스트럭처링 할당과 객체 디스트럭처링 할당을 혼용할 수 있다.

const todos = [
  { id: 1, content: 'HTML', completed: true },
  { id: 2, content: 'CSS', completed: false },
  { id: 3, content: 'JS', completed: false }
];

// todos 배열의 두 번째 요소인 객체로부터 id 프로퍼티만 추출한다.
const [, { id }] = todos;
console.log(id); // 2

const [, , { content }] = todos;
console.log(content); // JS

 

 

37

p.643

>Set

- Set 객체는 중복되지 않는 유일한 값들의 집합(set)이다. Set 객체는 배열과 유사하지만 다음과 같은 차이가 있다.

구분	배열	Set 객체
동일한 값을 중복하여 포함할 수 있다.	O	X
요소 순서에 의미가 있다.	O	X
인덱스로 요소에 접근할 수 있다.	O	X

- Set 객체는 Set 생성자 함수로 생성하고 이터러블을 인수로 전달받아 생성한다. 이때 이터러블의 중복된 값은 Set 객체에 요소로 저장되지 않으므로 배열에서 중복된 요소를 제거할 수 있다.

const set1 = new Set([1, 2, 3, 3]);
console.log(set1); // Set(3) {1, 2, 3}

// Set.prototype.size: Set 객체의 요소 개수를 확인
const { size } = new Set([1, 2, 3, 3]);
console.log(size); // 3

// Set.prototype.add: Set 객체에 요소 추가
const set = new Set();
console.log(set); // Set(0) {}
set.add(1);
console.log(set); // Set(1) {1}
set.add(2).add(2).add(3); // 중복 무시
console.log(set); // Set(3) {1, 2, 3}

// Set.prototype.has: Set 객체 특정 요소 존재 여부 확인
const set = new Set([1, 2, 3]);
console.log(set.has(2)); // true
console.log(set.has(4)); // false

// Set.prototype.delete: Set 객체 특정 요소 삭제
const set = new Set([1, 2, 3]);
set.delete(2);
console.log(set); // Set(2) {1, 3}
set.delete(1).(delete(3); // TypeError 연속 호출 불가능

// Set.prototype.clear: Set 객체 요소 일괄 삭제
set.clear();
console.log(set); // Set(0) {}

 

- Set 객체의 요소를 순회하려면 Set.prototype.forEach 메서드를 사용한다. 첫 번째 인수와 두 번째 인수는 같은 값인데 Array.prototype.forEach 메서드와 인터페이스를 통일하기 위함이며 다른 의미는 없고 콜백 함수는 두 번째 인수로 현재 순회 중인 요소의 인덱스를 전달받지만 Set 객체는 순서에 의미가 없어 배열과 같이 인덱스를 갖지 않는다.

// Set.prototype.forEach(현재순회중인요소값, 현재순회중인요소값,현재순회중인 Set객체자체)
const set = new Set([1, 2, 3]);
set.forEach((v, v2, set) => console.log(v, v2, set));
/*
1 1 Set(3) {1, 2, 3}
2 2 Set(3) {1, 2, 3}
3 3 Set(3) {1, 2, 3}
*/

- Set 객체는 이터러블이므로 for ... of 문으로 순회할 수 있으며, 스프레드 문법과 배열 디스트럭처링의 대상이 될 수도 있다.

- Set 객체는 수학적 집합을 구현하기 위한 자료구조다. 교집합 intersection, 합집합 union, 차집합 difference, 부분집합과 상위집합 isSuperset을 통해 확인이 가능하다.

 

>Map

p.653

- Map 객체는 키와 값의 쌍으로 이루어진 컬렉션이다. Map 객체는 객체와 유사하지만 다음과 같은 차이가 있다.

구분	객체	Map 객체
키로 사용할 수 있는 값	문자열 또는 심벌 값	객체를 포함한 모든 값
이터러블	X	O
요소 개수 확인	Object.keys(obj).length	map.size

 

- 생성자 함수는 이터러블을 인수로 전달받아 Map 객체를 생성한다. 이때 인수로 전달되는 이터러블은 키와 값의 쌍으로 이루어진 요소로 구성되어야 한다.

const map1 = new Map([['key1', 'value1'], ['key2', 'value2']]);
console.log(map1); // Map(2) {"key1" => "value1", "key2" => "value2"}

// 중복된 키를 갖는 요소가 존재하면 값이 덢어써진다. (Map 객체 중복된 키 요소 존재 불가)
const map = new Map([['key1', 'value1'], ['key1', 'value2']]);
console.log(map); // Map(1) {"key1" => "value2"}

// Map.prototype.size: 요소 개수 확인
const { size } = new Map([['key1', 'value1'], ['key2', 'value2']]);
console.log(size); // 2

// Map.prototype.set: 요소 추가
const map = new Map();
consol.log(map); // Map(0) {}
map.set('key1', 'value1');
consol.log(map); // Map(1) {"key1" => "value1"}

// Map.prototype.get: 요소 취득
const map = new Map();
const lee = {name: 'Lee'};
const kim = {nameL 'Kim'};
// 연속적으로 호출(method chaning)가능
map
  .set(lee, 'developer')
  .set(kim, 'designer');
console.log(map.get(lee)); // developer
console.log(map.get('key')); // undefined

// Map.prototype.has: 요소 존재 여부 확인
console.log(map.has(lee)); // true
console.log(map.has('key')); // false

// Map.prototype.delete: 요소 삭제 (연속 호출 불가)
map.delete(kim);
console.log(map); // Map(1) { {name: "Lee"} => "developer" }

// Map.prototype.clear: 요소 일괄 삭제
map.clear();
console.log(map); // Map(0) {}

 

- Map 객체의 요소를 순회하려면 Map.prototype.forEach 메서드를 사용한다.

// Map.prototype.forEach(현재순회중인요소값, 현재순회중인요소키, 현재순회중인 Map객체자체)
const lee = { name: 'Lee' };
const kim = { name: 'Kim' };
const map = new Map([[lee, 'developer'], [kim, 'designer']]);

map.forEach((v, k, map) => console.log(v, k, map));
/*
developer {name: "Lee"} Map(2) {
  {name: "Lee"} => "developer",
  {name: "Kim"} => "designer"
}
designer {name: "Kim"} Map(2) {
  {name: "Lee"} => "developer",
  {name: "Kim"} => "Desinger"
}
*/

- Map 객체는 이터러블이므로 for ... of 문으로 순회할 수 있으며, 스프레드 문법과 배열 디스트럭처링의 대상이 될 수도 있다.

- Map 객체는 이터러블이면서 동시에 이터레이션 객체를 반환하는 메서드를 제공한다.

const lee = { name: 'Lee' }
const kim = { name: 'Kim' }

const map - new Map([[lee, 'developer'], [kim, 'designer']]);

// Map.prototype.keys: Map 객체 요소키 반환
for (const key of map.keys()) {
  console.log(key); // {name: "Lee"} {name: "Kim"}
}

// Map.prototype.values: Map 객체 요소값 반환
for (const value of map.values()) {
  console.log(value); // developer designer
}

// Map.prototype.entries: Map 객체 요소키와 요소값 반환
for (const entry of map.entries()) {
  console.log(entry); // [{name: "Lee"}, "developer"] [{name: "Kim", "designer"]
}