TypeScript에서 Map(자료구조) 을 사용하는 방법을 알아본다

시작하기 앞서

---

• Map: Key를 이용하여 Value(데이터)를 저장하는 방식의 자료구조
  • Key는 중복될 수 없고 Key가 중복될 경우, 가장 최근(마지막) Value가 저장된다.

    interface Map<K, V> {
        clear(): void;
        delete(key: K): boolean;
        forEach(callbackfn: (value: V, key: K, map: Map<K, V>) => void, thisArg?: any): void;
        get(key: K): V | undefined;
        has(key: K): boolean;
        set(key: K, value: V): this;
        readonly size: number;
    }

Map

Map의 선언

• new Map<key, value>() 을 이용해 선언한다.

    const map = new Map();
    const mapWithType = new Map<string, any[]>();

데이터의 저장

• set(key, value) 메소드를 이용해 Key와 Value를 저장한다.
  • Key가 중복될 경우, 가장 최근(마지막) Value가 저장되기 때문에 특정 Key의 Value를 업데이트 할 때도 사용된다.
  • Java의 put()메소드와 동일한 기능

    const map = new Map<string, string[]>();
    map.set('keyOne', ['value1', 'value2']);
    map.set('keyTwo', ['value1', 'value2', 'value3']);
    map.set('keyThree', ['value1', 'value2', 'valu3', 'value4']);

    // Update
    map.set('keyTwo', ['value1']);

데이터의 삭제

• delete(key) 메소드를 이용해 Value를 삭제한다.
  • Java의 remove()메소드와 동일한 기능

    console.log(`DELETE(KEY IS EXIST): ${map.delete('keyTwo')}`);
    console.log(`DELETE(KEY IS NOT EXIST): ${map.delete('keyFour')}`);

    [Result]
        DELETE: true
        DELETE: false

• clear() 메소드를 이용해 모든 데이터를 삭제한다.
  • Java의 clear()메소드와 동일한 기능

    map.clear();

데이터의 조회

• get(key) 메소드를 이용해 Value를 가져온다.
  • Java의 get()메소드와 동일한 기능

    console.log(`GET(KEY IS EXIST): ${map.get('keyOne')}`);
    console.log(`GET(KEY IS NOT EXIST): ${map.get('keyFour')}`);

    [Result]
        GET: value1,value2
        GET: undefined

데이터의 존재 여부 확인

• has(key) 메소드를 이용해 Value의 존재 여부를 확인한다.
  • Java의 containsKey() 메소드와 동일한 기능(containsValue() 기능은 없다)

    console.log(`KEY IS EXIST: ${map.has('keyOne')}`);
    console.log(`KEY IS NOT EXIST: ${map.has('keyFour')}`);

    [Result]
        true
        false

Key 또는 Value 값 구하기

• Key 또는 Value를 리스트 형태로 구할 수 있다.
  • keys(), values() 메소드를 이용해서 Key, Value 값을 리스트 형태로 얻을 수 있다.

    const mapKeys = map.keys();
    for (const key of mapKeys) {
        console.log(`KEY: ${key}`);
    }

    [Result]
        KEY: keyOne
        KEY: keyTwo
        KEY: keyThree

    const mapValues = map.values();
    for (const value of mapValues) {
        console.log(`VALUES: ${value}`);
    }

    [Result]
        VALUES: value1,value2
        VALUES: value1,value2,value3
        VALUES: value1,value2,valu3,value4

반복문(Loop)

• for ... of

    const map = new Map<string, string[]>();
    map.set('keyOne', ['value1', 'value2']);
    map.set('keyTwo', ['value1', 'value2', 'value3']);
    map.set('keyThree', ['value1', 'value2', 'valu3', 'value4']);

    for (const [key, values] of map) {
        console.log(`KEY: ${key}, VALUE: ${values}`);
    }

    const mapArrays = Array.from(map);
    for (const item of mapArrays) {
        console.log(`KEY: ${item[0]}, VALUE: ${item[1]}`);
    }

    for (const [key, values] of mapArrays) {
        console.log(`KEY: ${key}, VALUE: ${values}`);
    }

    const mapEntries = map.entries()
    for (const item of mapEntries) {
        console.log(`KEY: ${item[0]}, VALUE: ${item[1]}`);
    }

    for (const [key, values] of mapEntries) {
        console.log(`KEY: ${key}, VALUE: ${values}`);
    }

    [Result]
        KEY: keyOne,   VALUE: value1,value2
        KEY: keyTwo,   VALUE: value1,value2,value3
        KEY: keyThree, VALUE: value1,value2,valu3,value4

• forEach
  • value, key , Object(Map or Set, 해당 오브젝트) 순서
  • key와 value의 위치에 주의한다.

    const map = new Map<string, string[]>();
    map.set('keyOne', ['value1', 'value2']);
    map.set('keyTwo', ['value1', 'value2', 'value3']);
    map.set('keyThree', ['value1', 'value2', 'valu3', 'value4']);

    // obj === map
    map.forEach((values, key, obj) => {
        console.log(`KEY: ${key}, VALUE: ${values}`);
    });

    [Result]
        KEY: keyOne,   VALUE: value1,value2
        KEY: keyTwo,   VALUE: value1,value2,value3
        KEY: keyThree, VALUE: value1,value2,valu3,value4

Ref