[자바스크립트 ES6+ 기본] 21. Map 오브젝트

Speedwell🍀·2022년 2월 4일
0

Map 오브젝트

  • key와 value의 컬렉션

  • Map 오브젝트 형태

    • [key, value] 형태처럼
    • 대괄호 안에 key와 value를 작성
    • 다양한 타입을 key로 사용할 수 있음
const obj = new Map([
  ["key", "value"],
  [{book: 200}, "오브젝트"],
  [100, "Number"]
]);
for (let keyValue of obj) {
  log(keyValue);
};

// [key, value]
// [{book: 200}, 오브젝트]
// [100, Number]
  • Map의 key 처리
    • for-of 문에서 작성한 순서대로 읽혀짐

new Map()

  • Map 인스턴스를 생성하여 반환

  • 파라미터에 이터러블 오브젝트 작성

const obj = new Map([
  ["key", "value"],
  [100, "Number"]
]);
log(obj);
log(typeof obj);

// {}
// object
  • Same-Value-Zero 비교 알고리즘
    • key 값을 비교
    • key 값이 같으면 value가 대체됨
// key 값을 비교
const obj = new Map([
  [100, "Number"],
  ["100", "String"]
]);
for (let [key, value] of obj) {
  log(`${key} : ${value}`);
};

// 100: Number
// 100: String
// key 값이 같으면 value가 대체됨
const obj = new Map([
  [100, "첫 번째"].
  [100, "두 번째"]
]);

for (let [key, value] of obj) {
  log(`${key} : ${value}`);
};

// 100: 두 번째
  • 잘못 작성한 형태
try {
  new Map(["one", 1]);
} catch {
  log("[[one, 1]]");
};
const obj = new Map([{five: 5}]);
for (let [key, value] of obj) {
  log(`${key} : ${value}`);
};

// [[one, 1]]
// undefined : undefined

Map과 Object 비교

  • Map 오브젝트 구조
const map = Map;
/*
1. Map 오브젝트에 get Symbol(Symbol.species)가 있음
- 따라서, constructor를 오버라이드할 수 있음

2. prototype을 펼치면 Symbol.iterator가 있음
*/

const list - [1, 2];
const obj = new Map([
  ["one", "첫 번째"],
  ["two", "두 번째"]
]);
/*
1. 오른쪽의 obj를 펼치면 [[Entries]]가 있음
- 대괄호[[]] 두 개는 엔진에서 설정하는 것을 뜻함

2. [[Entries]]를 펼치면 0: {"one" => "첫 번째"} 형태

3. 인덱스를 부여하여 key로 사용하고, {"one": "첫 번째"}를 value로 설정

4. 이것은 빼열 형태와 구조가 비슷. size가 length 기능을 함

5. 인덱스를 부여하여 저장하므로 작성한 순서로 읽혀짐
*/
  • key

    • Map: 타입 제약 없음
    • Object: String, Symbol
  • {key: value} 수

    • Map: size 프로퍼티로 구함
    • Object: 전체를 읽어 구해야 함
  • 처리 시간: MDN

    • 빈번하게 key, value를 추가/삭제할 때는 Map이 Object보다 좋은 경우가 있다고 함

값 설정, 추출 메소드

set()

  • Map 인스턴스에 key, value 설정
    • key, value 순서로 파라미터 작성
    • key, value를 설정한 인스턴스 반환
let obj = new Map();
obj.set("one", 100);
obj.set({}, "오브젝트");
obj.set(function(){}, "Function");
obj.set(new Number("100"), "인스턴스");
obj.set(NaN, "Not a Number");

for (let [key, value] of obj) {
  log(`${key} : ${value}`);
};

// one : 100
// [object Object] : 오브젝트
// function(){} : Function
// 100 : 인스턴스
// NaN : Not a Number
  • key 값이 같으면 value가 바뀜
let obj = new Map();
const book = {};
obj.set(book, "첫 번째");
obj.set(book, "두 번째");
for (let [key, value] of obj) {
  log(`${key} : ${value}`);
};

// [object Object] : 두 번째

get()

  • Map에서 key 값이 같은 value 반환
    • key 값이 같지 않거나 타입이 다르면 undefined 반환
    • 오브젝트 설정과 추출
// key 값이 같지 않거나 타입이 다르면 undefined 반환
let obj = new Map([
  ["one", 100],
  ["200", "String 타입"]
]);
log(obj.get("one"));
log(obj.get("two"));
log(obj.get(200));

// 100
// undefined
// undefined
// 오브젝트 설정과 추출
let obj = new Map();
const like = {sports: "스포츠"};
obj.set(like, value: "농구"});
log(obj.get(like));

// {value: 농구}

has()

  • Map 인스턴스에서 key의 존재 여부를 반환
    • key가 있으면 true, 아니면 false
const obj = new Map([
  ["one", 100]
]);
log(obj.has("one"));
log(obj.has("two"));

// true
// false

Map과 이터레이터 오브젝트

entries()

  • Map 인스턴스로 이터레이터 오브젝트 생성, 반환
    • Map 인스턴스에 설정된 순서로 반환
    • next()로 [key, value] 반환
const obj = new Map([
  ["one", 100],
  ["two", 200]
]);
const iter = obj.entries();
log(iter.next());
log(iter.next());
log(iter.next());

// {value: [one,100], done: false}
// {value: [two,200], done: false}
// {value: undefined, done: true}

keys()

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

    • value는 포함하지 않음
    • Map 인스턴스에 설정된 순서로 반환
  • next()로 key 반환

const obj = new Map([
  ["one", 100],
  ["two", 200]
]);
const iter = obj.keys();
log(iter.next());
log(iter.next());
log(iter.next());

// {value: one, done: false}
// {value: two, done: false}
// {value: undefined, done: true}

values()

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

    • key는 포함하지 않음
    • Map 인스턴스에 설정된 순서로 반환
  • next()로 value 반환

const obj = new Map([
  ["one", 100],
  ["two", 200]
]);
const iter = obj.values();
log(iter.next());
log(iter.next());
log(iter.next());

// {value: 100, done: false}
// {value: 200, done: false}
// {value: undefined, done: true}

Symbol.iterator()

  • Map 인스턴스로 이터레이터 오브젝트 생성, 반환
    • Map.prototype.entries()와 같음
    • next()로 [key, value] 반환
const obj = new Map([
  ["one", 100],
  ["two", 200]
]);
const iter = obj[Symbol.iterator]();
log(iter.next());
log(iter.next());
log(iter.next());

// {value: [one,100], done: false}
// {value: [two,200], done: false}
// {value: undefined, done: true}

콜백 함수, 삭제, 지우기

forEach()

  • Map 인스턴스를 반복하면서 callback 함수 호출
    • map(), filter() 등의 callback 함수가 동반되는 메소드 사용 불가
  • callback 함수에 넘겨주는 파라미터
    • value, key, Map 인스턴스 (key, value 순서가 아님)
    • 콜백 함수에서 this 사용
// value, key, Map 인스턴스
const obj = new Map([
  ["one", 100],
  ["two", 200]
]);
const callback = (value, key, map) => {
  log(`${key}, ${value}`);
};
obj.forEach(callback);

// one, 100
// two, 200
// 콜백 함수에서 this 사용
const obj = new Map([
  ["one", 100],
  ["two", 200]
]);
function callback = (value, key, map) => {
  log(`${key}, ${value}, ${this.check}`);
};
obj.forEach(callback, {check: 50});

// one, 100, 50
// two, 200, 50 

delete()

  • Map 인스턴스에서 파라미터 값과 같은 entry 삭제
    • 같은 key가 있으면 true 반환, 없으면 false 반환
const obj = new Map([
  ["one", 100],
  [{}, "오브젝트"]
]);
log(obj.delete("one"));
log(obj.delete({}));

const sports = {};
obj.set(sports, "스포츠");
log(obj.delete(sports));

// true
// false
// true

clear()

  • Map 인스턴스의 모든 entry를 지움
    • Map 인스턴스를 삭제하는 것은 아님
    • 따라서 [key, value]를 추가할 수 있음
const obj = new Map([
  ["one", 100],
  ["two", 200]
]);
log(obj.size);

obj.clear();
log(obj.size);
obj.set("add", "추가");
log(obj.size);

// 2
// 0
// 1
  • size 프로퍼티
    • Map 인스턴스의 entry 수를 반환
    • 개발자 코드로 수정할 수 없음

0개의 댓글