[자바스크립트 / Vanilla JS] Object 와 Map

 

 

 

Object와 Map의 특징 및 사용 용도

 

전통적으로 objects 는 문자열을 값에 매핑하는 데 사용되었다. Object는 키를 값으로 설정하고, 값을 검색하고, 키를 삭제하고, 키에 저장된 내용을 검색 할 수 있게 만들어준다. 그러나 Map 객체는 더 나은 맵이 되도록 하는 몇 가지 장점을 가지고 있다.

 

• Object의 key는 String 또는 Symbol이어야 하고, Map의 키는 모든 값을 가질 수 있다.
• Object는 크기를 수동으로 추적해야하지만, Map은 크기를 쉽게 얻을 수 있다.
• Map은 삽입된 순서대로 순번이 매겨진다 -> iterable하다. ==> for of와 forEach, for in 사용 가능
• Object는 데이터들의 순서가 없기 때문에 순서를 정렬하기 위한 과정이 필요하다. ==> for in만 사용 가능

---

Object

• key-value로 저장한다.
• key를 주로 property라고 부른다.
• key는 unique하지만 value는 unique하지 않다.
• 프로퍼티의 값으로 함수가 올 수도 있는데, 이러한 프로퍼티를 메소드(method)라고 합니다.

 

* 기본 문법

let cat = "고양이"; // 일반적인 변수의 선언

let Man = { name: "KimJiWoo", age: 27};

cat          // 고양이
Man.name   // KimJiWoo
Man.age    // 27

 

* 객체의 메소드와 프로퍼티 참조

let Man = {

    name: "JiWoo",      // 이름 프로퍼티를 정의함.
    birthday: "960509",  // 생년월일 프로퍼티를 정의함.
    info: function() { // name과 birthday를 합쳐서 주민등록번호를 반환함.
        return "이름 : this.name + "생년월일 : " + this.birthday;
    }
};

Man.name    // JiWoo

Man["name"] // JiWoo

Man.info() // 이름 : JiWoo 생년월일 : 960509

Man.info;  // function () { return "이름 : this.name + "생년월일 : " + this.birthday; }

 

Map

• key-value 쌍으로 저장되는 형식이다.
• key는 각 데이터가 unique하기때문에 중복이 없다.
• Map 객체는 키-값을 저장한다.
• key는 자료형을 구분한다.
• 배열을 넣어서 초기화 시킬 수 도 있다.

let TestMap = new Map(); //{}
TestMap.set(1, 'Test'); //{1=>'Test'}
TestMap.set('1', 'Test'); //{1=>'Test', '1'=>'Test'} String / Num
TestMap.set(1, 'Second'); //{1=>'Second', '1'=>'hello'} => 중복 시 이 전 데이터에 덮어쓰기
TestMap.get(1); //'Second'
TestMap.has(1); //true
TestMap.delete(1); // {'1' => 'hello'} => 제일 앞 데이터를 삭제

let TestMap = new Map(['name', 'Jiwoo'], ['age', '27']); //{"name" => "Jiwoo", "age" => "27"}

Map.prototype.entries()

Map객체에 각 요소에 해당하는 키,값 쌍을 Map에 등록한 순서대로 포함한 새로운 Iterator 객체를 반환한다.

entries()를 사용해 for of문으로 쉽게 키,값 에 접근할 수 있다.

const Test_map = new Map();

Test_map.set('0', 'Kim');
Test_map.set(1, 'Jiwoo');

const Test_iterator = Test_map.entries(); // {"0" => "Kim", 1 => "Jiwoo"}

console.log(Test_map); // Map { '0' => 'Kim', 1 => 'Jiwoo' }
console.log(Test_iterator.next().value); //['0', 'Kim']
console.log(Test_iterator.next().value); //[1, 'bar']
console.log(Test_iterator.next().value); //undefined

for (let x of Test_map.entries()) {
  console.log(x);
}
//[ '0', 'Kim' ]
//[ 1, 'Jiwoo' ]

맵 주요 메서드와 프로퍼티

• 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
  • 요소의 개수를 반환

 

---

 

Object와 Map 각각의 사용 용도

 

Object

• 데이터를 저장하기 위한 간단한 구조이며, Key가 String이거나 integer(또는 Symbol)인 경우 : Map을 생성하는 것보다 기본 오브젝트를 생성하는 데 훨씬 적은 시간이 걸리기 때문.
• 각각의 property/element가 별도의 로직이 적용되어야 하는 경우 
• JSON으로/에서 변환해야 하는 경우(Map은 현재 지원하지 않음)

Map

• 키의 추가/삭제가 빈번한 경우 : Map은 순수한 Hash이고, Object는 그보다 복잡하기 때문에 속도가 Map이 더 뛰어남. 또한 Object property를 삭제하는 delete 연산은 몇 가지 성능 이슈가 존재함
• 키의 순서가 보장되어야 할 때 : Map은 iteration 기반으로 만들어졌기 때문에 기본적으로 순서를 유지
• 데이터의 크기가 클 때 : 더 나은 성능을 보임
• 런타임 시점까지 key가 정해지지 않은 경우 
• key와 value가 각각 같은 타입일 경우 

출처: 

https://kellis.tistory.com/129

https://velog.io/@proshy/JSSet-Map-Object-정리

http://www.tcpschool.com/javascript/js_object_concept