๐ ๋ชฉ์ฐจ
- Introduction
- Singleton ํจํด์ด๋?
- Singleton ํจํด ๊ตฌํ
- Conclusion
- Reference
๐ Introduction
์๋ ํ์ธ์ ์ด๋ฒ ํฌ์คํ ์์๋ design pattern์ค singleton ํจํด์ ๋ํด์ ๋ฐฐ์๋ณด๊ฒ ์ต๋๋ค!
๐ Singleton ํจํด์ด๋?
์ด๋ฆ์์ single์ด ๋ค์ด๊ฐ๋ ๊ฒ์ผ๋ก ์ ์ถํ ์ ์๋ฏ์ด ์ ์ฒด ์์คํ ์์์ ํ๋์ ์ธ์คํด์ค๋ฅผ ์กด์ฌํ๋๋ก ๋ณด์ฅํ๋ ๊ฐ์ฒด ์์ฑํจํด์ ๋๋ค. ๋ฐ๋ผ์, ๊ฐ์ฒด ๋ฆฌํฐ๋ด๋ ๋ชจ๋ ์ฑ๊ธํค ํจํด์ด๋ผ๊ณ ํ ์ ์์ต๋๋ค. ํ์ง๋ง ๋ชจ๋ ์์ฑ์ด ๋ค ๊ณต๊ฐ๊ฐ ๋์ด์๊ธฐ์ ๋น๊ณต๊ฐ๋ฅผ ๋ง๋ค๋ ์ ๋๋ก ๋ singleton ํจํด ์ ๋๋ค.
๐ Singleton ํจํด ๊ตฌํ
Singleton์ ๊ฐ์ฒด ๋ฆฌํฐ๋ด + ํด๋ก์
๋ก ๊ตฌํํ ์ ์์ต๋๋ค. ๋ค์ ์ฝ๋๋ฅผ ๋ด์ฃผ์ธ์.
const singleton = (() => {
let instance;
const a = 'hello';
const initiate = () => ({
a: a,
b: () => {
console.log(a);
}
});
return {
getInstance: (name) => {
if (!instance) {
instance = initiate();
}
return instance;
}
}
})();
const first = singleton.getInstance();
const second = singleton.getInstance();
console.log(first === second); // true
console.log(first.a); // hello
first.b(); // hello
์ฝ๋๋ฅผ ์ดํด๋ณด์๋ฉด singleton
์ด๋ผ๋ ๋ณ์๋ ์ฆ์ ์คํ ํจ์(IIFE)๋ก์จ ๋ฐ๋ก instance๋ฅผ ์์ฑํ๊ฒ ๋ฉ๋๋ค. ๊ทธ๋์ first === second
๊ฐ ์ฐธ์ด ๋๊ฒ ๋ฉ๋๋ค.
๐ Conclusion
Javascript๋ ํด๋์ค ๊ธฐ๋ฐ์ ์ธ์ด๊ฐ ์๋๋ผ ๊ทธ๋ ๊ฒ ์ ์ฉํ ํธ์ ์๋๋๋ค. ๊ทธ๋ผ์๋ ํด๋น ํจํด์ ์๋ ๊ฒ๊ณผ ๋ชจ๋ฅด๋ ๊ฒ์ ์ฒ์ง์ฐจ์ด ๋ผ๊ณ ์๊ฐํฉ๋๋ค. ๊ทธ๋ผ ๋ค์ ์๊ฐ์ ๋ง๋์~!
๐ Reference
'Design Pattern' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
Mediator Pattern (0) | 2020.10.23 |
---|---|
Observer Pattern (0) | 2020.10.19 |
Module Pattern (0) | 2020.10.07 |
Constructor Pattern (0) | 2020.09.24 |
Vue Design Patterns - Builder Director Pattern (0) | 2020.09.05 |