[14주차] 19. Symbol Property, 20. Symbol 함수 메소드, 21. Map 오브젝트, 22. WeakMap 오브젝트, 23. Set 오브젝트, 24. WeakSet 오브젝트

14주차에는 '자바스크립트 중고급:근본 핵심 논리'에서 Symbol 프로퍼티와 함수,메서드, Map, WeakMap, Set, WeakSet 오브젝트를 공부했습니다.  😁

 

---

19. Symbol Property

Well-Known Symbols

• 스펙에서 알고리즘에 이름을 부여하고 이름에서 참조하기 위한 빌트인 Symbol 값
• @@
  • Well-Known Symbol을 나타내는 기호
• 개발자 코드 우선 실행
  • match()를 실행하면 디폴트로 @@match를 실행
  • 소스코드에 Symbol.match를 작성하면 @@match가 실행되지 않고 Symbol.match가 실행됨
• 개발자 코드로 디폴트 기능을 오버라이딩할 수 있음
• 

Symbol.toStringTag

• Object.prototype.toString()의 확장
• toString()으로 인스턴스 타입을 구하면 [object Object] 형태로 반환
  • 인스턴스 타입을 명확하게 구분 가능

  • const Book = function(){};
    const obj = new Book();
    	console.log(obj.toString()); //[object Object]

• Symbol.toStringTag로 구분 가능
  • [object Object]에서 두번 째 표시될 문자열 작성
• prototype에 연결하여 작성
  1. 첫번째의 obj.toString()을 실행하면 인스턴스 타입(Object)이 반환
  2. prototype에 Symbol.toStringTag를 연결하겨 [object Object]에서 두번째의 Object에 표시될 문자를 작성
  3. 두번째의 obj.toString()을 호출하면 Symbol.toStringTag에 작성한 문자가 출력됨

  4. const Sports = function(){};
     const obj = new Sports();
     Sports.prototype[Symbol.toStringTag] = "농구"

Symbol.isConcatSpreadable

• Array.prototype.concat()
  • 배열의 엘리먼트를 전개하여 반환
• [Symbol.isConcatSpreadable] = true
  • 엘리먼트를 하나씩 연결
• [Symbol.isConcatSpreadable] = false
  • 전개하지 않고 배열 자체를 연결

    const one = [10, 20], two = ['A', 'B'];
    two[Symbol.isConcatSpreadable] = true; // [10,20,A,B]
    two[Symbol.isConcatSpreadable] = false; // [10,20,[A,B]]​

• Array-Like 전개

  const one = [10,20];
  const like = {0: "A", 1:"B", length:2};
  like[Symbol.isConcatSpreadable] = true; //[10,20,A,B]
  like[Symbol.isConcatSpreadable] = false; //[10,20,{0:A,1:B,length:2}]​

Symbol.species

• constructor를 반환
  • constructor를 실행하면 인스턴스를 생성하여 반환 → 인스턴스 반환
• Symbol.species를 오버라이드하면 다른 인스턴스를 반환할 수 있음
• 인스턴스의 메소드를 호출했을 때 인스턴스를 반환하도록 하는 것

Symbol.species 오버라이드

• static 악세서 프로퍼티
• getter만 있음
• static get [Symbol.species](){}
• 빌트인 오브젝트를 상속받은 class에 Symbol.species를 작성하면 빌트인 오브젝트의 @@species가 오버라이드 됨
• 인스턴스 바꾸기

  class Sports extends Array{
  	static get [Symbol.species](){
  		return Array;
  	}
  };
  const one = new Sports(10,20,30);
  const two = one.slice(1,2);
  console.log(one instanceof Sports); // true
  console.log(two instanceof Array); // true
  console.log(two instanceof Sports); // false​

Symbol.toPrimitive

• 오브젝트를 대응하는 Primitive 값으로 변환
• number, string, default타입에 대응
• 오브젝트를 문자열에 대응
• 오브젝트를 숫자에 대응

Symbol.iterator

• @@iterator가 있는 빌트인 오브젝트
  • String, Array, Map, Set, TypeArray
• 빌트인 Object에는 @@iterator가 없지만 개발자 코드로 작성 가능

Array.prototype[@@iterator]

• 이터레이터 오브젝트를 반환
• next()로 배열 엘리먼트 값을 하나씩 구할 수 있음

String.prototype[@@iterator]

• String 오브젝트의 Symbol.iterator를 호출하면 이터레이터 오브젝트를 반환
  • next()로 배열 엘리먼트 값을 하나씩 구할 수 있음

Object 이터레이션

• 빌트인 Object에는 Symbol.iterator가 없고, Symbol.iterator가 반복을 처리 → Object에 Symbol.iterator를 작성하면 반복 가능

Symbol.iterator에 제너레이터 함수 연결

• Object{}에 Symbol.iterator를 작성하고 generator함수를 연결하면 반복할 때마다 yield 수행

  const obj = {};
  obj[Symbol.iterator] = function*(){
  	yield1;
  	yield2;
  	yield3;
  };​

• 제너레이터 오브젝트에 이터레이터 오브젝트를 연결하여 값을 공유하는 형태
• 제너레이터 오브젝트에 이터레이터 오브젝트가 포함된 구조

String.prototype.match()

• 문자열에 패턴을 매치하고 매치된 결과를 배열로 반환

Symbol.match()

• 개발자 코드를 함수 블록에 작성
• 메소드를 오버라이드하는 것 → 메소드의 시멘틱은 유지해야 함

---

20. Symbol 함수, 메서드

Symbol 함수

for()

• 글로벌 Symbol 레지스트리에 {key:value}형태로 Symbol 저장
  • 파라미터()의 문자열 = key
  • Symbol()로 생성한 값 = value
• 글로벌 Symbol 레지스트리는 공유 영역
  • 다른 오브젝트에서도 사용 가능
  • 같은 key가 존재하면 등록된 값을 사용함

keyFor()

• 글로벌 Symbol 레지스트리에서 Symbol의 key값을 구함
• Symbol key값 존재 → key값 반환 / 존재x → undefined 반환

Symbol 메소드

toString()

• Symbol을 생성했던 형태를 문자열로 변환하여 반환
• toString()으로 변환하면 문자열을 연결하면 Symbol값은 연결 안됨

description

• Symbol 오브젝트의 주석, 설명 반환

valueOf()

• 프리미티브 값 반환

getOwnPropertySymbols()

• 파라미터의 Object에서 Symbol만 배열로 반환

---

21. Map 오브젝트

Map 오브젝트

• key 와 value의 컬렉션

new Map()

• Map 인스턴스를 생성하여 반환
• 파라미터에 이터러블 오브젝트 작성

Map vs Object

• key
  • Map
    • 타입 제약 없음
  • Object
    • String, Symbol
• {key:value} 수
  • Map
    • size 프로퍼티로 구함
  • Object
    • 전체를 읽어 구함
• 처리시간
  • MDN

값 설정, 추출 메소드

set()

• Map 인스턴스에 key, value 설정
• key값이 같으면 value가 바뀜

get()

• Map에서 key값이 같은 value 반환
  • key값이 같지 않거나 타입이 다르면 undefined 반환

has()

• Map 인스턴스에서 key의 존재 여부를 반환

Map과 이터레이터 오브젝트

entries()

• Map 인스턴스로 이터레이터 오브젝트 생성, 반환
• next()로 [key, value] 반환

keys()

• Map 인스턴스의 key로 이터레이터 오브젝트 생성, 반환
  • value 포함 x
• next()로 key 반환

values()

• Map 인스턴스의 value로 이터레이터 오브젝트 생성, 반환
  • key 포함하지 않음
• next()로 value 반환

Symbol.iterator()

• Map 인스턴스로 이터레이터 오브젝트 생성, 반환
  • Map.prototype.entries()와 같음
  • next()로 [key, value] 반환

콜백함수, 삭제, 지우기

forEach()

• Map 인스턴스를 반복하면서 callback 함수 호출
  • 콜백함수가 동반되는 메소드는 사용 불가
• 콜백함수에 넘겨주는 파라미터
  • this사용 가능

delete()

• Map 인스턴스에서 파라미터 값과 같은 entry 삭제
  • 같은 키 있으면 true 반환

clear()

• Map 인스턴스의 모든 entry를 지움
  • [key, value]는 추가 가능
• size 프로퍼티
  • Map 인스턴스의 entry 수를 반환

---

22. WeakMap 오브젝트

WeakMap 오브젝트

• object만 key로 사용 가능
• Map 에서 key로 참조한 object 삭제하면 object는 사용할 수 없지만 Map에 오브젝트가 남음
• memory leak 발생
• 이터레이션 불가
• WeakMap entry 열거 불가
• CRUD 관련 메소드만 있음

WeakMap 오브젝트 메소드

get()

• WeakMap 인스턴스에서 key 값이 같은 value 반환

set()

• WeakMap 인스턴스에 key, value 설정
• 첫 번째 파라미터에 key로 사용할 오브젝트 작성
  • 프리미티브 값 사용 불가
• 두 번째 파라미터는 값
  • 오브젝트 구분 등의 용도

has()

• WeakMap 인스턴스에서 key의 존재 여부 반환
• 존재하면 true

delete()

• WeakMap 인스턴스에서 key와 일치하는 entry 삭제

가비지 컬렉션 처리

• 참조하는 object가 바뀌면 참조했던 오브젝트가 가비지 컬렉션 처리됨

Map과 WeakMap의 차이

• Map
  • 즉시 실행 함수는 일회용으로 변수를 저장하지 않을 때만 사용
  • 함수가 끝나면 GC가 변수를 메모리에서 지움
• WeakMap
  • Map이 아닌 WeakMap에 저장되어 obj 삭제

⇒ 참조하는 object를 삭제하면 Map은 그대로 유지되지만 WeakMap은 GC처리로 삭제됨

---

23. Set 오브젝트

Set 오브젝트

• value의 컬렉션
• 작성한 순서대로 전개

new Set()

• Set 인스턴스 생성, 반환
• size 프로퍼티
  • Set 인스턴스의 엘리먼트 수를 반환

값 추가, 존재 여부 체크 메소드

add()

• Set 인스턴스 끝에 value 추가
• 사용 형태
  • 함수 생성하여 value로 사용
  • value에 생성한 함수 이름 작성
  • Object를 value로 사용

has()

• Set 인스턴스에서 값의 존재 여부를 반환
• get()메소드가 없으므로 has()로 값의 존재 여부 체크 → 존재하면 체크한 값을 값으로 사용

Set과 이터레이터 오브젝트

entries()

• Set 인스턴스로 이터레이트 오브젝트 생성, 반환

keys()

• value가 key가 되므로 keys()는 의미 없음
• Map 오브젝트와 맞추기 위한 것
• Set 인스턴스의 value를 key로 사용 → 이터레이터 오브젝트 생성, 반환

values()

• Set 인스턴스의 value로 이터레이터 오브젝트 생성, 반환

Symbol.iterator()

• Set 인스턴스로 이터레이터 오브젝트 생성, 반ㄴ환

콜백 함수, 삭제, 지우기

forEach()

• Set 인스턴스를 반복하면서 콜백함수 호출

delete()

• Set 인스턴스에서 파라미터 값과 같은 엘리먼트 삭제

clear()

• Set 인스턴스의 모든 엘리먼트를 지움
  • Set 인스턴스를 삭제하는 것은 아님

24. WeakSet 오브젝트

WeakSet 오브젝트

• Set 오브젝트와 차이
  • 오브젝트만 value 값으로 사용할 수 있음
  • 프리미티브 타입 사용 불가
• WeakMap과 개념은 비슷하고 value만 작성하는 것이 다름