ES6에 추가 된 Map 객체

Javascript를 이용한 함수형 프로그래밍을 공부하다가 Map 객체에 대해서 나와 과거에 잠깐 보았던 Map 객체에 대해서 가물가물하여, 정확하게 알아야겠다는 생각에 정리를 하게 되었다.

---

 

MDN Map : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

Ref. site : https://codewords.recurse.com/issues/one/an-introduction-to-functional-programming

 

우선 Javascript의 객체(Object)는 기본적으로 key : value 형태로 내부 프로퍼티를 관리하며 추가, 삭제 할 수 있으므로 컬렉션의 한 형태로 볼 수 있다.

Map객체, Set객체는 ES6부터 추가 된 key와 value 형태로 데이터를 관리하는데 보다 최적화 되어있는 객체라고 볼 수 있다.

 

Map 객체는 key와 value의 페어(pair)로 이루어진 컬랙션이며, key로 다양한 타입들을 사용할 수 있는데 key에는 하나의 value만 사용 가능하고, number는 사용 불가하다.

Set 객체는 배열과 유사한 특징을 가지고 있지만 중복 데이터 허용이 되지 않고, 색인(index)이 아닌 저장 데이터 자체를 key로 하여 데이터를 관리한다.

 

Map

Map은 비어있는 새 컬랙션을 만들고, 원래 컬랙션의 각 항목에 대해서 함수를 실행하고 각 반환 값을 새 컬랙션에 삽입하며, 반환한다.

Map을 사용 할 수 있는 다양한 방법들이 존재한다.

첫 번째 방법은 새로운 Map을 만들고, 거기에 key와 value를 넣는 것이다.

예시는 아래와 같다.

 

const whoAmI = new Map();

whoAmI.set("name", "Patrick");
whoAmI.set("age", 31);
whoAmI.set("job", "A programmer");

console.log(whoAmI.get("name")); // Patrick
console.log(whoAmI.get("age")); // 31
console.log(whoAmI.get("job")); // A programmer

 

set을 이용해서 key와 value 값을 정의하고 get을 이용해서 원하는 것을 가져올 수 있는 것이다.

 

두 번째 방법은 첫 번째 방법과 비슷한데 새로운 Map 객체를 만들고 [key, value] 페어 컬렉션을 이용하는 것이다.

 

const whoAmI = new Map()
  .set("name", "Patrick")
  .set("age", 31)
  .set("job", "A programmer");

console.log(whoAmI.get("age")); // 31

 

위와 같이 연달아서 set을 이용하여 셋팅 할 수도 있다.

 

세 번째 방법은 대괄호를 사용하여 Map을 선언해주는 것이다.

아래와 같이 만들어서 size를 찾아보면 5개로 나오는 것을 볼 수 있다.

 

const presentLists = new Map([
  ["1", "Book"],
  ["2", "Computer"],
  ["3", "Phone"],
  ["4", "Necklace"],
  ["5", "Perfume"],
]);

console.log(presentLists.size) // 5

 

이렇게 Map을 통해서 만들어진 것들은 get을 통해서 불러올 수 있을 뿐 아니라 size를 통해서 내부 entry 갯수를 조회 할 수도 있고, has를 통해서 주어진 key가 존재하는지 확인도 가능하며, delete를 이용한 삭제, clear를 이용한 모든 삭제 등 다양하게 사용이 가능하다.

 

const whoAmI = new Map()
  .set("name", "Patrick")
  .set("age", 31)
  .set("job", "A programmer");

console.log(whoAmI.get("name")); // Patrick
console.log(whoAmI.size); // 3
console.log(whoAmI.has("job")); // true

console.log(whoAmI.delete("age")); // true -> age 삭제
console.log(whoAmI.has("age")); // false

console.log(whoAmI.clear()); // 모든 삭제
console.log(whoAmI.size); // 0

 

Set

Set()은 value들로 이루어진 집합이며, 같은 value를 2번 포함 할 수 없다.

 

let setTest_1 = new Set();

let setTest_2 = new Set().add("Patrick").add(32);
setTest_2.add("A programmer");

console.log(setTest_2.size); // 3
console.log(setTest_2.has("Patrick")); // true

console.log(setTest_2.delete(32)); // true
console.log(setTest_2.has(32)); // false

console.log(setTest_2.clear()); // 모든 삭제
console.log(setTest_2.size); // 0

////// 

let person = { name: "Patrick", age: 31 };
let setTEST = new Set([1, "JS", 99, person]);

console.log(setTEST.size); // 4
console.log(setTEST.has(99)); // true

 

has는 indexOf() 보다 빠르다. 하지만 index가 존재하지 않으므로 index로 value에 접근 할 수 없다.

무조건 add로만 할 것이 아니라 두 번째 단락처럼 new Set() 안에 넣어서 사용할 수도 있다.