Zoeeey
Stack flows in you
Zoeeey
  • ๋ถ„๋ฅ˜ ์ „์ฒด๋ณด๊ธฐ (155)
    • ๐Ÿ’ก UXUI (4)
      • UXUI (2)
      • UI (2)
      • UX (0)
    • ๐ŸŸจ JavaScript (66)
      • ๊ฐœ๋… (42)
      • ์ •๋ฆฌ (2)
      • ๋ฌธ์ œํ’€๊ธฐ (ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค, ์ฝ”๋”ฉ์• ํ”Œ) (15)
      • ์‘์šฉํ•˜์—ฌ ์ž๋™ํ™”or๋ฌธ์ œํ•ด๊ฒฐํ•˜๊ธฐ (2)
      • ๊ธฐํƒ€ (5)
    • โš›๏ธ React (49)
      • ๊ฐœ๋… (27)
      • ๊ฐœ๋…(Redux) (3)
      • ์ •๋ฆฌ (4)
      • ๋ฌธ์ œํ’€๊ธฐ (์ฝ”๋”ฉ์• ํ”Œ: React) (15)
    • ๐Ÿ“˜ TypeScript (10)
      • ๊ฐœ๋… (8)
      • ๋ฌธ์ œํ’€๊ธฐ (์ฝ”๋”ฉ์• ํ”Œ) (2)
    • ๐ŸŒ HTML,CSS (18)
      • ์‹ค๋ฌด์—์„œ ์ž์ฃผ ๋ฐœ์ƒํ•œ ์˜ค๋ฅ˜๋“ค (10)
      • ๋’ค๋Šฆ๊ฒŒ ์•Œ์•„์„œ ๋ผˆ์•„ํ”ˆ ์œ ์šฉํ•œ CSS (6)
      • ๊ธฐํƒ€ ์ž์ฃผ ์“ฐ๋Š” CSS (2)
    • ๐Ÿ’ป CS (8)
      • CS (5)
      • ์ •๊ทœํ‘œํ˜„์‹ (2)
      • Git,Github (1)

ํƒœ๊ทธ

  • react
  • Props
  • json
  • state
  • object
  • ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค
  • ์ฝ”๋”ฉ์• ํ”Œ
  • class
  • UXUI
  • ์˜ค๋ฅ˜
  • array
  • CS
  • axios
  • useEffect
  • CSS
  • JavaScript
  • redux
  • Ajax
  • ์‚ผํ•ญ์—ฐ์‚ฐ์ž
  • TypeScript
์ „์ฒด ๋ฐฉ๋ฌธ์ž
์˜ค๋Š˜
์–ด์ œ
hELLO ยท Designed By ์ •์ƒ์šฐ.
Zoeeey

Stack flows in you

๐ŸŸจ JavaScript/๊ฐœ๋…

[๋“œ๋ฆผ์ฝ”๋”ฉ/์ฝ”๋”ฉ์•™๋งˆ] scope์™€ hoisting, ๊ทธ๋ฆฌ๊ณ  TDZ (์ถ”๊ฐ€)

2022. 4. 14. 13:12

scope

๋ณ€์ˆ˜์˜ '์ˆ˜๋ช…'

  1. local scope
  2. global scope

1. local scope

์ง€์—ญ๋ณ€์ˆ˜(Local Variable)๊ฐ€ ๊ฐ€์ง€๋Š” ๋ฒ”์œ„๋กœ, ํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰๋˜๋ฉด ๋งŒ๋“ค์–ด์ง€๊ณ  ํ•จ์ˆ˜๊ฐ€ ์ข…๋ฃŒ๋˜๋ฉด ์†Œ๋ฉธํ•œ๋‹ค. ํ•จ์ˆ˜ ์™ธ๋ถ€์—์„œ๋Š” ์ ‘๊ทผํ•  ์ˆ˜ ์—†๋‹ค.

2. global scope

์ „์—ญ๋ณ€์ˆ˜(Global Variable)๊ฐ€ ๊ฐ€์ง€๋Š” ๋ฒ”์œ„๋กœ ๋ณ€์ˆ˜๊ฐ€ ํ•จ์ˆ˜ ์™ธ๋ถ€์—์„œ ์„ ์–ธ๋˜์–ด ํ”„๋กœ๊ทธ๋žจ ์ „์ฒด์—์„œ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋‹ค.


 

let globalMsg = 'global'; // global variable
function printMsg() {
    let msg = 'hello';
    console.log(msg); // local variable
    console.log(globalMsg); // ์ •์ƒ์ž‘๋™ํ•œ๋‹ค.
}
printMsg();
console.log(msg); //RefenceError๊ฐ€ ๋ฐœ์ƒํ•œ๋‹ค.

์•ˆ(local scope ๋‚ด๋ถ€)์—์„œ๋Š” ๋ฐ–(global scope)๋ฅผ ๋ณผ ์ˆ˜ ์žˆ์ง€๋งŒ, ๋ฐ–์—์„œ๋Š” ์•ˆ์„ ๋ณผ ์ˆ˜ ์—†๋‹ค.


hoisting

scope ๋‚ด๋ถ€ ์–ด๋””์„œ๋“  ๋ณ€์ˆ˜๊ฐ€ ์ตœ์ƒ์œผ๋กœ ๋Œ์–ด์˜ฌ๋ ค์ง„ ๊ฒƒ์ฒ˜๋Ÿผ ๋™์ž‘ํ•œ๋‹ค.

  • 'var๋กœ ์„ ์–ธํ•œ ๋ชจ๋“  ๋ณ€์ˆ˜'์™€ 'ํ•จ์ˆ˜ ์„ ์–ธ๋ฌธ'์€ hoisting๋œ๋‹ค.
  • '๋ณ€์ˆ˜ ์„ ์–ธ'์ด 'ํ•จ์ˆ˜ ์„ ์–ธ'๋ณด๋‹ค, 'ํ• ๋‹น๋˜์–ด์žˆ๋Š” ๋ณ€์ˆ˜'๊ฐ€ 'ํ• ๋‹น๋˜์–ด์žˆ์ง€ ์•Š์€ ๋ณ€์ˆ˜'๋ณด๋‹ค ๋จผ์ € ์ธ์‹๋œ๋‹ค.

TDZ (Temporal Dead Zone)

๋ณ€์ˆ˜๊ฐ€ ์„ ์–ธ๋˜์—ˆ์ง€๋งŒ ์ดˆ๊ธฐํ™”๋˜๊ธฐ ์ „๊นŒ์ง€ ์•ก์„ธ์Šคํ•  ์ˆ˜ ์—†๋Š” ์˜์—ญ(๋ณ€์ˆ˜ ํ• ๋‹น ์ „์œผ๋กœ ์‚ฌ์šฉ์ด ๋ถˆ๊ฐ€ํ•œ ์˜์—ญ)์ด๋‹ค. let ๋ฐ const ํ‚ค์›Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•  ๋•Œ ๋ฐœ์ƒํ•œ๋‹ค.

console.log(myVar); // ์—๋Ÿฌ! myVar๋Š” TDZ์— ์žˆ์œผ๋ฏ€๋กœ ์ฐธ์กฐํ•  ์ˆ˜ ์—†์Œ

let myVar = 42; // ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•˜๊ณ  ์ดˆ๊ธฐํ™”
console.log(myVar); // ์ด์ œ myVar์˜ ๊ฐ’์ธ 42๋ฅผ ์ถœ๋ ฅ
if (true) {
  console.log(myVar); // ์—๋Ÿฌ! myVar๋Š” TDZ์— ์žˆ์œผ๋ฏ€๋กœ ์ฐธ์กฐํ•  ์ˆ˜ ์—†์Œ
  let myVar = 42; // ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•˜๊ณ  ์ดˆ๊ธฐํ™”
  console.log(myVar); // ์ด์ œ myVar์˜ ๊ฐ’์ธ 42๋ฅผ ์ถœ๋ ฅ
}

์ถœ์ฒ˜ : ๋“œ๋ฆผ์ฝ”๋”ฉ https://www.youtube.com/@dream-coding / ์ฝ”๋”ฉ์•™๋งˆ https://www.youtube.com/@codingangma

์ €์ž‘์žํ‘œ์‹œ (์ƒˆ์ฐฝ์—ด๋ฆผ)

'๐ŸŸจ JavaScript > ๊ฐœ๋…' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[์ฝ”๋”ฉ์•™๋งˆ ์™ธ] ๊ฐ์ฒด ๋ฆฌํ„ฐ๋Ÿด๊ณผ ๊ฐ์ฒด ์ ‘๊ทผ๋ฒ•, ๊ทธ๋ฆฌ๊ณ  ์ƒ์„ฑ์ž ํ•จ์ˆ˜  (0) 2022.04.14
[์ฝ”๋”ฉ์•™๋งˆ ์™ธ] ๊ฐ์ฒด(Object)์™€ ํ”„๋กœํผํ‹ฐ(property)  (0) 2022.04.14
[์ฝ”๋”ฉ์•™๋งˆ] ํ•จ์ˆ˜์„ ์–ธ๋ฌธ๊ณผ ํ•จ์ˆ˜ํ‘œํ˜„์‹, ๊ทธ๋ฆฌ๊ณ  ํ™”์‚ดํ‘œํ•จ์ˆ˜ (์ถ”๊ฐ€)  (0) 2022.04.14
[๋“œ๋ฆผ์ฝ”๋”ฉ/์ฝ”๋”ฉ์•™๋งˆ] strict๋ชจ๋“œ์™€ var/let/const  (0) 2022.04.14
[๋“œ๋ฆผ์ฝ”๋”ฉ] html์— js๋ฅผ ๋งํฌํ•˜๋Š” ์—ฌ๋Ÿฌ๊ฐ€์ง€ ๋ฐฉ๋ฒ•๋“ค  (0) 2022.04.14
    '๐ŸŸจ JavaScript/๊ฐœ๋…' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€
    • [์ฝ”๋”ฉ์•™๋งˆ ์™ธ] ๊ฐ์ฒด(Object)์™€ ํ”„๋กœํผํ‹ฐ(property)
    • [์ฝ”๋”ฉ์•™๋งˆ] ํ•จ์ˆ˜์„ ์–ธ๋ฌธ๊ณผ ํ•จ์ˆ˜ํ‘œํ˜„์‹, ๊ทธ๋ฆฌ๊ณ  ํ™”์‚ดํ‘œํ•จ์ˆ˜ (์ถ”๊ฐ€)
    • [๋“œ๋ฆผ์ฝ”๋”ฉ/์ฝ”๋”ฉ์•™๋งˆ] strict๋ชจ๋“œ์™€ var/let/const
    • [๋“œ๋ฆผ์ฝ”๋”ฉ] html์— js๋ฅผ ๋งํฌํ•˜๋Š” ์—ฌ๋Ÿฌ๊ฐ€์ง€ ๋ฐฉ๋ฒ•๋“ค
    Zoeeey
    Zoeeey
    ๊ธธ๊ฒŒ ์ƒ๊ฐํ•˜๊ณ  ์งง๊ฒŒ ๊ทธ๋ฆฌ๊ธฐ

    ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”