2025. 8. 26. 19:55ใFront-end/JavaScript

๋ชฉ์ฐจ
1. ์ํฌ๋งต๊ณผ ์ํฌ์
2. ์ํฌ๋งต (WeekMap)
2-1. ๋งต๊ณผ ์ํฌ๋งต์ ์ฐจ์ด (์ํฌ๋งต์ ํน์ง)
2-2. ์ํฌ๋งต์ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ
3. ์ํฌ์ (WeekSet)
1. ์ํฌ๋งต๊ณผ ์ํฌ์
๊ฐ์ฒด์ ํ๋กํผํฐ, ๋ฐฐ์ด์ ์์, ๋งต๊ณผ ์ ์ ๊ตฌ์ฑ ์์๋ค์ ๊ฐ๋น์ง์ปฌ๋ ํฐ์ ์ํด ์ญ์ ๋์ง ์๋๋ค.
์๋ฃ๊ตฌ์กฐ๊ฐ ๋จ์์๋ ๋์์ ๊ทธ ์์๋ ๋๋ฌ ๊ฐ๋ฅํ ๊ฐ์ผ๋ก ์ทจ๊ธ๋๊ธฐ ๋๋ฌธ์ด๋ค.
์ํฌ๋งต๊ณผ ์ํฌ์ ์ ์ฌ์ฉํ๋ฉด ํค๋ก ์ฐ์ธ ๊ฐ์ฒด๊ฐ ๊ฐ๋น์ง ์ปฌ๋ ์ ์ ๋์์ด ๋๋ค.
2. ์ํฌ๋งต (WeekMap)
1. ๋งต๊ณผ ์ํฌ๋งต์ ์ฐจ์ด (์ํฌ๋งต์ ํน์ง)
1. ์ํฌ๋งต์ ํค๋ ๋ฐ๋์ ๊ฐ์ฒด์ฌ์ผ ํ๋ค. (์์๊ฐ์ ์ํฌ๋งต์ ํค๊ฐ ๋ ์ ์์)
let weakMap = new WeakMap();
let obj = {};
weakMap.set(obj, "ok"); // ์ ์ ์๋
weekMap.set("text", "no"); // Error: Invalid value ...
์ํฌ๋งต์ ํค๋ก ์ฌ์ฉ๋ ๊ฐ์ฒด(obj)๋ฅผ ์ฐธ์กฐํ๋ ๊ฒ์ด ์๋ค๋ฉด, ํด๋น ๊ฐ์ฒด๋ ๋ฉ๋ชจ๋ฆฌ์ ์ํฌ๋งต์์ ์๋์ผ๋ก ์ญ์ ๋๋ค.
let john = { name: "John" }; // ๊ฐ์ฒด
let weakMap = new WeakMap(); // weakmap ์์ฑ
weakMap.set(john, "..."); // ๊ฐ์ฒด๋ฅผ ํค๋ก ์ค์
john = null; // ์ฐธ์กฐ๋ฅผ ๋ฎ์ด์จ์ {name:"John"}์ ์ด์ ์ง์์ง
john์ ๋ํ๋ด๋ ๊ฐ์ฒด { name: "John" }์ ์ค๋ก์ง ์ํฌ๋งต์ ํค๋ก๋ง ์ฐ์ด๊ณ ์๋ค.
๋ฐ๋ผ์ ์ฐธ์กฐ๋ฅผ ๋ฎ์ด์ฐ๊ฒ ๋๋ฉด ์ด ๊ฐ์ฒด๋ ์ํฌ๋งต, ๋ฉ๋ชจ๋ฆฌ์์ ์ญ์ ๋๋ค.
2. ๋ฐ๋ณต ์์ ๊ณผ keys(), values(), entries() ๋ฉ์๋๋ฅผ ์ง์ํ์ง ์๋๋ค.
๋ฐ๋ผ์ ์ํฌ๋งต์์ ํค๋ ๊ฐ ์ ์ฒด๋ฅผ ์ป๋ ๊ฒ์ด ๋ถ๊ฐ๋ฅํ๋ฉฐ, ์ํฌ๋งต์ด ์ง์ํ๋ ๋ฉ์๋๋ ์ ์ด์ง๋ค.
- weakMap.get(key)
- weakMap.set(key, value)
- weakMap.delete(key)
- weakMap.has(key)
๊ฐ๋น์ง ์ปฌ๋ ์ ์ ๋์ ์์ ์ ์ ํํ ์ ์ ์๊ธฐ ๋๋ฌธ์ ์์ ์ ์ฒด๋ฅผ ๋์์ผ๋ก ํ๋ ๋ฉ์๋ ๋์์ด ๋ถ๊ฐ๋ฅํ ๊ฒ์ด๋ค.
2. ์ํฌ๋งต์ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ
1. ์ถ๊ฐ ๋ฐ์ดํฐ
๋ถ์ฐจ์ ์ธ ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ ๊ณณ์ด ํ์ํ ๋ ์ฌ์ฉํ๊ธฐ ์ข๋ค.
"์ธ๋ถ ์ฝ๋์ ์ํ ๊ฐ์ฒด"์ ๋ฐ์ดํฐ๋ฅผ ์ถ๊ฐํด์ผํ๋ ๊ฒฝ์ฐ, ์ด ๋ฐ์ดํฐ๋ "์ธ๋ถ ๊ฐ์ฒด"๊ฐ ์ด์์๋ ๋์๋ง ์ ํจํ๋ค.
์ํฌ๋งต์ ์ํ๋ ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ๊ณ , ํค๋ก "์ธ๋ถ ๊ฐ์ฒด"๋ฅผ ์ฌ์ฉํ๋ค.
// visitsCount.js
let visitsCountMap = new WeakMap(); // ์ฌ์ฉ์์ ๋ฐฉ๋ฌธ ํ์๋ฅผ ์ ์ฅํ๋ visitsCountMap
function countUser(user) {
let count = visitsCountMap.get(user) || 0;
visitsCountMap.set(user, count + 1);
}
// main.js
let john = { name: "John };
countUser(john);
// ...
john = null; // john์ด ํํดํ๋ฉด WeakMap์์๋ john์ ๋ฐ์ดํฐ๊ฐ ์ง์์ง
2. ์บ์ฑ (cashing)
๋์ผํ ํจ์๋ฅผ ์ฌ๋ฌ ๋ฒ ํธ์ถํด์ผํ ๋, ์ต์ด ํธ์ถ ์ ๋ฐํ๋ ๊ฐ์ ์ ์ฅํด๋๋ค๊ฐ ๋ค์ ํจ์ ํธ์ถ ์ ์ ์ฅ๋ ๊ฐ์ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ์ด๋ค.
// cache.js
let cache = new WeakMap();
function process(obj) {
if(!cache.has(obj)) {
let result = /* ์ฐ์ฐ ์ํ */ obj; // obj์ ๋ํ ์ฐ์ฐ
cache.set(obj, result);
}
return cache.get(obj);
}
// main.js
let obj = {/*... ๊ฐ์ฒด ...*/};
let result1 = process(obj);
let result2 = process(obj);
obj = null;
alert(cache.size);
์ฌ๊ธฐ์ cache๋ฅผ map์ผ๋ก ์ ์ธํ๋ค๋ฉด, ํ์์์ด์ง obj๋ฅผ null๋ก ๋ฎ์ด์จ๋ cache์๋ ์ฌ์ ํ obj์ ๋ํ ๊ฐ์ด ๋จ์์์์ ๊ฒ์ด๋ค.
ํ์ง๋ง WeakMap์ ์ฌ์ฉํจ์ผ๋ก์จ obj๊ฐ null์ด ๋๋ฉด cache์ obj๋ ์ง์์ง๋ค.
3. ์ํฌ์ (WeekSet)
์ํฌ์ ์ ๊ฐ์ฒด๋ง ์ ์ฅํ ์ ์๋ค. (์์๊ฐ ์ ์ฅ ๋ถ๊ฐ๋ฅ)
weakmap๊ณผ ๋ง์ฐฌ๊ฐ์ง๋ก ์ํฌ์ ์ด ์ง์ํ๋ ๋ฉ์๋๋ ๋จ์ถํ๋ค. (์์ ๊ฐ์ ์ด์ )
- weakSet.get(key)
- weakSet.set(key, value)
- weakSet.delete(key)
- weakSet.has(key)
์ํฌ์ ์ญ์ ๋ถ์ฐจ์ ์ธ ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ ๋ ์ฌ์ฉํ ์ ์๋๋ฐ, ์ํฌ์ ์๋ ๋ณต์กํ ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ์ง๋ ์๋๋ค.
๋์ ๊ฐ๋จํ ๋ต๋ณ์ ์ป๋ ์ฉ๋๋ก ์ฌ์ฉ๋๋ค.
์์๋ก ์ฌ์ฉ์์ ์ฌ์ดํธ ๋ฐฉ๋ฌธ ์ฌ๋ถ๋ฅผ ์ถ์ ํ๋ ์ฉ๋์ ์ฌ์ฉ์ ๋ณด์.
let visitedSet = new WeakSet();
let john = { name: "John" };
let kim = { name: "Kim" };
let dayeon = { name: "Dayeon" };
visitedSet.add(john);
visitedSet.add(kim);
visitedSet.add(john);
alert(visitedSet.has(john)); // true
alert(visitedSet.has(mary)); // false
john = null;
// visitedSet์์ john์ ๋ํ๋ด๋ ๊ฐ์ฒด๊ฐ ์๋์ผ๋ก ์ญ์ ๋๋ค.
์ฐธ๊ณ
'Front-end > JavaScript' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| B26: ๊ตฌ์กฐ ๋ถํด ํ ๋น : object๋ฅผ ๋ณ์๋ก ๋ถํดํ๊ธฐ (0) | 2025.08.26 |
|---|---|
| B25 : ๊ฐ์ฒด ๋ฉ์๋ Object.keys, values, entries (0) | 2025.08.26 |
| B24: ๋งต๊ณผ ์ (map & set) ๊ฐ์ฒด (0) | 2025.08.26 |
| ์ค์ฝํ์ ํธ์ด์คํ ํํค์น๊ธฐ (0) | 2025.08.23 |
| B22 : ๋ฌธ์์ด ์ฌํ (4) | 2025.08.21 |
GitHub