[TypeScript] for of 와 for in 반복문

  author: Dev.ian
  createdAt: 2021-10-10
  updatedAt: 2021-10-10

---

Map 이란?

• Key를 이용하여 Value(데이터)를 저장하는 방식의 자료구조

  • KEY: VALUE

  • Key는 중복될 수 없고 Key가 중복될 경우, 가장 최근(마지막) Value가 저장(덮어쓰기)된다.

  • Map의 interface

      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 선언, 생성

• new Map<keyType, valueType>()

  • Type 선언하지 않을 경우

      const map = new Map();

  • Type 선언할 경우

      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를 삭제

  • 반환값: 데이터가 존재해서 삭제에 성공한다면 true, 데이터가 존재하지 않을 경우 false 를 반환
  • 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를 가져온다.

  • 데이터가 존재하지 않는다면 undefined 를 반환
  • 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 값을 리스트 형태로 얻을 수 있다.

keys()

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

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

values()

  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)

• Example Data

    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 ... of

• map

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

• map 의 entries()

    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}`);
    }

• Array 로 변환 후

    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}`);
    }

• 결과

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

forEach

• 매개변수: value, key , Object(원본 Map 데이터)
  • key와 value의 위치에 주의한다.

  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

---

• Refs