함수의 범위 (scope)

 

scope

스코프는 범위입니다.

어떤 범위일까요? 선언된 변수의 범위라고 할 수 있습니다.

let x = 'Hello';

function says() {
  let x = 'bye';
}

says(); // says함수를 실행하여 새로운 변수 x를 선언
console.log(x);  // 그러나 변수 x는 'Hello'

 

위의 코드에서 두 개의 변수 x 는 다릅니다. 처음 선언된 x 는 전역 변수이고, says 함수에서 선언된 x 는 지역변수입니다.

전역 변수는 window 객체의 속성이 되는 변수이고, 전역 변수는 함수 안에 있는 변수를 의미합니다. 전역 변수는 함수 안에 들어있기 때문에 전역 변수에 영향을 끼칠 수 없습니다. 함수의 scope 때문입니다. 

 

그렇다면 함수 안에서 전역변수를 바꾸고 싶다면 어떻게 해야 할까요?

 

let x = 'Hello';

function says() {
  x = 'bye';	// let 선언을 하지 않음
}

says(); // says함수를 실행하여 새로운 변수 x를 선언
console.log(x);  // 그러나 변수 x는 'Hello'

 

함수 범위에서 let을 선언하지 않음으로 전역 범위에서 변수 x 를 찾게 됩니다. 

이렇게 지역변수는 외부변수에 접근할 수 있지만, 이에 반하여 외부변수는 지역변수에 접근할 수 없습니다.

 

let says = 'great!';

function outer() {
  console.log('외부', says);
  function inner() {
    console.log('내부', says);
    let think = 'terrible';
  }
  inner()  // 내부 great!
}
outer()	   // 외부 great!

console.log(think);  // Uncaught ReferenceError!

 

inner 함수에 없는 says 변수를 outer 함수에서 찾아보고 없다면, 전역 스코프에서 says 변수를 찾게 됩니다. 이렇게 범위를 넓히면서 찾는 것을 스코프 체인이라고 합니다. 만약에 변수를 찾지 못했다면 think 변수를 호출한 결과처럼 에러가 발생합니다. 

 

 

 

스코프는 함수를 선언할때 생깁니다. 함수를 선언하는 순간

함수 내부의 변수는 자신의 범위로 부터 가장 가까운 범위의 변수를 참조합니다.

이런 스코프의 성격을 정적 스코프 (lexical scope)라고 합니다. 

Lexical(static) scope

let x = 'Hello';

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

function trans() {
  let x = '안녕하세요';
  says();
}

says();	 // Hello
trans(); // Hello

 

trans 함수가 새로운인 변수 x 를 선언한 후에 says 함수를 호출해도 trans 함수의 변수를 참조하지 않습니다. 왜냐하면 says 함수에서 가장 가까운 스코프는 전역변수이기 때문입니다. 그래서 아무리 trans 함수를 호출해도 결과는 'Hello' 가 찍히게 됩니다.