Javascript Scope 개념에 대하여

Scope란, 변수에 접근할 수 있는 유효 범위를 의미한다.

변수는 어떠한 환경 내에서만 사용이 가능하며, 프로그래밍 언어는 각각의 변수 접근 규칙을 가지고 있다. Scope는 변수와 그 값이 어디서부터 어디까지 유효한지를 판단하는 범위이며, 자바스크립트는 기본적으로 함수가 선언되는 동시에 자신만의 Scope를 가진다.

1. Global Scope vs Local Scope

Local Scope 안쪽에서 선언 된 변수는 밖에서 사용할 수 없다. Global Scope는 최상단에 위치하여 있는 Scope로, 전역 변수는 어디서든 접근이 가능하다. 또한, 지역 변수는 함수 내에서 전역 변수보다 더 높은 우선순위를 가진다

2. Function Scope vs Block Scope

Var을 통해 변수를 선언할 경우, Function Scope를 따르게 되며, Block Scope에서 선언하더라도 해당 블럭이 들어있는 함수 내에서는 접근이 가능하다.

var은 재선언이 가능한데, 해당 내용은 실제 코딩하는 경우 대부분 버그이며, let 키워드를 사용해야 이러한 실수를 막을 수 있다.

let, const 를 통해 변수를 선언할 경우, Block Scope를 따르게 되며, Block Scope 에서 변수를 선언할 경우 해당 블럭 외부에서는 접근이 불가능하다.

const는 값이 변하지 않는 상수를 정의할 때 사용하는 키워드이며, 값을 재정의 할 수 없다

3. Window (전역 객체)

전역에서 사용할 수 있는 key 와 value 들이 들어있다.

Global에서 선언된 함수, 그리고 var키워드를 이용해 선언된 변수는 window 객체와 연결된다.

최상위 Scope 인 전역 범위에 너무 많은 변수를 선언하는 것은 지양하는 것이 좋다. 이 경우, 다른 자바스크립트 파일이나 라이브러리와 변수가 겹칠 경우가 생길 수 있다기 때문이다. 하나의 Local Scope내에서 변수를 선언하는 것이 안전하다.

4. 선언 없이 초기화된 전역 변수

절대로 선언 키워드 없이 변수를 초기화하지 말 것! 키워드 없이 변수를 선언할 경우, 전역 변수로 취급된다.

function showAge() {
	//age 는 전역 변수로 취급된다.
  age = 90;
	console.log(age);
}

showAge(); // 90
console.log(age); // 90

//age === window.age

이런 실수를 방지하고 싶을 경우, 'use strict' 를 최상단에 적어서 Strict Mode를 적용한다.