스코프

스코프란?

자바스크립트에서 스코프란 어떤 변수들에 접근할 수 있는지를 정의합니다.
스코프엔 두 가지 종류가 있습니다. 전역 스코프와 지역 스코프로 나뉩니다.

그럼 먼저 전역 스코프에 대해서 알아봅시다.

전역 스코프

전역 스코프는 변수가 함수 바깥이나 {}바깥에서 선언되었다면, 전역 스코프에 정의 됩니다.

const globalVariable = 'variable'

위와같이 전역 변수를 선언한다면 코드 모든곳에서 globalVariable이라는 변수를 사용할 수 있습니다.

심지어 함수에서도 사용이 가능하죠
아래 예제를 보시죠

const hello = 'Hello Marcus'
function marcusHello () {
  console.log(hello)
}
console.log(hello) // 'Hello Marcus!'
sayHello() // 'Hello Marcus!'

함수안에서도 전역으로 선언된 변수를 사용할 수 있습니다. 우선 변수가 더 상위의 스코프에 있기 때문입니다.

블록 스코프

블록 스코프란 블록 안에서만 사용 가능한 스코프입니다.
아래의 예제를 보겠습니다.

{
  const hello = 'Hello Marcus!'
  console.log(hello) // 'Hello Marcus!'
}
console.log(hello) // Error, hello is not defined

hello 라는 변수는 블록 안에서 선언되었기 때문에 바깥쪽에서 사용할 수 없습니다.

클로저

클로저란?

클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. 클로저를 이해하려면 자바스크립트가 어떻게 변수의 유효범위를 지정하는지(Lexical scoping)를 먼저 이해해야 한다.

function init() {
  var name = "Mozilla"; // name은 init에 의해 생성된 지역 변수이다.
  function displayName() { // displayName() 은 내부 함수이며, 클로저다.
    alert(name); // 부모 함수에서 선언된 변수를 사용한다.
  }
  displayName();
}
init();

init()은 지역 변수 name과 함수 displayName()을 생성한다. displayName()은 init() 안에 정의된 내부 함수이며 init() 함수 본문에서만 사용할 수 있다. 여기서 주의할 점은 displayName() 내부엔 자신만의 지역 변수가 없다는 점이다. 그런데 함수 내부에서 외부 함수의 변수에 접근할 수 있기 때문에 displayName() 역시 부모 함수 init()에서 선언된 변수 name에 접근할 수 있다. 만약 displayName()가 자신만의 name변수를 가지고 있었다면, name대신 this.name을 사용했을 것이다.