let add = function(x) {
let sum = function(y) {
return x + y;
}
return sum;
}
let foo = add(1);
foo(3);
let total = foo(6);add๋ x๋ฅผ ๋งค๊ฐ๋ณ์๋ก ํ๋ฉฐ ํจ์ sum์ ๋ฐํํ๋ค.
add๋ ๋งค๊ฐ๋ณ์ x ๋ฅผ ํตํด ๊ทธ ๊ฐ์ ๋ด๋ถํจ์ sum์๊ฒ ์ ๋ฌํด์ค๋ค
์ด๋ sum์ ์ธ๋ถํจ์์ธ add์ ๋ณ์ x์ ์ ๊ทผํ ์ ์์ผ๋ฏ๋ก ํด๋ก์ ์ด๋ค.
total์ ๊ฐ์ธ foo(6) ์ add(1)(6) ๊ณผ ๊ฐ๊ณ ๋ต์ 7์ด๋ค.
๊ทธ๋ ๋ค๋ฉด foo(3)์? ์คํ๋๋ฉด 4๊ฐ ๋์ง๋ง ์ด๋ค ๋ณ์์๋ ํ ๋น๋์ง ์์๊ธฐ์ total์ ์ํฅ์ ๋ฏธ์น์ง ์๋๋ค.
var a = 0;
function foo() {
var b = 0;
return function() {
console.log(++a, ++b);
};
}
var f1 = foo();
var f2 = foo();
f1(); // --> A
f1(); // --> B
f2(); // --> C
f2(); // --> D์ฌ๊ธฐ์ ๋ณ์ a ๋ ๊ธ๋ก๋ฒ ๋ณ์ / ๋ณ์ b ๋ ๋ก์ปฌ ๋ณ์๋ก ๋ณผ ์ ์์ต๋๋ค.
๋ณ์ b ๋ ํจ์ ์์ ์ ์ธ๋์ด ์๊ธฐ ๋๋ฌธ์(= local ๋ณ์) f1()์ ์คํํ ๋, f2()๋ฅผ ์คํํ ๋ ๊ฐ๊ฐ ์นด์ดํธ๊ฐ ์ฌ๋ผ๊ฐ๋ ๊ฒ์ด๊ณ ,
๋ณ์ a ๋ ํจ์ ๋ฐ์ ์ ์ธ๋์ด ์๊ธฐ ๋๋ฌธ์(= global ๋ณ์) f1(), f2() ์ค ์ด๋ค ๊ฒ์ ์คํํด๋ ์นด์ดํธ๊ฐ ์ฌ๋ผ๊ฐ๋๋ค.
f1(); 1 1
f1(); 2 2
f2(); 3 1
f2(); 4 2
(Advanced Challenge) ํด๋ก์ ๊ฐ ๊ฐ์ฅ ์ ์ฉํ๊ฒ ์ฌ์ฉ๋๋ ์ํฉ์ ํ์ฌ ์ํ๋ฅผ ๊ธฐ์ตํ๊ณ ๋ณ๊ฒฝ๋ ์ต์ ์ํ๋ฅผ ์ ์งํ๋ ๊ฒ์ ๋๋ค.
๋ค์์ ํด๋ก์ ๊ฐ ์ ์ฉํ๊ฒ ์ฌ์ฉ๋๋ ์ํฉ์ธ ๋ฒํผ์ ํด๋ฆญํ๋ฉด ๋ํ๋๊ณ ์ฌ๋ผ์ง๋ ํ ๊ธ์ ๊ตฌํํ ์์ ์ฝ๋์ ๋๋ค. ํด๋ก์ ๊ฐ๋ ์ ํ์ฉํด์ isShow ๋ณ์์ Javascript ๋ฅผ ์์ฑํด ๋ณด์ธ์.
<!DOCTYPE html>
<html>
<body>
<button class="toggle">toggle</button>
<div class="box" style="width: 100px; height: 100px; background: red;"></div>
<script>
var box = document.querySelector('.box');
var toggleBtn = document.querySelector('.toggle');
var toggle = (function () {
var isShow = false;
// TODO: โ ํด๋ก์ ๋ฅผ ๋ฐํํ๋ ํจ์๋ฅผ ์์ฑํ์ธ์.
return function () {
// TODO: โข isShow ๋ณ์์ ์ํ๋ฅผ ๋ณ๊ฒฝํ๋ ์ฝ๋๋ฅผ ์์ฑํ์ธ์.
};
})();
// โก ์ด๋ฒคํธ ํ๋กํผํฐ์ ํด๋ก์ ๋ฅผ ํ ๋น
toggleBtn.onclick = toggle;
</script>
</body>
</html>โ ์์ฑํ ํจ์๋ ์์ ์ด ์์ฑ๋์ ๋์ ๋ ์์ปฌ ํ๊ฒฝ(Lexical environment)์ ์ํ ๋ณ์ isShow๋ฅผ ๊ธฐ์ตํ๋ ํด๋ก์ ์ ๋๋ค. ๋ณ์ isShow๋ box ์์์ ํ์ ์ํ๋ฅผ boolean ๊ฐ์ผ๋ก ๋ํ๋ ๋๋ค.
โก ๋ฒํผ์ ํด๋ฆญํ๋ฉด ์ด๋ฒคํธ ํ๋กํผํฐ์ ํ ๋นํ ์ด๋ฒคํธ ํธ๋ค๋ฌ์ธ ํด๋ก์ ๊ฐ ํธ์ถ๋ฉ๋๋ค. ํจ์๊ฐ ํธ์ถ๋ ๋ ์ํฉ์ ๋ฐ๋ผ ๋ณ์ isShow์ ๊ฐ์ด ๋ณ๊ฒฝ๋ฉ๋๋ค. ๋ณ์ isShow๋ ํด๋ก์ ์ ์ํด ์ฐธ์กฐ๋๊ณ ์๊ธฐ ๋๋ฌธ์ ์ ํจํ๋ฉฐ ์์ ์ ๋ณ๊ฒฝ๋ ์ต์ ์ํ๋ฅผ ๊ณ์ํด์ ์ ์งํ ์ ์์ต๋๋ค.
var box = document.querySelector('.box');
var toggleBtn = document.querySelector('.toggle');
var toggle = (function () {
var isShow = false;
// TODO: โ ํด๋ก์ ๋ฅผ ๋ฐํํ๋ ํจ์๋ฅผ ์์ฑํ์ธ์.
return function () { box.style.display = isShow ? 'block' : 'none';
isShow = !isShow;// TODO: โข isShow ๋ณ์์ ์ํ๋ฅผ ๋ณ๊ฒฝํ๋ ์ฝ๋๋ฅผ ์์ฑํ์ธ์.
};
})();
// โก ์ด๋ฒคํธ ํ๋กํผํฐ์ ํด๋ก์ ๋ฅผ ํ ๋น
toggleBtn.onclick = toggle;
'Lecture > ์ฝ๋์คํ ์ด์ธ ' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [SEB FE] section 2 unit 1 (2) ๊ณ ์ฐจ ํจ์ ํ์ด 15~24 (0) | 2022.09.21 |
|---|---|
| [SEB FE] section 2 unit 1 (1) ๊ณ ์ฐจ ํจ์ ํ์ด 1~14 (0) | 2022.09.20 |
| [SEB FE] section 1 unit 10 (3) ์ค์ฝํ ์ข ํฉ๋ฌธ์ (0) | 2022.09.08 |
| [SEB FE] section 1 unit 10 (2) ์ค์ฝํ (0) | 2022.09.06 |
| [SEB FE] section 1 unit 10 (1) ์์์๋ฃํ๊ณผ ์ฐธ์กฐ์๋ฃํ + ์ข ํฉํด์ฆ (1) | 2022.09.06 |
