[JavaScript]Map 객체(Map Object]

달하·2022년 2월 8일
0

Map 객체

Map 객체 메소드

맵 객체는 기존 객체와는 다르게 메소드만을 이용하여 값을 넣고 뺀다. 기본적인 삽입, 조회 삭제를 할 수 있는 메소드들은 아래와 같다.

let max = new Map();

// set으로 맵 객체에 삽입
max.set("id", 0);
max.set("이름", "마이클");
max.set("전공", "영문학");
max.set("나이", 25);

// 이차원 배열로 넘겨주는 것도 가능합니다
let michael = new Map([
    ["id", 0],
    ["이름", "마이클"],
    ["전공", "영문학"],
    ["나이", 29]
])

// get으로 맵 객체 조회
max.get("이름"); // "마이클"

// delete로 삭제
max.delete("나이"); // 삭제가 성공하면 true를 반환

// clear로 맵 안의 프로퍼티 전부삭제
max.clear();

Map 객체의 장점

key 값의 다양성

객체(Object)에서는 문자열(String) 혹은 심볼(Symbol)만 프로퍼티의 key로 사용할 수 있었으나 Map 객체에서는 함수나 객체를 포함한 모든 자료형이 프로퍼티의 key로 쓰일 수 있다.
아래와 같이 key 값의 1과 '1'의 자료형이 구분된다.

let myMap = new Map(); //{}
myMap.set(1, 'hello'); //{1=>'hello'}
myMap.set('1', 'hello'); //{1=>'hello', '1'=>'hello'}
myMap.set(1, 'world'); //{1=>'world', '1'=>'hello'}

Map.prototype.entries()

맵 객체는 그 자체로 for..of 문을 통해 순회가 가능하다. 이때 순회는 맵 이터레이터(키-값을 쌍으로 묶은 배열)의 형태로 이루어지는데 entries메소드로 맵 이터레이터를 반환받을 수 있다.

const map1 = new Map();

map1.set('0', 'foo');
map1.set(1, 'bar');

const iterator1 = map1.entries(); //MapIterator {"0" => "foo", 1 => "bar"}

console.log(map1); //Map { '0' => 'foo', 1 => 'bar' }
console.log(iterator1.next().value); //[ '0', 'foo' ]
console.log(iterator1.next().value); //[ 1, 'bar' ]
console.log(iterator1.next().value); //undefined

for (let x of map1.entries()) {
  console.log(x);
}
//[ '0', 'foo' ]
//[ 1, 'bar' ]
const maxInfoMap = new Map([
    ["name", "김맥스"],
    ["age", 25],
    ["major", "영문학"],
])

maxInfoMap.entries();
// MapIterator { ["name", "김맥스"],["age", 25],["major", "영문학"]}


for (const [key, value] of maxInfoMap) {
    console.log(key, value);
}

// 결과
// "name" "김맥스"
// "age" 25
// "major" "영문학"

사용할 시점

맵 객체는 객체의 프로퍼티를 자주 변경해야할 때 강력합니다. 메소드 이름들이 예측 가능하여 동작이 명확하고, 기존 객체와 달리 순회도 쉽게 이루어져 데이터를 조작하기 적합할 수 있기 때문입니다.

참조
참조

profile
할 수 있다

0개의 댓글