JavaScript 기본

Key와 Value 쌍의 컬렉션

밀하우스 마나스톰 2023. 2. 27. 18:56

1. 사용자 정의 타입 컬렉션 (Object)

let elixirLevels: {[heroLevel: number]: number} = {};
elixirLevels[1] = 10;
elixirLevels[2] = 20;
elixirLevels[3] = 30;

가장 간단하게 Key와 Value 쌍으로 이뤄진 컬렉션은 위와 같이 만들 수 있다. 이러한 타입은 Object라고 한다.

 

key값은 string과 number(enum number도 가능)만 사용할 수 있으며 value는 제약이 없다.

 

컬렉션에 원소 추가, 삭제,  검색 등의 함수들은 본인이 따로 만드는 것이 아닌 이상 존재하지 않으며,

 

이 Object의 key와 value에 접근할 수 있는 함수들은 ObjectConstructor에 존재한다.

 

 

let keys = Object.keys(elixirLevels);           // ['1', '2', '3']
let values = Object.values(elixirLevels);       // [10, 20, 30]
let entries = Object.entries(elixirLevels);     // [['1', 10], ['2', 20], ['3', 30]]

Object의 key만 배열로 반환하는 함수, value만 배열로 반환하는 함수, key와 value 한 쌍을 배열로 묶어서 반환하는 함수 등이 있다.

 

이때 key는 항상 string 타입으로, value는 들어있는 값 그대로 반환된다.

 

 

 

2. 오브젝트 to 1차원 배열 

 

Object를 2차원 배열로 변환하는 방법은 위에 있는 Object.entries 함수를 사용하면 된다.

 

(1) for문 사용

let array = [];
for (let key in elixirLevels) {
    array[key] = elixirLevels[key];
}

Object의 key들을 배열의 인덱스로 사용해서 배열을 초기화하는 방법이다.

 

key 목록에 없는 인덱스는 undefined로 채워지기 때문에, key와 value의 개수는 3인데 변환한 배열의 길이는 4가 된다. 

 

 

(2) 직접 배열에 push

let array = Object.keys(elixirLevels).map((k) => elixirLevels[k])

map 함수는 빈 배열을 만들고 순차적으로 push 한 뒤 그 배열을 반환하는 함수다.

 

변환한 배열의 길이는 Object에 들어있는 key, value의 개수와 같아지지만 이러면 사실상 Object.values()와 다른 게 없긴 하다.

 

 

 

3. Map

https://ko.javascript.info/map-set

  • new Map() – 맵을 만듭니다.
  • map.set(key, value) – key를 이용해 value를 저장합니다.
  • map.get(key) – key에 해당하는 값을 반환합니다. key가 존재하지 않으면 undefined를 반환합니다.
  • map.has(key) – key가 존재하면 true, 존재하지 않으면 false를 반환합니다.
  • map.delete(key) – key에 해당하는 값을 삭제합니다.
  • map.clear() – 맵 안의 모든 요소를 제거합니다.
  • map.size – 요소의 개수를 반환합니다.
  • map.keys() – 각 요소의 키를 모은 반복 가능한(iterable, 이터러블) 객체를 반환합니다.
  • map.values() – 각 요소의 값을 모은 이터러블 객체를 반환합니다.
  • map.entries() – 요소의 [키, 값]을 한 쌍으로 하는 이터러블 객체를 반환합니다. 이 이터러블 객체는 for..of반복문의 기초로 쓰입니다.