자바 스크립트의 Map 데이터 구조에 관한 모든 것
Dictionary 데이터 구조는 많은 이름으로 알려져 있습니다. 종종 Map, Associative Array, Symbol 또는 Lookup 테이블이라고 합니다.
Javascript에는 Objects, Map 및 WeakMap이 모두 이 범주에 속할 수 있지만 그 차이점과 사용 시기를 알고 있습니까?
이 기사의 비디오 버전
이 게시물은 Youtube의 Dictionary Data Structure Series의 개선되고 더 자세한 기사 버전으로 동영상을 선호하는지 확인할 수 있습니다.
Dictionary란 무엇입니까?
Dictionary은 키-값 쌍을 저장하는 데이터 구조입니다. 어떤 의미에서 항목의 키를 알고 있으면 이를 사용하여 액세스 할 수 있습니다. 이것은 배열 및 색인 관계와 유사하지만 Dictionary 항목은 다르게 저장됩니다. 이러한 유사성 외에도 Dictionary은 배열보다 Set 데이터 구조에 훨씬 더 가깝습니다.
자바스크립트 Object, Map 및 WeakMap
자바스크립트에서 개발자는 객체를 Dictionary으로 사용하고 객체는 값이 무엇이든 될 수 있고 키가 문자열 또는 기호 여야 하는 키-값 쌍 데이터를 저장합니다. ES6에서 커뮤니티는 매우 구체적인 문제와 일부 객체 제한을 해결하기 위해 Map 및 WeakMap을 얻었습니다.
Map vs Object
알고 있든 모르든 객체는 데이터 구조라기 보다는 빌딩 블록에 가깝습니다. Javascript에서 Objects의 개념은 Dictionary보다 Class에 훨씬 더 가깝습니다. 사실 Class는 객체를 생성하는 방법에 대한 구문적 설탕일 뿐이며 동일한 작업을 수행하는 다른 많은 방법이 있습니다. 이것은 수년 동안 Javascript 개발자가 적절한 Dictionary 데이터 구조를 가지고 있지 않았음을 의미합니다.
둘 다 장단점이 있으며 실제로 함께 잘 작동하지만 Map은 몇 가지 개체 제한을 훌륭하게 해결합니다.
객체는 문자열 또는 기호 키만 허용하며 Map을 사용하면 키는 무엇이든 될 수 있습니다. 이것은 DOM 요소를 키로 사용하고 빠른 액세스를 위해 특정 데이터를 여기에 연결하는 것과 같은 많은 가능성의 문을 엽니다.
const itemsOrder = new Map();
const ul = document.querySelector('.items');[...ul.children].forEach((li, index) => {
itemsOrder.set(li, index);
});
객체는 내부에 있는 사물의 수를 알 수 있는 방법을 제공하지 않습니다 (클래스 개념에 연결하는 또 다른 세부 사항). 반면에 Map에는 포함 된 항목 수를 쉽게 찾을 수 있는 "size"속성이 있습니다. Object에 대한 해결 방법은 "키", "값"및 "항목"과 같은 정적 메서드를 사용하여 배열을 가져오고 길이 속성에 액세스하는 것입니다.
const obj = {a: 10, b: 30, c: 100};
const map = new Map([['a', 10], ['b', 30], ['c', 100]]);Object.keys(obj).length; // 3;
map.size; // 3
Javascript Object의 또 다른 한계는 반복할 수 없다는 것입니다. Map은 데이터 구조이기 때문에 항목을 반복해야 하는 필요성이 내장되어 있습니다. "forEach"메서드 또는 반복기 중 하나를 사용하여 항목을 살펴볼 수 있습니다.
const map = new Map([['a', 10], ['b', 30], ['c', 100]]);map.forEach((value, key) => {
console.log(value); // 10, 30, 100
console.log(key); // a, b, c
});
Javascript Object 순서 키가 불안정하고 Map은 항목 삽입 순서를 유지합니다. 객체 키는 순서가 지정되어 있지만 키를 읽는 방법과 반복하는 방법에 따라 다른 결과를 얻을 수 있으므로 의존해서는 안됩니다.
객체를 만들 때 이미 프로토 타입과 함께 제공되며 해당 키도 계산됩니다. map를 만들 때 map에 넣은 것은 프로토 타입과 별개입니다. 즉, 내가 선택한 키 이름이 무엇이든 프로토 타입 키와 충돌하지 않습니다. 프로토 타입없이 객체를 생성하는“Object.create (null)”을 사용하여 객체를 생성하면 이 문제를 해결할 수 있습니다.
const map = new Map();
const obj = {};// overrides original toString method
obj['toString'] = () => 10;
map.set('toString', () => 10;obj.toString(); // 10
map.toString(); // [object Map]
map.get('toString')(); // 10
일반적으로 맵은 항목을 지속적으로 설정하고 제거하는 시나리오에서 더 좋습니다. Object는 데이터 구조가 아니기 때문에 항목의 지속적인 설정 및 제거에 최적화되어 있지 않습니다.
Map vs Object는 언제 사용합니까?
원하는 모든 것이 조회 테이블이면 Map을 사용하십시오. 또한 대량의 데이터 로드에 적합하며 지속적으로 데이터를 설정하고 제거 할 때 전반적으로 성능이 향상됩니다. 키가 문자열이 아닌 다른 것이 필요한 조회 테이블이 필요한 경우 Map이 유일한 옵션입니다.
Map은 데이터 구조로 사용하기 위한 것이지만, Object는 JSON과 가장 잘 작동하기 때문에 JSON과 구문을 공유하므로 데이터 전송에 적합합니다. 훨씬 더 쉬운 구문으로 함수 간의 작은 데이터 교환에도 더 좋지만, 그것은 무엇보다 선호도에 달려 있습니다.
Map 사용을 어렵게 만드는 또 다른 세부 사항은 웹상의 대부분의 API 및 도구가 Map이 아닌 객체를 가져 오도록 만들어졌으며 변환이 항상 쉽지 않거나 가능하지 않다는 것입니다. 지도는 사물을 제어하고 맞춤형 솔루션을 만드는 생태계에 더 적합합니다.
Javascript Object는 빌딩 블록과 비슷하기 때문에 익숙해야 하는 Javascript에서 Object를 생성하는 방법은 여러 가지가 있습니다. 대조적으로,지도를 만드는 단일 방법과 사용 목적이 있습니다. 시도해보세요.
Map vs WeakMap
Map과 함께 Javascript에는 WeakMap도 있습니다. 주요 차이점은 항목에 대한 약한 참조를 보유하고 키는 객체, 모든 객체 일 수 있으며 함수 및 기타 WeakMap 또는 Map에도 적용된다는 것입니다. 이러한 약한 특성으로 인해 WeakMap은 반복 할 수 없으므로 크기에 액세스 할 수 없습니다.
WeakMap의 장점은 가비지 수집기가 작업을 수행하는 것을 방해하지 않는다는 것입니다. Map을 사용하면 일부 객체에 대한 참조가 있으면 해당 객체를 사용하지 않더라도 Map을 폐기 할 때까지 메모리에 계속 남아 있습니다. 이것은 모든 객체, Array, Object, Set 등에 적용됩니다.
간단히 말해서, 객체 A를 생성하고 WeakMap에 넣고 다른 어떤 것도 참조하지 않으면 가비지 컬렉터가 이를 메모리에서 지 웁니다. WeakMap 약한 참조 특성은 다른 개체처럼 가비지 수집기가 메모리를 지우는 것을 중지하지 않습니다.
참고 : WeakMap은 사물에 대한 약한 참조를 만드는 유일한 방법이 아닙니다. Jasvascript WeakRef를 코드의 다른 것들과 함께 사용하여 약한 참조를 만들 수 있습니다.
WeakMap은 언제 사용합니까?
WeakMap은 메모리가 문제 일 때 완벽합니다. 생명이 생기고 지속적으로 지워지는 것들에 대한 참조를 유지하려면 참조를 수집하는 대신 WeakMap을 사용하여 더 일찍 편리하게 수집 할 수 있습니다. WeakMap은 메모리 누수를 방지하는 데 악명이 높습니다.
추적기로도 완벽합니다. 이는 무언가를 추적 할 때 참조를 유지해야 하고 더 이상 존재하지 않으면 왜 유지해야 하기 때문입니다. 또 다른 일반적인 사용 사례는 이제 기본적으로 쉽게 수행 할 수 있지만 개체 및 클래스의 개인 멤버를 만드는 것입니다.
마지막 사용 사례 중 하나는 추가 기능 또는 데이터로 라이브러리 또는 DOM 요소를 확장하는 것입니다. 나중에 참조 할 수 있도록 메타 데이터를 첨부하는 방법으로 네이티브 개체 또는 다른 개체를 확장하는 데 실제로 사용할 수 있습니다.
const elements = new WeakMap();elements.set(document.querySelector('button'), {
some: 'data'
});document.onclick = e => {
// the event tagert to access
// data associated with the element
console.log(elements.get(e.target))
}
결론
여기서 벗어나는 것은 객체 대신에 Map more를 사용하여 키-값 쌍 데이터를 관리해야 한다는 것입니다. 소규모 데이터 교환에는 Object, 네트워크 데이터 교환에는 JSON, 사물에 대한 약한 참조를 보유하려면 WeakMap을 사용하십시오. 지도는 데이터 구조만큼 강력하고 모든면에서 훨씬 좋습니다.
https://beforesemicolon.medium.com/map-dictionary-data-structure-in-javascript-f9741b905ede
등록된 댓글이 없습니다.
