자바 스크립트 기초(2) - 스코프(Scope)란? : 변수의 참조 범위

scope

범위

---

스코프(Scope)와 범위

스코프(Scope)는 프로그래밍에서 변수나 상수의 유효 범위를 의미한다. 즉, 변수나 상수가 어디까지 사용될 수 있는지를 나타내는 개념이다.

 

스코프는 크게 3가지로 나뉜다.

1. 전역 스코프 (Global Scope)
2. 함수 스코프 (Function Scope)
3. 블록 스코프 (Block Scope)

집으로 비유하자면 전역 스코프는 집 전체, 함수 스코프는 방, 블록 스코프는 서랍이라고 할 수 있다.

또한 이런식으로 범위를 기준으로 해서 2가지로 구분할 수도 있다.

1. 전역 범위(전역 스코프, Global Scope) : 프로그램 전체에서 접근할 수 있는 범위
2. 지역 범위 : 특정 함수나 코드 블록 내부에서만 접근할 수 있는 범위
   1. 함수 스코프
   2. 블록 스코프

---

간단하게 표로 정리하면 다음과 같다.

스코프	선언 키워드	접근 범위	특징
전역 스코프	var, let, const	코드 어디에서든 접근 가능	전역 변수 남용 시 코드 가독성 저하 및 오류 발생 가능
함수 스코프	var	선언된 함수 내에서만 접근 가능	변수 충돌 방지 및 코드 안정성 향상
블록 스코프	let, const	선언된 코드 블록 내에서만 접근 가능	변수 충돌 방지 및 코드 안정성 향상

전역 범위(Global Scope)와 전역 변수(Global Variable)

 

Global이라는 단어가 전세계, 전체를 의미하는 것처럼 전체적인, 전반적인 영역을 의미한다.

전역 범위라고도 하는데 마찬가지로 전역 범위 내에서 선언되는 변수를 전역 변수라고 한다.

 

전역 범위는 블록의 최상위에 위치해 있어서 별도로 영역이 지정된 것이 아니기 때문에 프로그램 전체가 영역이라고 할 수 있다. 전역 범위에서 선언되는 전역 변수 또한 프로그램의 어느 곳에서든 접근할 수 있다.

 

때문에 var, let, const 중 어떤 변수라도 전역 변수로 선언될 수 있다.

 

지역 범위(local Scope)와 지역 변수(local variable)

local이라는 단어가 지역을 의미하는 것처럼 특정 영역을 의미한다.

지역 범위라고도 하는데 마찬가지로 지역 범위 내에서 선언되는 변수를 지역 변수라고 한다.

즉, 특정 지역(local scope)에서만 작동하는 변수라고 할 수 있는데 그렇기 때문에 함수 스코프, 블록 스코프 내에서 선언되는 변수 또한 모두 지역 변수이다.

 

앞서 var, let, const이 전역 변수로 선언될 수 있다고 했는데 해당 변수들이 특정 영역에서만 선언되면 그것을 지역 변수라하고 특정 영역이 아닌 전체를 대상으로 선언되면 전역 변수라고 하는 것이다.

 

다만 지역 변수의 경우 특정 조건을 따른다.

1. 함수 스코프와 var : var는 블록 스코프가 없다.

var는 조금 특이하게 적용되는데 지역 변수로 선언될 경우 기본적으로는 함수 내에서 선언이 되는데 만약에 함수 스코프가 아닌 블록 스코프에서 선언될 경우 해당 블록을 무시하고 함수 스코프 또는 전역 스코프를 가진다.

function myFunction() {
  if (true) {
    var blockVar = 10; // 블록 스코프 내 var 선언
  }
  console.log(blockVar); // 접근 가능 (함수 스코프)
}

myFunction();

if (true) {
  var globalVar = 20; // 블록 스코프 내 var 선언 (전역)
}

console.log(globalVar); // 접근 가능 (전역 스코프)

 

 

간단하게 말하면 아래와 같다.

1. 함수 영역에서 선언 → 지역 변수로서 함수 내부에서만 작동
2. 함수 내부에 있는 블록 영역에서 선언 → 함수 내부에서 작동, 함수 영역 안의 블록 내에서도 작동
3. 블록 영역에서 선언 → 전역 변수로서 작동

때문에 var는 블록 스코프에서만 작동하게 할 수 없기때문에 블록 스코프에서 작동하게 하려면 let이나 const를 사용해야한다.

2. 블록 스코프와 let, const

let과 const는 지역 변수로 선언될 경우 블록 스코프 내에서만 작동한다. 즉 코드 블록을 기준으로 작동한다.

때문에 별도로 코드 블록( {} ) 내부에서 선언됐을 경우 해당 블록 내에서만 작동하지만 함수 스코프 내부에서 작동하지 않는 것은 아니고 함수 스코프 또한 블록으로 둘러 쌓여 있기 때문에 해당 블록 내부에서 작동하게 된다.

function myFunction() {
  let funcLet = 10; // 함수 스코프 let 변수
  const funcConst = 20; // 함수 스코프 const 변수

  if (true) {
    let blockLet = 30; // 블록 스코프 let 변수
    const blockConst = 40; // 블록 스코프 const 변수
    console.log(funcLet, funcConst, blockLet, blockConst); // 접근 가능
  }

  console.log(funcLet, funcConst); // 접근 가능
  console.log(blockLet, blockConst); // 오류 발생: blockLet, blockConst is not defined
}

myFunction();

  console.log(funcLet, funcConst); // 오류 발생: funcLet, funcConst is not defined

 

즉 함수 function myFunction 내부에 선언된 let funcLet = 10과 const funcConst = 20는 myFunction 함수 내에서 변수로 작동하고 함수 안쪽에 있는 블록 내부에서도 동일하게 작동한다.
하지만 if (true) 내부에 선언된 let blockLet = 30;과 const blockConst = 40;는 해당 블록 내부에서만 작동하기 때문에
if 내부에 있는 console.log(funcLet, funcConst, blockLet, blockConst)은 작동한다.
하지만 myFunction 내부에서 console.log(blockLet, blockConst);를 불러오려고 하면 오류가 난다. 함수 내부에서는 해당 변수가 선언된 적이 없기 때문이다.

함수 내부에서 console.log(funcLet, funcConst); 은 오류가 나지 않는데 함수 스코프 내에서 선언된 변수이기 때문이다.

하지만 아예 함수 바깥 쪽에서는 console.log(funcLet, funcConst); 가 오류가 나는데 해당 변수들은 함수 스코프 내에서만 유효하기 때문이다.

 

결과적으로는 이런 값이 뜬다.

1. 함수 내부에 선언된 funcLet, funcConst, blockLet, blockConst의 값은 각각 불러와진다.
2. 함수 내부에 선언된 funcLet, funcConst은 불러와 지지만
3. 함수 안의 블록 스코프에서 선언된 blockLet, blockConst은 불러와지지 않는다.
4. 함수 외부에서 funcLet, funcConst을 불러와도 함수 내부에만 작동하기 때문에 불러와지지 않는다.

물론 3에서 이미 오류가 나서 이후 코드도 전부 오류가 나긴하지만 3을 지워도 4는 오류가 난다.