wam
w__am ๊ฐœ๋ฐœ๋…ธํŠธ
wam
  • ๋ถ„๋ฅ˜ ์ „์ฒด๋ณด๊ธฐ (165)
    • CS ์ง€์‹ (10)
      • ์ž๋ฃŒ๊ตฌ์กฐ (0)
      • ์•Œ๊ณ ๋ฆฌ์ฆ˜ (0)
      • ์ปดํ“จํ„ฐ ๊ตฌ์กฐ (0)
      • ์šด์˜์ฒด์ œ (0)
      • ๋„คํŠธ์›Œํฌ (7)
      • ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค (0)
      • ๋””์ž์ธ ํŒจํ„ด (3)
    • Frontend (131)
      • Three.js (64)
      • NPM (1)
      • Nest.js (19)
      • React (10)
      • Apollo (7)
      • TypeScript (2)
      • JavaScript (12)
      • HTML, CSS (1)
      • Jest (3)
      • E2E (5)
      • Cypress (7)
    • Database (12)
      • TypeORM (12)
    • IT ์ง€์‹ (8)
      • ํด๋ผ์šฐ๋“œ ์„œ๋น„์Šค (3)
      • ๋„คํŠธ์›Œํฌ (1)
      • ๋ฐ์ดํ„ฐ ํฌ๋งท (2)
      • ๊ธฐํƒ€ (2)
    • IT Book (2)
    • ์œ ์šฉํ•œ ์‚ฌ์ดํŠธ (1)

๋ธ”๋กœ๊ทธ ๋ฉ”๋‰ด

  • ํ™ˆ
  • ํƒœ๊ทธ
  • ๋ฐฉ๋ช…๋ก
  • ๐Ÿฑ Github

์ธ๊ธฐ ๊ธ€

ํƒœ๊ทธ

  • API
  • ํ•จ์ˆ˜์˜ ๋ฒ”์œ„
  • ์›ํ˜•์ ์ธ ์›€์ง์ž„
  • ํ•จ์ˆ˜ ์„ ์–ธ๋ฌธ
  • Interface
  • ์Šค์ฝ”ํ”„
  • ๋ Œ๋”๋ง ์„ฑ๋Šฅ ์ตœ์ ํ™”
  • react ์„ฑ๋Šฅ ์ตœ์ ํ™”
  • ์˜คํ”„-ํ”„๋ ˆ๋ฏธ์Šค(off-premise) ๋ฐฉ์‹
  • ๋ฐ์ดํ„ฐ ํฌ๋งท
  • joi ์—๋Ÿฌ
  • math.sin()
  • ์ดˆ๊ธฐ ํ™˜๊ฒฝ์„ค์ •
  • gridhelper
  • type-graphql
  • threejs ๊ฐœ๋ฐœ ํ•  ๋•Œ ๋„์›€์„ ์ค„ ์ˆ˜ ์žˆ๋Š” ์œ ํ‹ธ๋ฆฌํ‹ฐ
  • mapped types
  • reactive variables
  • getdelta()
  • getelapsedtime()
  • Decorators
  • three.js ๊ตฌ์„ฑ ์š”์†Œ
  • isabstract
  • ์‚ผ๊ฐํ•จ์ˆ˜
  • math.cos()
  • e.preventdefault()
  • ๋””์ž์ธ ํŒจํ„ด
  • ํ•จ์ˆ˜ ํ‘œํ˜„์‹
  • axeshelper
  • ํ•จ์ˆ˜ ๋ฆฌํ„ฐ๋Ÿด

์ตœ๊ทผ ๊ธ€

๊ด€๋ฆฌ์ž

๊ธ€์“ฐ๊ธฐ / ์Šคํ‚จํŽธ์ง‘ / ๊ด€๋ฆฌ์žํŽ˜์ด์ง€
hELLO ยท Designed By ์ •์ƒ์šฐ.
wam

w__am ๊ฐœ๋ฐœ๋…ธํŠธ

์Šค์ฝ”ํ”„ ์ฒด์ธ
Frontend/JavaScript

์Šค์ฝ”ํ”„ ์ฒด์ธ

2024. 5. 8. 17:49

๐Ÿ’ก ์Šค์ฝ”ํ”„ ์ฒด์ธ : ๊ผฌ๋ฆฌ๋ฅผ ๋ฌผ๊ณ  ๊ณ„์† ๋ฒ”์œ„๋ฅผ ๋„“ํžˆ๋ฉด์„œ ์ฐพ๋Š” ๊ด€๊ณ„๋ฅผ ์Šค์ฝ”ํ”„ ์ฒด์ธ์ด๋ผ ํ•œ๋‹ค. 

๐Ÿ’ก๋‚ด๋ถ€ ํ•จ์ˆ˜์—์„œ๋Š” ์™ธ๋ถ€ ํ•จ์ˆ˜์˜ ๋ณ€์ˆ˜์— ์ ‘๊ทผ ๊ฐ€๋Šฅํ•˜์ง€๋งŒ ์™ธ๋ถ€ ํ•จ์ˆ˜์—์„œ๋Š” ๋‚ด๋ถ€ ํ•จ์ˆ˜์˜ ๋ณ€์ˆ˜์— ์ ‘๊ทผํ•  ์ˆ˜ ์—†๋‹ค.

 

 

  • ์ „์—ญ๋ณ€์ˆ˜์™€ ์ง€์—ญ๋ณ€์ˆ˜์˜ ๊ด€๊ณ„์—์„œ ์Šค์ฝ”ํ”„ ์ฒด์ธ(scope chain)์ด๋ž€ ๊ฐœ๋…์ด ๋‚˜์˜จ๋‹ค.
  • ๋‚ด๋ถ€ ํ•จ์ˆ˜์—์„œ๋Š” ์™ธ๋ถ€ ํ•จ์ˆ˜์˜ ๋ณ€์ˆ˜์— ์ ‘๊ทผ ๊ฐ€๋Šฅํ•˜์ง€๋งŒ ์™ธ๋ถ€ ํ•จ์ˆ˜์—์„œ๋Š” ๋‚ด๋ถ€ ํ•จ์ˆ˜์˜ ๋ณ€์ˆ˜์— ์ ‘๊ทผํ•  ์ˆ˜ ์—†๋‹ค.

 

 

๋ชจ๋“  ํ•จ์ˆ˜๋“ค์€ ์ „์—ญ ๊ฐ์ฒด์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋‹ค.

var name = 'zero';
function outer() {
  console.log('์™ธ๋ถ€', name); // zero
  function inner() {
    var enemy = 'nero';
    console.log('๋‚ด๋ถ€', name); // zero
  }
  inner();
}
outer();
console.log(enemy); // undefined
  • inner ํ•จ์ˆ˜๋Š” name ๋ณ€์ˆ˜๋ฅผ ์ฐพ๊ธฐ ์œ„ํ•ด ๋จผ์ € ์ž๊ธฐ ์ž์‹ ์˜ ์Šค์ฝ”ํ”„์—์„œ ์ฐพ๊ณ ,
  • ์—†์œผ๋ฉด ํ•œ ๋‹จ๊ณ„ ์˜ฌ๋ผ๊ฐ€ outer ์Šค์ฝ”ํ”„์—์„œ ์ฐพ๊ณ , ์—†์œผ๋ฉด
  • ๋‹ค์‹œ ์˜ฌ๋ผ๊ฐ€ ๊ฒฐ๊ตญ ์ „์—ญ ์Šค์ฝ”ํ”„์—์„œ ์ฐพ๋Š”๋‹ค.
  • ์ „์—ญ ์Šค์ฝ”ํ”„์—์„œ name ๋ณ€์ˆ˜๋ฅผ ์ฐพ์•„์„œ 'zero'๋ผ๋Š” ๊ฐ’์„ ์–ป๋Š”๋‹ค.
  • ๋งŒ์•ฝ ์ „์—ญ ์Šค์ฝ”ํ”„์—๋„ ์—†๋‹ค๋ฉด ๋ณ€์ˆ˜๋ฅผ ์ฐพ์ง€ ๋ชปํ•˜์˜€๋‹ค๋Š” ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•œ๋‹ค.

 

 

์ด๋ ‡๊ฒŒ ๊ผฌ๋ฆฌ๋ฅผ ๋ฌผ๊ณ  ๊ณ„์† ๋ฒ”์œ„๋ฅผ ๋„“ํžˆ๋ฉด์„œ ์ฐพ๋Š” ๊ด€๊ณ„๋ฅผ ์Šค์ฝ”ํ”„ ์ฒด์ธ์ด๋ผ๊ณ  ๋ถ€๋ฅธ๋‹ค.

 

 

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

'Frontend > JavaScript' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

for...of์™€ forEach ์ฐจ์ด  (0) 2024.08.06
๋ ‰์‹œ์ปฌ ์Šค์ฝ”ํ•‘  (0) 2024.05.08
ํด๋กœ์ €  (0) 2024.04.13
์‹คํ–‰ ์ปจํ…์ŠคํŠธ  (0) 2024.03.23
์›์‹œ ๊ฐ’๊ณผ ๊ฐ์ฒด์˜ ๋น„๊ต  (0) 2024.03.14
    'Frontend/JavaScript' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€
    • for...of์™€ forEach ์ฐจ์ด
    • ๋ ‰์‹œ์ปฌ ์Šค์ฝ”ํ•‘
    • ํด๋กœ์ €
    • ์‹คํ–‰ ์ปจํ…์ŠคํŠธ
    wam
    wam

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