본문으로 건너뛰기

Scope

서동명
2분 분량

개요​

C, C++, Java, JavaScript 와 같이 대부분의 프로그램 언어들은 Lexical Scope ( 또는 Static Scope ) 를 사용하고 있다. Lexical Scope 의 반대 방식은 Dynamic Scope 가 있으며 Perl, Bash Shell 등이 사용한다.

시작하기 전에​

아래의 코드를 실행하면 결과가 어떻게 출력될 지 생각해보자.

var age = 10;

function echo() {
	console.log(age);
}

function wrap() {
	var age = 30;
	console.log(age);
	echo();
}

wrap();

Lexical Scope​

정보

Lexical Scope: use environment where function is defined.
Dynamic Scope: use environment where function is called.

Lexical Scope는 변수나 함수가 정의된 곳에 따라 상위 스코프를 결정한다.

이 말을 조금 더 쉽게 풀어서 설명하면, 함수가 처음 선언된 순간 함수 내부의 변수는 스코프를 기준으로 가장 가까운 곳에 있는 변수를 참조하게 된다.

위의 코드를 예로 들어서 설명하면 echo 함수 안에 age 변수는 선언 시 가장 가까운 곳에 있는 전역 변수 age를 참조한다.

wrap 함수 안에서 age 변수를 선언해도 echo 함수는 전역 변수인 age를 바라보고 있기 때문에 전역 변수 값인 10 이 출력된다.

위의 코드의 결과는 아래와 같다.

30
10

Function Scope​

함수 내부에서 선언한 변수는 함수 내에서 계속 유효하며, 함수 외부에서는 참조할 수 없다.

function echo() {
	var age = 10;
	console.log(age);

	if (true) {
		var age = 20;
		console.log(age);
	}

	console.log(age);
}

echo();
console.log(age); // ReferenceError: age is not defined
// 결과 값
10
20
20

Block Scope​

코드 블록 ( {} ) 내에0서 선언된 변수는 해당 블록에서만 유효하며, 외부 블록에서 참조할 수 없다.

function echo() {
	let age = 10;
	console.log(age);

	if (true) {
		let age = 20;
		console.log(age);
	}

	console.log(age);
}
echo();
// 결과 값
10
20
10

var vs let​

ES6 에서 let, const keyword 가 추가되었다. var , let 은 변수를 선언하는 keyword 이지만, 많은 부분에서 차이가 발생한다.

  • var

    • Function Scope
    • Hositing
    • 중복 선언 가능
    function echo() {
      var age = 10;
      console.log(age);
      var age = 20;
      console.log(age);
    }

    echo();

  • let

    • Blcok Scope

    • No Hoisting

    • 중복 선언 불가능

      function echo() {
        let age = 10;
        console.log(age);
        let age = 20; // SyntaxError: Identifier 'age' has already been declared
        console.log(age);
      }

      echo();

참고​