์๋ฐ ์คํฌ๋ฆฝํธ ์ดํ ๊ตฌ์กฐ
๐ฌ ์ดํ ๊ตฌ์กฐ
HTML์ ํ๊ทธ๋ ์์ฑ์ด๋ฆ์ด ๋๋ฌธ์์ ์๋ฌธ์๊ฐ ์์ฌ์๋๊ฒ๊ณผ๋ ๋ฌ๋ฆฌ,
JS
์์๋ ๋ชจ๋ ์๋ฌธ์ ๋ก ์ฒ๋ฆฌํ๋ค.
๐ฒ ํ์ , ๊ฐ, ๋ณ์
- ํ์
- ์์ํ์
(primitive type) : ์ซ์, ํ
์คํธ์ ๋์ด, ๋ถ๋ฆฌ์ธ ์ง๋ฆฌ๊ฐ,
null
๊ณผundefined
- ๊ฐ์ฒดํ์ (object type) : ์์ํ์ ์ธ์ ๊ฐ์ ๋ชจ๋ ๊ฐ์ฒด์ด๋ค. - ๊ฐ - ํด๋์ค๋ ๊ฐ์ฒด ํ์ ์ ํ์ ํ์ ์ผ๋ก ์๊ฐ ํ ์ ์๋ค.
์๋ฐ์คํฌ๋ฆฝํธ ์ธํฐํ๋ฆฌํฐ๋ ๋ฉ๋ชจ๋ฆฌ ๊ด๋ฆฌ๋ฅด ์ํด ์๋์ผ๋ก ๊ธฐ๋น์ง ์ปฌ๋ ์ ์ ์ํํ๋ค. ๊ฐ์ฒด์ ๋์ด์ ์ ๊ทผ ํ ์ ์์๋ ์ธํฐํ๋ฆฌํฐ๋ ์๋์ผ๋ก ๋ฉ๋ชจ๋ฆฌ์์ ํด์ ํ๋ค.
- ๋ณ์ - ํ์ ์ด ์ ํด์ ธ์์ง ์์ ๊ฐ์ ๋ณ์์ ๋ค๋ฅธ ํ์ ์ ๊ฐ์ ํ ๋นํ ์ ์๋ค. - ์ดํ ์ ํจ๋ฒ์(scope)๋ฅผ ์ฌ์ฉํ๋ค.
๐ Math
Method | description |
---|---|
.pow(2,53) | 2์ 53์น |
.PI | ์์ฃผ์จ |
.E | ์์ฐ ๋ก๊ทธ ์์ |
.sin | ์ผ๊ฐํจ์ (.cos, .atan) |
Math.log(100)/Math.LN10 | ๋ฐ์ด 10์ธ ๋ก๊ทธ 100 |
.exp(3) | Math.E์ 3 ๊ฑฐ๋ญ์ ๊ณฑ |
โ ๏ธ ์ด์ง ๋ถ๋์์์ ๊ณผ ๋ฐ์ฌ๋ฆผ ์ค๋ฅ
JS์ ๋ถ์๋ ์ด์ง ํํ๋ฒ์ผ๋ก ํํ๋์ด 10์ง์ ๋ถ์์ ๊ฐ์ ์์น๋ค์ ์ ํํ๊ฒ ํํํ ์ ์๋ค.
var x = .3 - .2; // 0.3 - 0.2
var y = .2 - .1;
x == y // false
x == .1 // false
y == .1 // true
์ด์ง ๋ถ๋์์์ ์ซ์๋ฅผ ์ฌ์ฉํ๊ธฐ๋๋ฌธ์ ๊ฐ๋ค์ ๋น๊ต๋ฌธ์์ ๋ฌธ์ ๊ฐ ๋ฐ์ํ๋ค.
๐ ํจํด ๋งค์นญ
๋ฌธ์์ด๊ณผ RegExp ๊ฐ์ฒด๋ ๋ชจ๋ ํจํด ๋งค์นญ๊ณผ ‘๊ฒ์ ํ ๋ฐ๊พธ๊ธฐ’ ๊ธฐ๋ฅ์ ์ํํ๋ ๋ฉ์๋๋ฅผ ๊ฐ์ง๊ณ ์๋ค.
/^HTML/ // `HTML`๋ก ์์ํ๋ ๋ฌธ์์ด
/[1-9][0-9]*/ // 0 ์๋ ์ซ์๋ก ์์ํ๋ ์ซ์
/\bjavascript\b/i // ๋์๋ฌธ์ ๊ตฌ๋ณ ์์ด javascript์ ์ผ์นํ๋ ๋ฌธ์์ด
๐ฎ ์ ์ญ ๊ฐ์ฒด
์ต์์ ์ฝ๋(ํจ์์ ์ผ๋ถ๊ฐ ์๋ ์ฝ๋) ์์๋ this ํค์๋๋ฅผ ํตํด ์ ์ญ ๊ฐ์ฒด๋ฅผ ์ฐธ์กฐ ํ ์ ์๋ค.
var global = this; // ์ ์ญ ๊ฐ์ฒด๋ฅผ ์ฐธ์กฐํ๋ ๋ณ์๋ฅผ ์ ์
๐ญ ๋ณ์์ ์ ํจ๋ฒ์
๊ฐ์ ์ด๋ฆ์ ๊ฐ๋ ๊ฒฝ์ฐ, ํจ์ ๋ด๋ถ์์ ์ง์ญ ๋ณ์๋ ์ ์ญ ๋ณ์์ ์ฐ์ ํ๋ค. ์ง์ญ ๋ณ์ ํน์ ํจ์ ๋งค๊ฐ๋ณ์๋ฅผ ์ ์ญ ๋ณ์์ ๊ฐ์ ์ด๋ฆ์ผ๋ก ์ ์ธํ๋ฉด, ์ ์ญ ๋ณ์๋ ๊ฐ์ถฐ ๋ฒ๋ฆฌ๊ฒ๋๋ค.
var scope = "global";
function checkscope(){
var scope = "local";
return scope; //์ ์ญ ๋ณ์๊ฐ ์๋ ์ง์ญ๋ณ์๋ฅผ ๋ฐํํ๋ค.
}
checkscope(); // return "local"
ํจ์ ์ ์๋ ์ค์ฒฉ ๋ ์ ์๋ค. ๊ฐ ํจ์์๋ ์์ ๋ง์ ์ ํจ๋ฒ์๊ฐ ์๋ค. ๋ฐ๋ผ์ ์๋์ ๊ฐ์ด ์ ํจ๋ฒ์๊ฐ ์ฌ๋ฌ๋จ๊ณ๋ก ์ค์ฒฉ ๋ ์ ์๋ค.
var scope = "global";
function checkscope() {
var scope = "local";
function nested() {
var scope = "nested";
return scope;
}
return nested();
}
checkscope(); // "nested scope"
โ๏ธ ํจ์ ์ ํจ๋ฒ์์ ๋์ด์ฌ๋ฆผ (hoisting)
๋ณ์์ ์ ์๊ฐ ๊ทธ ๋ฒ์์ ๋ฐ๋ผ ์ ์ธ๊ณผ ํ ๋น์ผ๋ก ๋ถ๋ฆฌ๋๋๊ฒ์ด๋ค. ์ฆ, ๋ณ์๊ฐ ํจ์๋ด์์ ์ ์ ๋์์ ๊ฒฝ์ฐ ์ ์ธ์ด ํจ์์ ์ต์์๋ก, ํจ์ ๋ฐ๊นฅ์์ ์ ์๋์์ ๊ฒฝ์ฐ๋ ์ ์ญ ์ปจํ ์คํธ์ ์ต์์๋ก ๋ณ๊ฒฝ๋ฉ๋๋ค. ๋ง ๊ทธ๋๋ก ์ ์ธ ํน์ ์ ์์ ์์น๊ฐ ๋์ด์ฌ๋ ค ์ง๋๊ฒ์ด๋ค.
function showName() {
console.log("First Name : " + name);
var name = "Ford";
console.log("Last Name : " + name);
}
showName();
์ด ์ฝ๋๋ ์๋ฐ์คํฌ๋ฆฝํธ ์์ง์ ์ํด ๋ค์๊ณผ ๊ฐ์ด ํด์๋๋ค.
function showName() {
var name; // โ๏ธ Hoist!
console.log("First name : " + name);
name = "Ford";
console.log("Last Name : " + name);
}
- JavaScript Variable Scope and Hoisting Explained By Richard Bovell ๐