Scope

Scope

Javascript 의 μŠ€μ½”ν”„λŠ” λ³€μˆ˜ (객체) κ°€ μ°Έμ‘°κ°€λŠ₯ν•œ μœ νš¨λ²”μœ„ λ₯Ό λœ»ν•˜λ©° λŒ€ν‘œμ μœΌλ‘œ μ•„λž˜ λ‘κ°œλ‘œ κ΅¬λΆ„λœλ‹€.

  • λ ‰μ‹œμ»¬ μŠ€μ½”ν”„ (Lexical Scope)
  • 동적 μŠ€μ½”ν”„ (Dynamic Scope)

기본적으둜 Javascript λŠ” λ ‰μ‹œμ»¬ μŠ€μ½”ν”„ (Lexical Scope) λ₯Ό λ”°λ₯Έλ‹€.

λ ‰μ‹œμ»¬ μŠ€μ½”ν”„ (Lexical Scope)

μŠ€μ½”ν”„λŠ” ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•  λ•Œκ°€ μ•„λ‹ˆλΌ μ„ μ–Έν•  λ•Œ 생성 λœλ‹€.
이것은 λ ‰μ‹œμ»¬ μŠ€μ½”ν”„μ˜ νŠΉμ§•μ΄λ©° 동적 μŠ€μ½”ν”„μ™€ λΉ„κ΅λœλ‹€.

μ•„λž˜ μ˜ˆμ‹œμ—μ„œλŠ” μ„ μ–Έν•  λ•Œ μƒμ„±λ˜λŠ” 것을 확인할 수 μžˆλ‹€.

var color = 'red';

function foo() {
  var color = 'blue';
  function bar() {
    console.log(color);
  }
  return bar;
}

var baz = foo();
baz();
blue
  • ES5λŠ” ν•¨μˆ˜λ ˆλ²¨μ˜ λ ‰μ‹œμ»¬ μŠ€μ½”ν”„λ₯Ό 가진닀.
  • ES6λŠ” ν•¨μˆ˜λ ˆλ²¨κ³Ό λΈ”λ‘λ ˆλ²¨μ˜ λ ‰μ‹œμ»¬ μŠ€μ½”ν”„λ₯Ό 가진닀.

동적 μŠ€μ½”ν”„ (Dynamic Scope)

ν•¨μˆ˜κ°€ μ–΄λ””μ„œ ν˜ΈμΆœλ˜μ—ˆλŠ”μ§€μ— 따라 μƒμœ„ μŠ€μ½”ν”„κ°€ κ²°μ •

function foo() {
  console.log(x);
}

function bar() {
  var x = 15;
  foo();
}

var x = 10;
foo();
bar();

λ ‰μ‹œμ»¬ μŠ€μ½”ν”„ κ°€μ •μ‹œ

10
10

동적 μŠ€μ½”ν”„ κ°€μ •μ‹œ

10
15

Closer

μ™ΈλΆ€ν•¨μˆ˜μ˜ λ³€μˆ˜μ— μ ‘κ·Όν•  수 μžˆλŠ” λ‚΄λΆ€ν•¨μˆ˜λ₯Ό λ§ν•œλ‹€.

일반적으둜 μŠ€μ½”ν”„ 체인에 ν‘œν˜„λ˜λŠ”λ° λŒ€ν‘œμ μœΌλ‘œ 3κ°€μ§€μ˜ μŠ€μ½”ν”„ 체인을 가진닀.

  • 자기 μžμ‹ μ— λŒ€ν•œ μ ‘κ·Ό (자기 λΈ”λŸ­)
  • μ™ΈλΆ€ ν•¨μˆ˜ (λΆ€λͺ¨ 및 μƒμœ„ ν•¨μˆ˜) 에 λŒ€ν•œ μ ‘κ·Ό
  • μ „μ—­ λ³€μˆ˜μ— λŒ€ν•œ μ ‘κ·Ό
function celebrityID() {
    var celebrityID = 999;
    // μš°λ¦¬λŠ” λͺ‡κ°œμ˜ λ‚΄λΆ€ ν•¨μˆ˜λ₯Ό 가진 객체λ₯Ό λ¦¬ν„΄ν• κ²ƒμž…λ‹ˆλ‹€.
    // λͺ¨λ“  λ‚΄λΆ€ν•¨μˆ˜λŠ” μ™ΈλΆ€λ³€μˆ˜μ— μ ‘κ·Όν•  수 μžˆμŠ΅λ‹ˆλ‹€.
    return {
        getID: function() {
            // 이 λ‚΄λΆ€ν•¨μˆ˜λŠ” κ°±μ‹ λœ celebrityIDλ³€μˆ˜λ₯Ό λ¦¬ν„΄ν•©λ‹ˆλ‹€.
            // 이것은 changeThdIDν•¨μˆ˜κ°€ 값을 λ³€κ²½ν•œ 이후에도 celebrityID의 ν˜„μž¬κ°’μ„ λ¦¬ν„΄ν•©λ‹ˆλ‹€.
            return celebrityID;
        },
        setID: function(theNewID) {
            // 이 λ‚΄λΆ€ν•¨μˆ˜λŠ” μ™ΈλΆ€ν•¨μˆ˜μ˜ 값을 μ–Έμ œλ“ μ§€ λ³€κ²½ν•  κ²ƒμž…λ‹ˆλ‹€.
            celebrityID = theNewID;
        }
    }
}
var mjID = celebrityID(); // 이 μ‹œμ μ—, celebrityIDμ™ΈλΆ€ ν•¨μˆ˜κ°€ λ¦¬ν„΄λ©λ‹ˆλ‹€.
mjID.getID(); // 999
mjID.setID(567); // μ™ΈλΆ€ν•¨μˆ˜μ˜ λ³€μˆ˜λ₯Ό λ³€κ²½ν•©λ‹ˆλ‹€.
mjID.getID(); // 567; λ³€κ²½λœ celebrityIDλ³€μˆ˜λ₯Ό λ¦¬ν„΄ν•©λ‹ˆλ‹€.

μˆœν™˜μ°Έμ‘°

μ΄λŠ” 잘λͺ»λœ ν΄λ‘œμ € μ‚¬μš©μ‹œ μ„œλ‘œκ°€ μ„œλ‘œλ₯Ό μ°Έμ‘°ν•˜λŠ” μˆœν™˜ μ°Έμ‘° ν˜„μƒμ΄ λ°œμƒ 될 수 μžˆλ‹€.

μˆœν™˜μ°Έμ‘°κ°€ λ°œμƒλ˜λ©΄ GC (Gabege Collection) λŒ€μƒμ—μ„œ λ²—μ–΄λ‚˜κΈ° λ•Œλ¬Έμ— λ©”λͺ¨λ¦¬ λˆ„μˆ˜μ˜ μ›μΈμœΌλ‘œ μž”μ—¬ν•˜κ²Œ λœλ‹€.