๐Ÿ’ฌ ์–ดํœ˜ ๊ตฌ์กฐ

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 ๐Ÿ“

โ›“ ์œ ํšจ๋ฒ”์œ„ ์ฒด์ธ