[JavaScript] : 스코프

✍ 정의

스코프(Scope) 는 앞으로 코딩을 함에 있어 선언된 식별자의 유효 범위를 뜻 하는 것이기에 반드시 이해를 하고 넘어가야 하는 개념 중 하나 이다.

모든 식별자는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조 할 수 있는 유효 범위가 결정되며 이를 스코프라고 한다.

즉, 쉽게 풀이하면 스코프는 선언된 식별자가 가용될 수 있는 범위라고 생각하면 편할 것 같다.

✍ 스코프의 종류

스코프는 선언된 위치에서 특정 가용 범위를 가지게 되고 가용 범위에 따라 지역 스코프와 전역 스코프로 나뉠 수 있으며 의미는 다음과 같다.

• 지역 스코프 (Local Scope) : 가용 범위가 일정 범위 내 한정
• 전역 스코프 (Global Scope) : 코드가 선언된 위치를 포함한 스크립트 내 전체
• 블록 스코프 (Block Scope) : if 나 for loop 과 같은 블록 내부에서 선언된 변수
• 동적 스코프 (Dynamic Scope) : 함수 호출 위치에 따라 상위 스코프가 결정된다.
• 렉시컬 스코프 (Lexical Scope) : 함수 정의 위치에 따라 상위 스코프가 결정된다 (자바스크립트가 따르는 방식)

⇒ 지역 스코프를 조금 더 직관적으로 알고 싶으면 함수 내에서 선언 및 할당된 변수를 살펴보면 좋을 것 같다.

function add(x,y){
	const sum = x + y;
	return sum
}

console.log(sum) // undefined

위 함수를 예를 들어보면, 내부에서 선언 및 할당된 sum이라는 식별자가 바로 지역 스코프를 가진 식별자이다. 지역 스코프의 특성을 갖고 있기에 밖에서 호출을 하면 undefined로 나오게 된다.

🚨 한 가지 주의해야 할 것이 있다. 바로 var 키워드이다. var로 선언한 변수의 경우, 전역 스코프의 성질을 띄고 있으며, 함수 블록 외에 블록은 블록 스코프로 인정(?)하지 않기에 함수 블록을 제외한 블록에서 전역으로 선언한 변수를 다시 선언 및 할당할 경우 덮어 씌우게 되며 의도치 않은 결과를 내게 된다. 그렇기에 ES6 이후로 let 과 const 같은 키워드가 등장하게 되었다.