Scope (스코프)

해당 글은 모든 자바스크립트 개발자가 알아야 하는 33가지 개념에서 여섯 번째인 Function Scope, Block Scope and Lexical Scope 항목을 공부하면서 간단하게 작성한 글이다.

 

Scope(스코프)란 변수에 접근할 수 있는 범위를 얘기한다. 크게 Global Scope과 Local Scope가 있다. 

Global and Local Scope

Global Scope는 전역 스코프로 변수를 코드 어디에서든 접근을 할 수 있다는 뜻이고 Local Scope는 지역 스코프로 해당 지역에서만 변수를 접근할 수 있다는 뜻이다.

let a = 10;

function func(){
	let b = 20;
	console.log(b); // 20
}

console.log(a); // 10
console.log(b); // ReferenceError: b is not defined;

위 코드에서 a는 Global 범위에 변수가 선언되었고 b는 function이라는 지역에 변수가 선언되었다. 그리고 각 변수를 Global 범위에서 호출했을 때 a는 정상적으로 출력되지만 b는 에러가 발생한다.

Function Scope

Function Scope (함수 스코프)는 지역 스코프의 한 예로 함수 내에 선언된 변수들은 함수 내에서만 접근이 가능하다. ES6 이전에는 var를 이용해서 변수를 선언했는데 var가 함수 스코프이기 때문에, 함수 외부에서 선언된 변수들이 모두 전역 변수가 된다.

for(var i = 0; i < 5; i++){
}
console.log(i); // 6

위 코드와 같이 for loop에 i 변수를 var를 이용해서 선언했기 때문에 i가 loop가 끝나도 접근이 가능하다. 

Block Scope

ES6 부터 변수를 선언하기 위해 let과 const라는 키워드가 새로 생겼는데 var와는 다르게 Block Scope이다. 다른 말로 let과 const로 생성된 변수들은 선언된 Block 내에서만 접근이 가능하다. 참고로 Block이란 중괄호로 둘러싸인 부분을 말한다. (if, switch, for, while 등등이 있다.)

if(1 === 1){
  let a = 10;
  console.log(a); // 10;
}
console.log(a); // ReferenceError: a is not defined;

Lexical Scope

Lexical Scope란 자식 또는 하위 스코프가 부모 또는 상위 스코프에 있는 변수에 접근이 가능한 것을 의미한다. 부모 또는 상위 스코프는 함수 또는 블록이 선언되어진 스코프를 얘기한다. 예제를 보면 이해가 쉽다.

let str = "hello";

function foo1(){
  let str = "world";
  console.log(str);
  foo2();
}

function foo2(){
  console.log(str); 
}

foo1();
/*
world
hello
가 출력 -> foo2 함수의 상위스코프는 전역이기 때문에 foo2에서 전역 변수 str에 접근이 가능하다.
*/

위 코드와 같이 foo2 함수는 foo1 함수 내에서 호출이 되었지만 전역 스코프 내에서 함수가 선언되었기 때문에 전역 스코프에 있는 str에 접근이 가능하다.

 

그러나 만약 foo2 함수가 foo1 함수 내에서 선언이 되었다면 foo1 함수에서 선언된 str에 접근이 가능하다.

let str = "hello";

function foo1(){
  let str = "world";
  console.log(str);

  function foo2(){
    console.log(str); 
  }
  
  foo2();
}

foo1();
/*
world
world
가 출력 -> foo2 함수의 상위스코프는 foo1이기 때문에 foo2에서 foo1 str에 접근이 가능하다.
*/

반대로 상위 스코프에서 하위 스코프의 변수에 접근은 불가능하다.

let str = "hello";

function foo1(){
  let str = "world";
  console.log(str);

  function foo2(){
    let temp = "javascript";
    console.log(str); 
  }
  
  foo2();
  console.log(temp); //ReferenceError: temp is not defined;
}

foo1();