[JavaScript] 함수 스코프 vs. 블록 스코프

1. 스코프(Scope)

스코프란 현재 실행되는 컨텍스트(context)를 의미한다. 여기서 컨텍스트는 값과 표현식이 표현되거나 참조될 수 있음을 의미한다. 만약 변수 또는 표현식이 해당 스코프 내에 있지 않다면 사용할 수 없다.

접근할 수 있는 범위

2. 함수 스코프(function scope)

자바스크립트는 기본적으로 함수 스코프를 따른다.

새로운 함수를 생성할 때 만들어진 스코프

함수 내부에서 선언한 변수는 외부 함수나 다른 함수 내에서는 접근할 수 없다.

function exampleFunction() {
	var x = "함수 내부에서 선언한 변수";
    // x는 오직 exampleFunction 내부에서만 사용 가능.
    console.log(x);
}

console.log(x); // 에러 발생
exampleFunction(); // 실행 결과: 함수 내부에서 선안한 변수

변수 x는 함수 내부에서 선언하였으므로, 함수 내부에서는 접근할 수 있지만, 함수 외부에서는 접근이 불가능하다.

그러나, 함수가 아닌 문에서 선언한다면, 어디에서도 접근이 가능하다.

if (true) {
	var y = "문에서 선언한 변수";
    // y는 어디서든 사용 가능.
    console.log(y); // 실행 결과: 문에서 선언한 변수
}

console.log(y); // 실행 결과: 문에서 선언한 변수

변수 y는 조건문 내부에서 선언하였으므로, 조건문 내부와 조건문 바깥에서도 접근이 가능하다.

자바스크립트는 기본적으로 함수 스코프를 따르므로 함수의 바깥에서 선언한 변수의 접근 및 수정이 쉽다. 이로 인해, 기존에 선언된 것에 잘못 접근하여 수정한다면 오류가 발생할 수 있다. 이러한 단점을 보완하기 위해 블록 스코프가 등장하게 되었다.

3. 블록 스코프(block scope)

블록 {}을 생성할 때 만들어진 스코프이다.

ES6에서 let과 const 키워드의 등장으로 블록 스코프를 생성할 수 있게 되었고, 블록 스코프를 이용하는 것이 권장되고 있다.

for (var i = 0; i < 3; i++) {
	console.log(i)
}
/* 
실행 결과
	0
	1
	2
*/

console.log(i); // 실행 결과: 3

for문 내에서 var로 변수 i를 선언하였으므로, for문 바깥에서 변수 i에 접근이 가능하다.

for (let i = 0; i < 3; i++) {
	console.log(i)
}
/* 
실행 결과
	0
	1
	2
*/

console.log(i); // 에러 발생

for문 내에서 let으로 변수 i를 선언하였으므로, for문 바깥(블록 {} 바깥)에서 변수 i에 접근이 불가능하다.

참고문헌

MDN Scope
fromzoo님의 함수스코프vs블록스코프

같이 보면 좋은 글

[JavaScript] 변수의 선언: let, const, var