scope

ES5까지는 global scope와 function scope만 사용되었다.  scope란 변수의 사용범위이다. 변수를 선언하면 어떤 범위에서 사용할 수 있는가에 대한 규칙이다. global scope 부분에서 선언한 것이라면 해당 파일 어디에서든 사용할 수 있다. function scope부분에서 선언한 것이라면 해당 function 안에서는 어디서든 사용할 수 있다.

 

아래의 코드에서 b는 코드 어디에서든 사용 가능하다. 여기서 어디에서든 이라는 것은 작업하는 js파일 어느 줄에서든 사용가능하다는 뜻이다. c는 fun 함수 안이라면 어디서든 사용 가능하다. fun(){ ~~ } 에서 ~~ 부분 어디든 가능하다. 

var b = 1;

function fun(){

  var c = 2;

  ...end

}

...end

 

 

c언어를 접했다면 c언어에는 block scope가 있는데 javascript는 다른 것인가 의문이 들 수 있다. 아래의 코드를 보고 console 결과를 살펴보자.

var b = 1; 

console.log(b); // 1 

function fun() {

  var b = 5;

  console.log(b); // 5

  if (true) {

    var b = 10;

    console.log(b); //10

  }

  console.log(b); //10

}

fun();

console.log(b); // 1

 

위 코드를 보면 var b가 세 번 나온다. 블락 scope인 세 번째 var b= 10;에 의해 새로운 변수가 만들어 지지 않았다. 왜냐하면 if 블락이 끝나고 b의 값이 5가 아니라 10이다. 즉, fun() 다음줄에서 선언된 두 번째 var b=5 ;에 의해 만들어진 b의 값을 세 번째 var b= 10;을 코드를 실행할 때 사용함을 알 수 있다. ES5에서는 블락을 별도의 scope로 사용하지 않는다.  c언어에서 사용하는 scope와 다른 것을 알 수 있다. 

 

ES6에서 const, let을 도입하면서 block scope가 지원된다. 즉, 위의 예제에서 var대신 let을 사용하면 다음과 같은 결과가 된다. var을 사용한 것과 다른 출력결과가 하나인 것을 알 수 있다.

let b = 1;

console.log(b); // 1

function fun() {

  let b = 5; 

  console.log(b); // 5

  if (true) {

    let b = 10;

    console.log(b); // 10

  }

  console.log(b); // 5

}

fun();

console.log(b); // 1

 

 

블락 스코프는 if () { } , switch () {} , { } 와 같은 블락에서 선언된 변수들은 블락이 끝나면 더 이상 사용할 수 없음을 의미한다. 

function myFun(){

  let b = 5;

  {

    let b = 10;

    console.log(b);

  }

  console.log(b);

}

 

myFun을 호출했을 때 위의 출력 결과는 무엇이 될까?

10, 5가 순서대로 출력된다.

 

{ } 안에서 선언된 b는 새로운 변수인가 아니면 이미 선언된 변수인가?

새로운 변수로서 메모리에 새로 잡힌다.

 

블락 안에서 선언된 b는 어느 범위까지 사용 가능한가? 

선언되고 나서 블락이 끝나는 지점까지 사용 가능하다. let b= 10; 다음 줄 부터 해당 블락의 '}' 전 줄까지 사용 가능하다.