: Javascript์์์ Closure๋ ๋ด๋ถ ํจ์๊ฐ ์ธ๋ถ ํจ์์ ์ง์ญ ๋ณ์์ ์ ๊ทผํ๊ณ ์์ ๋, ์ธ๋ถ ํจ์๊ฐ ์คํ์ด ๋๋์ ์ง์ญ ๋ณ์๊ฐ ์๋ฉธ๋์์ด์ผ ํจ์๋ ์ฌ์ ํ ๋ด๋ถ ํจ์์์ ์ ๊ทผ์ด ๊ฐ๋ฅํ ๋งค์ปค๋์ฆ์ ์๋ฏธํ๋ค.
๋ค์๊ณผ ๊ฐ์ ์ํฉ์์ ์ฐ๋ฆฌ๋ Closure๋ฅผ ๋ณผ ์ ์๋ค.
function makeFunc() {
var name = 'Think Thing';
function displayName() { // Closure ํ์ฑ
alert(name);
}
return displayName;
}
var myFunc = makeFunc(); // myFunc๋ณ์์ displayName์ ๋ฆฌํด
myFunc();
Closure๊ฐ ๋์ํ๋ ๋ฐฉ์์ ์ค๋ช ํ๋ ค๋ฉด ์ค์ฝํ(Scope)๋ผ๋ ๊ฐ๋ ๋ถํฐ ์ง๊ณ ๋์ด๊ฐ์ผ ํ๋ค.
console.log("์ ์ญ ์ปจํ
์คํธ์
๋๋ค.");
function func1(){
console.log("func1 ์
๋๋ค.");
}
function func2(){
func1();
console.log("func2 ์
๋๋ค.");
}
func2();
๋ค์ ์๋ฅผ ์ฐธ๊ณ ํ์๋ฉด, ์ค์ฝํ๋ ๊ทธ ๋ณ์๊ฐ ํธ์ถ๋๋ ์์ ์ด ์๋๋ผ, ์ ์ธ๋๋ ์์ ์ ๊ณ ๋ คํ๋ค๋ ์ ์ ์ ์ ์๋ค.
var name = 'zero';
function log() {
console.log(name); // 2) ์ ์ญ ๋ณ์ name์ ์ฐธ์กฐ
}
function wrapper() {
name = 'nero'; // 1) ์ ์ญ๋ณ์ name ๊ฐ ๋ณ๊ฒฝ
log();
}
wrapper(); // ๊ฒฐ๊ณผ : nero ์ถ๋ ฅ
var name = 'zero';
function log() {
console.log(name); // 2) ์ ์ญ ๋ณ์ name์ ์ฐธ์กฐ
}
function wrapper() {
var name = 'nero'; // 1) name ์ ์ธ์ ๋ฐ๋ฅธ ์๋ก์ด ์ค์ฝํ ์์ฑ(์ง์ญ ๋ณ์ name)
log();
}
wrapper(); // ๊ฒฐ๊ณผ : zero ์ถ๋ ฅ
๊ฒฐ๋ก ๋ถํฐ ์คํฌํ์๋ฉด, JS์ ๊ฐ๋น์ง ์ปฌ๋ ์ (Garbage Collection) ์ ์ฑ ๋๋ฌธ์ด๋ค.
: ๋ถ๋ช C์ธ์ด์ ๊ฐ์ ์ ์์ค์ ์ธ์ด์์๋ malloc()๊ณผ free()๋ฅผ ํตํด ๊ฐ๋ฐ์๊ฐ ์ง์ ๋ฉ๋ชจ๋ฆฌ ๊ด๋ฆฌ๋ฅผ ํด์ค์ผ ํ๋ค.
๊ทธ๋ฌ๋ ๊ณ ์์ค ์ธ์ด์ธ JS์์๋ ๋ฉ๋ชจ๋ฆฌ ํ ๋น์ด ๋ฐ์ํ๋ฉด ๊ทธ๊ฒ์ ์ถ์ ํ๊ณ , ํ ๋น๋ ๋ฉ๋ชจ๋ฆฌ ๋ธ๋ก์ด ๋ ์ด์ ํ์ํ์ง ์๊ฒ ๋์๋ ์ง๋ฅผ ์ค์ค๋ก ํ๋จํ์ฌ ํ์ํ๋ค.
์ธ๋ป ๋ณด๊ธฐ์๋ ํธ๋ฆฌํ ๊ธฐ๋ฅ์ด์ง๋ง, ๋ชจ๋ ๋ฌธ์ ๋ ์ค์ค๋ก ํ๋จํ์ฌ ํ์ํ๋ค๋ ์ ์์ ์์ํ๋ค. ์ธ์ ๋ฌด์์ด ์คํ๋๊ณ ์ฐธ์กฐ๋ ์ง ๋ชจ๋ฅด๋๋ฐ ์ด ๋ฉ๋ชจ๋ฆฌ ๊ณต๊ฐ์ ๋ ์ด์ ํ์ํ์ง ์๋ค๋ผ๊ณ ํ๋จํ๋ ๊ธฐ์ค์ ์ ๋์ ์ผ๋ก ์ ํ๊ธฐ๋ ํ๋ค๊ธฐ ๋๋ฌธ์ด๋ค.
JS๋ ๊ทธ ๊ธฐ์ค์ ์ต์์ ๊ฐ์ฒด๋ก๋ถํฐ์ ๋๋ฌ ๊ฐ๋ฅ์ฑ์ด๋ผ๋ ๊ฐ๋ ์ผ๋ก ์ ํ๊ณ , ๋๋ฌ์ด ๊ฐ๋ฅํ ๊ฐ์ ๋ฉ๋ชจ๋ฆฌ์์ ์ญ์
ํ์ง ์๊ฒ ํ๋ค.
* ์ฌ๊ธฐ์ ์ต์์ ๊ฐ์ฒด๋ ๋ธ๋ผ์ฐ์ ์์ window, Node.js์์ global์ด๋ค.
* ๋๋ฌ ๊ฐ๋ฅ์ฑ์ ์ฐธ์กฐ ๊ฐ๋ฅ์ฑ / ํธ์ถ ๊ฐ๋ฅ์ฑ ๋ฑ์ผ๋ก ์๊ฐํด๋ ๋ ๊ฒ ๊ฐ๋ค.
์์ ๋ดค๋ ์ฝ๋๋ฅผ ๋ค์ ๋ณด์๋ฉด,
function makeFunc() {
const name = 'Think Thing';
function displayName() { // Closure ํ์ฑ
alert(name);
}
return displayName;
}
const myFunc = makeFunc(); // myFunc๋ณ์์ displayName์ ๋ฆฌํด
myFunc();
Closure๋ฅผ ์ฌ์ฉํด ์ป์ ์ ์๋ ์ฅ๋จ์ ์ ๋ค์๊ณผ ๊ฐ๋ค.
React์ useState๋ Closure๋ฅผ ํ์ฉํด ๊ตฌํํ ์ ์๋ค!
function useState(initialValue) {
var _val = initialValue // _val์ useState์ ์ํด ๋ง๋ค์ด์ง ์ง์ญ ๋ณ์
function state() {
// state๋ ๋ด๋ถ ํจ์์ด์ Closure
return _val // state()๋ ๋ถ๋ชจ ํจ์์ ์ ์๋ _val์ ์ฐธ์กฐ
}
function setState(newVal) {
// ๋ง์ฐฌ๊ฐ์ง
_val = newVal // _val๋ฅผ ๋
ธ์ถํ์ง ์๊ณ _val๋ฅผ ๋ณ๊ฒฝ
}
return [state, setState] // ์ธ๋ถ์์ ์ฌ์ฉํ๊ธฐ ์ํด ํจ์๋ค์ ๋
ธ์ถ
}
AWS, EC2, SSH, Jenkins, Express, Github, CI/CD, BTS, Let's go (1) | 2023.03.19 |
---|---|
SVG์ ๋ถํธํ ์ง์ค (2) | 2023.01.10 |
๋น์ ์ด JS ๊ฐ๋ฐ์๋ผ๋ฉด ๋ฐ๋์ ์์์ผํ ES2022 ์ ๊ท ๊ธฐ๋ฅ 7๊ฐ์ง (0) | 2022.08.02 |
CSS Grid๋ฅผ ๋ฐ์ํ์ผ๋ก ์ฌ์ฉํ ์ ์์๊น: auto-fit, auto-fill (0) | 2022.03.25 |
[Issue] Material-UI๋ ๋ก์ปฌ๊ณผ ๋ฐฐํฌ ํ๊ฒฝ(๋น๋)์ด ๋ค๋ฅด๋ค (0) | 2022.03.18 |
๋๊ธ ์์ญ