{"componentChunkName":"component---src-templates-blog-post-js","path":"/javascript/es6-map-set/","result":{"data":{"site":{"siteMetadata":{"title":"Bottlehs Tech Blog","description":"웹·앱·AI 개발자 전병훈(bottlehs)의 기술 블로그. AI·LLM, JavaScript·Vue, Spring Boot, 알고리즘, 블록체인 실무 가이드를 다룹니다","siteUrl":"https://www.bottlehs.dev","author":{"name":"Jeon Byung Hun","summary":"개발을 즐기는 bottlehs - Engineer, MS, AI, FE, BE, OS, IOT, Blockchain, 설계, 테스트"},"social":{"github":"bottlehs","codepen":"bottlehs"}}},"markdownRemark":{"id":"6f233bca-1f79-5892-b931-6e9900499014","excerpt":"ES6 Map & Set Map과 Set은 Java와 같은 다른 프로그래밍 언어에서도 자주 사용하는 데이터 구조이다. Map은 키와 값으로 이루어진 데이터 구조이고, Set…","html":"

\"ES6

\n

Map과 Set은 Java와 같은 다른 프로그래밍 언어에서도 자주 사용하는 데이터 구조이다. Map은 키와 값으로 이루어진 데이터 구조이고, Set은 중복 없는 키-값으로 이루어진다. 기존 자바스크립트에서는 배열과 객체로 해당 기능을 구현할 수 있었지만, 입력값의 목록이나 특정값 찾기를 수행하기 위해서는 별도의 과정이 필요하다.

\n

Map과 Set을 이용하면, 이 과정을 단순화할 수 있다.

\n
let map = new Map()\n\nfor (let [key, val] of map.entries()) {\n  console.log(key + \" : \" + val)\n}\n\nlet set = new Set()\nset.add(\"a\").add(\"b\").add(\"c\")\n\nif (set.has(\"a\")) {\n  for (let key of set.values()) {\n    console.log(key)\n  }\n}
\n

이 밖에도 WeakMap 과 WeakSet이 있는데, 이는 Map과 Set이 비슷하게 작동하지만, 다른곳에서 해당 변수에 대한 참조가 없어진다면, 자동으로 Map과 Set에 있는 데이터를 삭제하는 것에 차이점이 있다.

\n

메모리에 있는 객체 참조 퍼런스가 없어지면, 자바스크립트의 가비지 컬렉터가 해당 객체를 해제하게 된다. WeakMap과 WeakSet은 이러한 레퍼런스에 추가하지 않아 메모리가 해제되는 경우, 데이터 구조에서도 같이 삭제하게 된다. 즉, 메모리 누수에 영향을 받지 않고 이용할 수 있다.

","tableOfContents":"","wordCount":{"words":113},"fields":{"slug":"/javascript/es6-map-set/","image":"/assets/es6.png","faq":[]},"frontmatter":{"title":"ES6 Map & Set","date":"2020년 12월 13일","dateISO":"2020-12-13T19:29:19.802Z","updatedISO":null,"category":"javascript","description":"Map과 Set은 Java와 같은 다른 프로그래밍 언어에서도 자주 사용하는 데이터 구조이다. Map은 키와 값으로 이루어진 데이터 구조이고, Set은 중복 없는 키-값으로 이루어진다. 기존 자바스크립트에서는 배열과 객체로 해당 기능을 구현할 수 있었지만, 입력값의 목록이나 특정값 찾기를 수행하기 위해서는 별도의 과정이 필요하다.","tags":["ES6","Map & Set","JavaScript","ECMAScript6"]}}},"pageContext":{"slug":"/javascript/es6-map-set/","previous":{"fields":{"slug":"/javascript/es6-객체-표현식/"},"frontmatter":{"title":"ES6 객체 표현식","tags":["ES6","객체 표현식","JavaScript","ECMAScript6"]}},"next":{"fields":{"slug":"/etc/파이어베이스-firebase-소개/"},"frontmatter":{"title":"파이어베이스(Firebase) 소개","tags":["파이어베이스","Firebase","Cloud Firestore","Realtime Database","Hosting","Functions","Authentication"]}}}},"staticQueryHashes":["213619243","3262363727"]}