[JavaScript] 스코프와 변수 선언 (var, let, const의 차이점)

스코프

스코프란 식별자에 접근할 수 있는 유효 범위 를 뜻한다.

• 식별자란 변수, 함수, 클래스를 뜻하고 식별자에는 접근할 수 있는 범위가 존재한다.
• 범위는 중괄호(블록) 또는 함수에 의해 나눠진다.
• 그 접근할 수 있는 범위를 스코프라고 한다.

스코프의 종류

• 블록 스코프(화살표 함수도 포함)
• 함수 스코프

스코프와 var, let, const 키워드

변수 3개의 스코프 유효 범위에 대해 알아보면서 블록 스코프와 함수 스코프의 차이점에 대해 알아보겠다.

const 키워드

• 유효 범위: 블록 스코프 / 함수 스코프
• 값 재할당: 불가능
• 재선언: 불가능

let 키워드

• 유효 범위: 블록 스코프 / 함수 스코프
• 값 재할당: 가능
• 재선언: 불가능

var 키워드

• 유효 범위: 함수 스코프
• 값 재할당: 가능
• 재선언: 가능

for(let i=0; i<10; i++) {
  console.log(i);
}
// 전역스코프에서 선언한 변수 i 는 존재하지 않음으로 아래에서 ReferenceErrer을 일으킨다.
console.log(i);
// ReferenceErrer

블록 스코프 안에서 let과 const 키워드로 선언한 변수는 스코프 안에서만 참조가 가능하다.

for(var i=0; i<10; i++) {
  console.log(i);
}
// 지역 스코프에서 선언되었지만 모든 스코프에서 접근 가능하다.
console.log(i);
// 9

그런데 var 키워드로 선언한 변수는 블록 스코프를 무시하고 스코프 울타리 밖에서도 접근 가능하다.

var 키워드로 선언한 변수는 함수 스코프만을 따른다.

블록 단위로 스코프를 구분했을 때, 훨씬 더 예측 가능한 코드를 작성할 수 있으므로 재할당이 필요하다면 var보단 let 키워드의 사용이 권장된다.

변수 선언 시 주의점

전역 객체(window)의 이해

• window 객체란 브라우저에만 존재하는 객체이다.
• 별개로 전역 영역을 담고 있기도 하다.
• 따라서 함수 선언식으로 함수를 선언하거나, var 키워드로 변수를 선언하면 window 객체에 속해진다.

var a = 'a';
> undefined

let b = 'b';
> undefined

window.a;
"a"

window.b;
undefined

function myFn(){
	return 'myFn';
}
> undefined

window.myFn();
> "myFn"

전역 변수는 최소화하자.

가장 바깥 스코프에 정의한 변수는 전역 변수이다. 즉 어디서든 접근이 가능하다.

이러한 전역 변수를 var로 선언하는 경우 문제가 될 수 있다.

1. var 키워드는 블록 스코프를 무시한다.
2. var은 재선언과 재할당을 할 수 있다.
3. 전역 변수를 var로 선언해서 브라우저의 내장 기능을 못하게 만들 수도 있다.

전역 변수를 최소화 하면 side effect(의도하지 않은 로직에 의한 문제 발생)를 줄일 수 있다.

선언 없는 변수 할당 금지

선언 없이 변수를 할당하면 해당 변수는 var로 선언한 전역 변수처럼 취급된다.

실수를 방지하기 위해 Strict Mode를 사용할 수 있다.

• Strict Mode는 브라우저가 보다 엄격하게 작동하도록 만들어준다.
• "선언 없는 변수 할당"의 경우도 에러로 판단해준다.