모던 자바스크립트 딥다이브Chapter36~37

HYEON17·2023년 2월 8일
0

WIL

목록 보기
8/13
post-thumbnail

36장: 디스트럭처링 할당

  • 구조화된 배열과 같은 이터러블 또는 객체를 비구조화 하여 1개 이사으이 변수에 개별적으로 할당하는 것
  • 배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용

36.1 배열 디스트럭처링 할당

배열 디스트럭처링 할당의 대상은 이터러블이어야 하고, 할당 기준은 베열의 인덱스

36.2 객체 디스트럭처링 할당

  • 객체의 각 프로퍼티를 객체로부터 추출하여 1개 이상의 변수에 할당
  • 할당 기준은 프로퍼티 키

37장: Set과 Map

37.1 Set

set객체는 중복되지 않는 유일한 값들의 집합

37.1.1 Set 객체의 생성

  • set객체는 생성자 함수로 생성
  • 인수를 전달하지 않으면 빈 set객체가 생성
  • 이터러블을 인수로 전달받아 set객체를 생성
    • 이터러블의 중복된 값은 set 객체에 요소로 저장되지 않음

중복을 허용하지 않는 특성을 활용하여 배열에서 중복된 요소 제거 가능

// 배열의 중복 요소 제거
const uniq = array => array.filter((v, i, self) => self.indexOf(v) === i);
console.log(uniq([2, 1, 2, 3, 4, 3, 4])); // [2, 1, 3, 4]

// Set을 사용한 배열의 중복 요소 제거
const uniq = array => [...new Set(array)];
console.log(uniq([2, 1, 2, 3, 4, 3, 4])); // [2, 1, 3, 4]

37.1.2 요소 개수 확인

요소 개수 확인 시 Set.prototype.size프로퍼티 사용

37.1.3 요소 추가

  • Set.prototype.add 메서드 사용
  • 객체나 배열과 같이 자바스크립트의 모든 값을 요소로 저장 가능
const set = new Set();

set
  .add(1)
  .add('a')
  .add(true)
  .add(undefined)
  .add(null)
  .add({})
  .add([]);

console.log(set); // Set(7) {1, "a", true, undefined, null, {}, []}

37.1.4 요소 존재 여부 확인

  • Set.prototype.has메서드 사용
    • 특정 요소의 존재 여부를 나타내는 불리언 값을 반환

37.1.5 요소 삭제

  • Set.prototype.delete메서드 사용
    • 삭제 성공 여부를 나타내는 불리언 값을 반환
    • 인덱스가 아닌 삭제하려는 요소값을 인수로 전달
const set = new Set([1, 2, 3]);

// 요소 2를 삭제한다.
set.delete(2);
console.log(set); // Set(2) {1, 3}

// 요소 1을 삭제한다.
set.delete(1);
console.log(set); // Set(1) {3}

37.1.6 요소 일괄 삭제

  • Set.prototype.clear 메서드를 사용
    • 언제나 undefined를 반환

37.1.7 요소 순회

  • Set.prototype.forEach메서드를 사용
    • 3개의 인수를 전달받음
      • 첫번째 인수: 현재 순회 중인 요소값
      • 두번째 인수: 현재 순회 중인 요소값
      • 세번째 인수: 현재 순회 중인 Set 객체 자체

37.1.8 집합 연산

교집합, 합집합, 차집합 들을 구현 가능

37.2 Map

키와 값의 쌍으로 이루어진 컬렉션

37.2.1 Map 객체의 생성

  • Map생성자 함수로 생성
  • 인수를 전달하지 않으면 빈 Map객체가 생성

37.2.2 요소 개수 확인

Map.prototype.size 프로퍼티를 사용

const map = new Map([['key1', 'value1'], ['key2', 'value2']]);

console.log(Object.getOwnPropertyDescriptor(Map.prototype, 'size'));
// {set: undefined, enumerable: false, configurable: true, get: ƒ}

map.size = 10; // 무시된다.
console.log(map.size); // 2

37.2.3 요소 추가

  • Map.prototype.set 메서드를 사용
    • 중복된 키를 갖는 요소가 존재할 수 없기 때문에 중복된 키를 갖는 요소를 추가하면 값이 덮어써진다

37.2.4 요소 취득

  • Map.prototype.get 메서드를 사용
  • 인수로 전달한 키를 갖는 요소가 존재 하지 않으면 undefined를 반환

37.2.5 요소 존재 여부 확인

  • Map.prototype.has메서드를 사용
    • 특정 요소의 존재 여부를 나타내는 불리언 값을 반환

37.2.6 요소 삭제

  • Map.prototype.delete메서드를 사용
    • 삭제 성공 여부를 나타내는 불리언 값을 반환
    • 연속적 호출 불가능

37.2.7 요소 일괄 삭제

  • Map.prototype.clear메서드 사용
    • 언제나 undefined를 반환

37.2.8 요소 순회

  • Map.prototype.forEach메서드를 사용

  • 3개의 인수를 전달받음

    • 첫번째 인수: 현재 순회 중인 요소값
    • 두번째 인수: 현재 순회 중인 요소키
    • 세번째 인수: 현재 순회 중인 Map 객체 자체

profile
프론트엔드 개발자

0개의 댓글