๐ ํด๋ก์ ํจ์
ํด๋ก์ ๋ ํจ์์ ํจ์๊ฐ ์ ์ธ๋ ์ดํ์ ํ๊ฒฝ์ ์กฐํฉ์ด๋ค. ํด๋ก์ ๋ฅผ ์ดํดํ๋ ค๋ฉด JS๊ฐ ์ด๋ป๊ฒ ๋ณ์์ ์ ํจ๋ฒ์๋ฅผ ์ง์ ํ๋์ง๋ฅผ ์ดํดํด์ผํ๋ค.
๐ ์ดํ์ ๋ฒ์ ์ง์ (Lexical scoping)
function init() {
var name = "Mozilla"; // name์ init์ ์ํด ์์ฑ๋ ์ง์ญ ๋ณ์์ด๋ค.
function displayName() { // displayName() ์ ๋ด๋ถ ํจ์์ด๋ฉฐ, ํด๋ก์ ๋ค.
alert(name); // ๋ถ๋ชจ ํจ์์์ ์ ์ธ๋ ๋ณ์๋ฅผ ์ฌ์ฉํ๋ค.
}
displayName();
}
init();
๐ let๊ณผ const๋ฅผ ์ฌ์ฉํ ๋ฒ์ ์ง์
if (Math.random() > 0.5) {
var x = 1;
} else {
var x = 2;
}
console.log(x);
๐ ํด๋ก์ (Closure)
์์ 1
function makeFunc() {
var name = "Mozilla";
function displayName() {
alert(name);
}
return displayName;
}
var myFunc = makeFunc();
//myFunc๋ณ์์ displayName์ ๋ฆฌํดํจ
//์ ํจ๋ฒ์์ ์ดํ์ ํ๊ฒฝ์ ์ ์ง
myFunc();
//๋ฆฌํด๋ displayName ํจ์๋ฅผ ์คํ(name ๋ณ์์ ์ ๊ทผ)
์์ 2
function makeAdder(x) {
var y = 1; // ๋ฐ์๋ ์ํ
return function(z) {
y = 100; // 1 > 100 ์ผ๋ก ๋ณ๊ฒฝ
return x + y + z;
};
}
var add5 = makeAdder(5); // x ์ธ์ ๊ฐ 5 ์ ์
var add10 = makeAdder(10);
//ํด๋ก์ ์ x์ y์ ํ๊ฒฝ์ด ์ ์ฅ๋จ
// retern add5๋ณ์์ ์๋ก์ด ํจ์ ์ ์๋ก add5(z); z์ ์ธ์ ๊ฐ 2 ์ ์ add5์ retern x+y+z; ์คํ
// add5 ๋ ์ด๋ฏธ makeAdder ํจ์์ x๊ฐ 5๋ฅผ ๋ด๊ณ ์์.
// add5(z) ์ z ์ธ์ ๊ฐ์ ์๋กญ๊ฒ ์ ์ํ์ฌ y ๊ฐ์ ์๋ก์ด ๊ตฌ์ฑ๊ณผ z ์ธ์์ ๊ฐ ์ ์
// ์ต์ข
์ add5() ์ retern ์ผ๋ก ์คํ ๊ณ์ฐ.
console.log(add5(2)); // 107 (x:5 + y:100 + z:2)
console.log(add10(2)); // 112 (x:10 + y:100 + z:2)
// ํจ์ ์คํ ์ ํด๋ก์ ์ ์ ์ฅ๋ x, y๊ฐ์ ์ ๊ทผํ์ฌ ๊ฐ์ ๊ณ์ฐ
๐ ์ค์ฉ์ ์ธ ํด๋ก์
ํด๋ก์ ๋ ์ด๋ค ๋ฐ์ดํฐ(์ดํ์ ํ๊ฒฝ)์ ๊ทธ ๋ฐ์ดํฐ๋ฅผ ์กฐ์ํ๋ ํจ์๋ฅผ ์ฐ๊ด์์ผ์ฃผ๊ธฐ ๋๋ฌธ์ ์ ์ฉํ๋ค. ์ด๊ฒ์ ๊ฐ์ฒด๊ฐ ์ด๋ค ๋ฐ์ดํฐ์(๊ทธ ๊ฐ์ฒด์ ์์ฑ) ํ๋ ํน์ ๊ทธ ์ด์์ ๋ฉ์๋๋ค์ ์ฐ๊ด์ํจ๋ค๋ ์ ์์ ๊ฐ์ฒด์งํฅ ํ๋ก๊ทธ๋๋ฐ๊ณผ ๋ถ๋ช
ํ ๊ฐ์ ๋งฅ๋ฝ์ ์๋ค.
์ค์ฉ ์์ (CSS)
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
}
h1 {
font-size: 1.5em;
}
h2 {
font-size: 1.2em;
}
์ฐ๋ฆฌ์ ๋ํ์ ๊ธ์ ํฌ๊ธฐ ๋ฒํผ๋ค์ body ์์์ font-size ์์ฑ์ ๋ณ๊ฒฝํ ์ ์๊ณ ์ด๋ฐ ์กฐ์ ์ ์๋์ ๋จ์๋ค ๋๋ถ์ ํ์ด์ง์ ๋ค๋ฅธ ์์์ ์ํด ์ ํ๋๋ค.
์ค์ฉ ์์ (JS)
function makeSizer(size) {
return function() {
document.body.style.fontSize = size + 'px';
};
}
var size12 = makeSizer(12);
var size14 = makeSizer(14);
var size16 = makeSizer(16);
size2, size4, size6์ body ์์์ ๊ธ์ ํฌ๊ธฐ๋ฅผ ๊ฐ๊ฐ 12, 14, 16 ํฝ์
๋ก ๋ฐ๊พธ๋ ํจ์์ด๋ค. ์ด ํจ์๋ค์ ์๋์ฒ๋ผ ๋ฒํผ๋ค์ ์ฐ๊ฒฐํ ์ ์๋ค.
document.getElementById('size-12').onclick = size12;
document.getElementById('size-14').onclick = size14;
document.getElementById('size-16').onclick = size16;
<a href="#" id="size-12">12</a>
<a href="#" id="size-14">14</a>
<a href="#" id="size-16">16</a>
์ถ์ฒ | MDN JavaScript