SangMin's MemoryCard

μ‹€ν–‰μ»¨ν…μŠ€νŠΈ(Executed Context) 더 μ‰½κ²Œ!

July 08, 2020

μ°Έμ‘° : https://www.zerocho.com/category/Javascript/post/5740531574288ebc5f2ba97e

πŸ˜– μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλ₯Ό 이전에 κ³΅λΆ€ν–ˆμ§€λ§Œ.. 아직 확신이 가지 μ•ŠλŠ” 뢀뢄이 λ§Žμ•„μ„œ 더 ꡬ글링 ν•΄ λ³΄μ•˜κ³ , 쑰금 더 μ‰½κ²Œ μ„€λͺ…λœ 글이 μžˆμ—ˆλ‹€!

μ‹€ν–‰μ»¨ν…μŠ€νŠΈ : λ¬Έλ§₯이라 μƒκ°ν•˜μž. μ½”λ“œμ˜ μ‹€ν–‰ν™˜κ²½.

μ„€λͺ…을 μœ„ν•œ μ½”λ“œ

var name = 'zero'
function wow(word) {
  console.log(word + ' ' + name)
}
function say() {
  var name = 'nero'
  console.log(name)
  wow('hello')
}
say()

μ‹œμž‘!

  1. μ „μ—­λ³€μˆ˜κ°μ²΄ 생성(window에 μ „μ—­λ³€μˆ˜λ“€ μΆ”κ°€)
  2. μ „μ—­μ»¨ν…μŠ€νŠΈ 생성. ν•¨μˆ˜μ„ μ–Έμ‹μ˜ 경우, μ†μ„±μœΌλ‘œ ν•¨μˆ˜λͺ…, κ°’μœΌλ‘œ ν•¨μˆ˜κ°€ μΆ”κ°€λ˜κ³ , λ³€μˆ˜μ˜κ²½μš° μ†μ„±μœΌλ‘œ λ³€μˆ˜λͺ…, 값은 undefined둜 할당됨.
let GEC = {
  VO: {
    // GO라고도 함
    name: undefined,
    wow: function wow() {
      'μœ„μ˜ ν•¨μˆ˜λ‚΄μš©'
    },
    say: function say() {
      'μœ„μ˜ ν•¨μˆ˜λ‚΄μš©'
    },
  },
  scopeChain: ['μ „μ—­ λ³€μˆ˜κ°μ²΄'],
  this: window,
}
  1. μ½”λ“œλ₯Ό μœ„μ—μ„œλΆ€ν„° μ½μ–΄λ‚΄λ €μ˜€λ©΄μ„œ 각 λ³€μˆ˜λ“€μ—κ²Œ 값을 ν• λ‹Ήν•΄μ€Œ.
GEC = {
  VO: {
    // GO라고도 함
    name: 'zero',
    wow: function wow() {
      'μœ„μ˜ ν•¨μˆ˜λ‚΄μš©'
    },
    say: function say() {
      'μœ„μ˜ ν•¨μˆ˜λ‚΄μš©'
    },
  },
  scopeChain: ['μ „μ—­ λ³€μˆ˜κ°μ²΄'],
  this: window,
}
  1. say() ν˜ΈμΆœμ‹œ, say ν•¨μˆ˜μ»¨ν…μŠ€νŠΈ 생성
let FEC_say = {
  VO: {
    // FO라고도 함
    arguments: null,
    variable: {
      name: undefined,
    },
  },
  scopeChain: ['say λ³€μˆ˜κ°μ²΄', 'μ „μ—­ λ³€μˆ˜κ°μ²΄'],
  this: window,
}
  • wow('hello')도 sayν•¨μˆ˜ 내뢀에 μžˆλŠ”λ°, μ™œ say μ‹€ν–‰μ»¨ν…μŠ€νŠΈμ—μ—†λ‚˜ ν•  수 μžˆλŠ”λ°, sayν•¨μˆ˜ λ‚΄λΆ€μ˜ wowλŠ” λ³€μˆ˜κ°€μ•„λ‹ˆλΌ 호좜된 ν•¨μˆ˜μž„. λ”°λΌμ„œ, ν•¨μˆ˜μ˜ ν˜ΈμΆœμœ„μΉ˜κ°€ μ•„λ‹Œ μ„ μ–Έ μœ„μΉ˜μ— 따라 μŠ€μ½”ν”„(μ˜μ—­)이 μ„€μ •λ˜κΈ° λ•Œλ¬Έμ— wow의 μ •λ³΄λŠ” ν•¨μˆ˜μ„ μ–Έμ‹μœΌλ‘œ ν‘œν˜„λ˜μ—ˆμ„ λ•Œ, μ „μ—­λ³€μˆ˜κ°μ²΄μ— λ‹΄κ²¨μžˆμŒ.
  1. undefinedμ˜€λ˜ λ³€μˆ˜name κ°’ ν• λ‹Ή.
FEC_say = {
  VO: {
    // FO라고도 함
    arguments: null,
    variable: {
      name: 'nero',
    },
  },
  scopeChain: ['say λ³€μˆ˜κ°μ²΄', 'μ „μ—­ λ³€μˆ˜κ°μ²΄'],
  this: window,
}
  1. wow(β€˜hello’) ν˜ΈμΆœμ‹œ, wow μ‹€ν–‰μ»¨ν…μŠ€νŠΈ 생성
let FEC_wow = {
  VO: {
    // FO라고도 함
    arguments: [{ word: 'hello' }], // λ³€μˆ˜λ‘œ 보내진것을 인자둜 λ°›μŒ
    variable: null, // ν•΄λ‹Ή μŠ€μ½”ν”„ λ‚΄μ—μ„œ, κ°–κ³ μžˆλŠ” λ³€μˆ˜ μ—†μŒ.
  },
  scopeChain: ['wow λ³€μˆ˜κ°μ²΄', 'μ „μ—­ λ³€μˆ˜κ°μ²΄'],
}
  • sayλ³€μˆ˜κ°μ²΄λŠ” closure둜 μ‘΄μž¬ν•˜μ§€μ•ŠλŠ”λ‹€. μ™œλƒ? 처음 ν•¨μˆ˜κ°€ 선언될 λ•Œ, 전역에 μ„ μ–Έλ˜μ—ˆκΈ° λ•Œλ¬Έ.(μœ„μ—μ„œ λ§ν–ˆμ§€λ§Œ, μŠ€μ½”ν”„(μ˜μ—­)은 호좜이 μ•„λ‹Œ 선언됬을 λ•Œ ν˜•μ„±λ¨)

κ²°κ³Ό = hello zero;

helloλŠ” argumentsμ—μ„œ μ°Ύκ³ , name의 값은, variable에 μ—†κΈ°λ•Œλ¬Έμ—, scopeChain을 λ”°λΌμ˜¬λΌκ°€ μ „μ—­λ³€μˆ˜κ°μ²΄μ—μ„œ μ°ΎλŠ”λ‹€.

πŸ€” κ²°λ‘ 

이번 μ‹€ν–‰μ»¨ν…μŠ€νŠΈλ₯Ό κ³΅λΆ€ν•˜λ©΄μ„œ closure, scopeλΌλŠ” μš©μ–΄λ₯Ό μžμ£Όλ³΄κ²Œλ˜μ—ˆλ‹€. 이것도 ν•œλ²ˆ 닀뀄봐야겠닀.

@SangMin
πŸ‘† H'e'story

πŸš€GitHub