[Javascript] Scope

 

 

 

이번에는 자바스크립트의 Scope에 대해 알아보려 한다. Scope는 변수 또는 함수를 선언할 때 해당 변수/함수의 유효 범위를 의미한다. Scope에는 총 3가지 종류가 있다.

 

1. Global (전역) Scope: 코드의 모든 범위에서 사용 가능.
2. Function(함수) Scope: 함수 안에서만 사용 가능.
3. Block(블록) Scope: if, for, switch 등 특정 블록 내부에서만 사용 가능.

 

 

 

이제 한 번 아래의 예시를 통해 Scope를 이해해 보자.

const value = 'hello!';

function myFunction() {
  console.log('this is myFunction. value: ', value); // 1. hello!
}

function otherFunction() {
  const value = 'bye!';
  console.log('this is otherFunction. value: ', value); // 2. bye!
}

myFunction();
otherFunction();

console.log('this is global scope. value: ', value); // 3. hello!

 

코드의 맨 윗줄에서 선언된 value 값은 Global Scope로 선언된 값이다. Global Sope로 선언된 값은 어디서나 사용 가능하다. 따라서 myFunction에서도 바로 사용할 수 있엇던 것.

 

otherFunction에서는 함수 내부에서 value 값을 'bye!'로 새로 선언해 주었다. 이렇게 되면 value라는 값은 Function Scope로 지정되어서 otherFunction 내부에서만 유효한 값이 된다. 하지만 이렇게 값을 설정한다고 해서 기존에 Global Scope로 선언된 value의 값이 바뀌지는 않는다.

 

 

또 다른 예시를 보자.

const value = 'hello!';

function myFunction() {
  const value = 'bye!';
  const anotherValue = 'world';
  function functionInside() {
    console.log('this is functionInside() value: ', value); // 1. bye!
    console.log('this is functionInside() value: ', anotherValue); // 2. world
  }
  functionInside();
}

myFunction()
console.log('this is global scope. vlaue: ', value); // 3. hello!
console.log('this is global scope. anotherValue: ', anotherValue); // 4. Uncaught ReferenceError: anotherValue is not defined

 

위 예에서는 myFunction() 내부에 anotherValue라는 새로운 값을 선언했고 functionInside()라는 함수도 선언을 했다.  1~2에서와 같이 functionInside()에서는 myFunction에서 선언한 value와 anotherValue를 조회할 수 있다.

 

반면 myFunction 밖에서는 anotherValue를 조회할 수 없어 4와 같이 오류가 발생한다.

 

 

const value = 'hello!';

function myFunction(){
	const value = 'bye!';
    if (true) {
    	const value = 'world';
        console.log('this is block scope. value: ', value); // world
    }
    console.log('this is function scope. value: ', value); // bye!
}

myFunction();
console.log('this is global scope. value:', value); // hello!

 

let이나 const로 선언한 값은 Block Scope로 선언이 된다. 따라서 if문 같은 블록 내에서 새로운 변수/상수를 선언한다면 해당 블록 내부에서만 사용이 가능하며, 블록 밖의 범위에서 똑같은 이름을 가진 값이 있다고 해도 영향을 주지 않는다.

 

하지만 var 키워드는 어떨까?

var value = 'hello!'; // (1)

function myFunction(){
	var value = 'bye!'; // (2)
    if (true) {
    	var value = 'world'; // (3)
        console.log('this is block scope. value: ', value); // world
    }
    console.log('this is function scope. value: ', value); // world
}

myFunction();
console.log('this is global scope. value:', value); // hello!

 

var는 Function Scope로 선언되므로 if문 블록 내부에서 선언한 value 값(3)이 블록 밖의 value(2)에도 영향을 미치게 된다.