[JavaScript] 자바스크립트 스코프(Scope) 알아보기!

스코프(Scope)

스코프란? 번역하면 "범위" 를 뜻하며, 참조 대상 식별자(변수, 함수의 이름과 같이 어떤 대상을 다른 대상과 구분하여 식별할 수 있는 유일한 이름)를 찾아내기 위한 규칙입니다. 자바스크립트는 이 규칙대로 식별자를 찾습니다.
예를 들어 이름이 같은 2개의 변수 중 어느 것을 참조해야 하는지, 어떻게 식별해야 할지를 정할 때 필요한 것으로,
정리하자면 "식별자에 접근할 수 있는 범위" 를 정의한 것을 스코프라고 합니다.

스코프의 구분

자바스크립트의 스코프를 구분해보면 2가지로 구분할 수 있습니다.

1. 전역 스코프 (Global Scope)
2. 지역 스코프 (Local scope)

전역 스코프는 전체 범위, 코드 어디에서든 참조가 가능한 스코프를 말합니다.
그리고 지역 스코프는 해당 지역에서만 접근할 수 있어 지역을 벗어난 곳에선 접근할 수 없는 의미를 말합니다.
자바스크립트에서는 함수를 선언하게 되면 새로운 스코프를 생성하여 함수 안에서 선언한 변수들은 함수 밖에서 접근할 수가 없게 되는데,
이것이 바로 함수 스코프입니다. 함수 스코프가 바로 지역 스코프의 예라고 할 수 있습니다.

var a = 1; // 전역 스코프
function print() { // 지역(함수) 스코프
 var a = "Hi!";
 console.log(a); // output: Hi!
}
print();
console.log(a); // output: 1

그리고 모든 변수는 스코프를 가지게 됩니다.
따라서 변수의 관점에서 스코프를 구분하면 다음과 같이 2가지로 나눌 수 있습니다.

1. 전역 변수
2. 지역 변수

변수 선언 위치에 따라서 스코프를 가지게 되는데, 전역에서 선언된 변수의 경우에는 전역 스코프를 가진 전역 변수가 되는 것이며,
지역에서 선언이 되면 지역 스코프를 갖는 지역 변수가 되는 것입니다.

var a = 1; // 전역 스코프, 전역 변수
function print() { // 지역(함수) 스코프
 var a = "Hi!"; // 지역 변수
 console.log(a); // output: Hi!
}
print();
console.log(a); // output: 1

자바스크립트 스코프의 특징

자바스크립트의 스코프는 타 언어와는 다른 특징을 갖게 됩니다.
대부분의 C 기반 언어들은 블록 레벨 스코프(block-level scope) 를 따릅니다.
하지만 자바스크립트는 함수 레벨 스코프(Function-level scope) 를 따릅니다.
주의할 점은 화살표 함수는 함수 스코프가 아니라 블록 스코프를 따릅니다.

※ 여기서 블록이란?
블록은 하나 이상의 구문을 그룹화할 때 사용이 되며, 중괄호 {} 세트 안에 있는 코드를 말합니다.

함수 레벨 스코프(Function-level scope)

함수 레벨 스코프는 함수의 코드 블록만을 스코프로 범위 합니다.
따라서 함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 접근할 수 없습니다.
또한 함수 내부에서 선언한 변수는 지역 변수가 되며 함수 외부에서 선언한 변수는 모두 전역 변수입니다.
그리하여 전역 변수를 남발할 가능성을 높이므로 주의해야 합니다.
var 키워드로 선언한 변수들은 오로지 함수 스코프 만을 따릅니다.

var a = 1; // 전역 변수
function print() { // 지역(함수) 스코프
 var a = "Hi!"; // 지역 변수
 console.log(a); // output: Hi!
}
print();
console.log(a); // output: 1

블록 레벨 스코프(block-level scope)

블록 레벨 스코프는 모든 코드 블록(함수, if 문, for 문, while 문, try/catch 문 등) 내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없습니다.
코드 블록 내부에서 선언한 변수는 지역 변수입니다.
기존의 자바스크립트에서는 함수 스코프만을 따랐지만,
ES6부터 let과 const 키워드가 추가되면서 블록 스코프를 따를 수 있게 되었습니다.

var a = 123; // 전역 변수
console.log(a); // 123

{
  var a = 456; // 전역 변수
}

console.log(a); // 456

let a = 123; // 전역 변수

{
  let a = 456; // 지역 변수
  let b = 456; // 지역 변수
}

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