컴퓨터 공학, 그리고 자바스크립트에서의 스코프는 "변수의 유효범위"로 사용된다.
오늘은 스코프(Scope)의 종류와 각 선언 키워드(let
, const
)를 어떻게 사용해야 하는지 알아보자!
학습 목표
스코프의 의미와 적용 범위를 이해한다.
스코프의 주요 규칙을 이해한다.
전역 스코프와 지역 스코프의 차이를 이해한다.
block scope와 function scope의 차이를 이해한다.
변수 선언 키워드(let, const, var)와 스코프와의 관계를 설명할 수 있다.
전역 객체가 무엇인지 설명할 수 있다.
- 안쪽 스코프에서 바깥쪽 스코프로는 접근할 수 있지만 반대는 불가능하다.
- 스코프는 중첩이 가능하다. (마치 중첩된 울타리와 같다!)
- 가장 바깥쪽의 스코프는 전역 스코프(Global Scope)라고 부른다.
전역의 반대말은 지역(Local)으로 전역이 아닌 다른 스코프는 전부 지역 스코프(Local Sope)이다.
- 지역 스코프에 선언한 변수는 지역 변수, 전역 스코프에서 선언한 변수는 전역 변수이다.
여기서 지역 변수는 전역 변수보다 더 높은 우선순위를 가진다.
- 두 번째 출력은 함수 안에서 선언한
name
이라는 지역 변수에 접근하고 있다.
변수 이름이 전역 변수와 똑같지만, 지역 변수가 전역 변수보다 우선순위가 높으므로,지역 변수name
이 출력되는 것이다.- 동일한 변수 이름으로 인해 바깥쪽 변수가 안쪽 변수에 의해 가려지는(shadow) 이러한 현상을 쉐도잉(variable shadowing)이라고 부른다.
- 블록 스코프(block scope) : 중괄호(
{}
)를 기준으로 범위가 구분된다.
- 같은 함수여도 화살표 함수를 사용하면 블록 스코프로 취급된다.
- 함수 스코프(function scope) :
function
키워드가 등장하는 함수 선언식 및 함수 표현식은 함수 스코프를 만든다.
{}
)와 var
키워드i
는 블록 범위를 벗어나는 즉시 접근 할 수 없다.i
는 출력되지 않고 에러가 발생한다.let
대신 var
키워드를 사용했다. 결과는 어떨까?i
에 대한 결과가 출력되었다. 왜그럴까??var
키워드는 for
문이 만들어낸 블록 스코프를 무시한다.var
키워드와 let
키워드변수를 정의하는 방법은 let
외에도 var
키워드가 있다.
var
키워드로 정의한 변수는 블록 스코프를 무시하고, 함수 스코프만 따르는 특징이 있다.
(화살표 함수의 블록 스코프 제외)
따라서 시각적으로 구분이 명확한 코드를 작성하기 위해서는 블록 단위로 스코프를 구분했을 때
이 규칙을 무시하는 var
보다는 let
으로 변수 선언을 하는 것을 권장한다.
var
키워드의 특징var
키워드는 재선언을 해도 아무런 에러도 내지 않지만 let
키워드는 재선언을 방지한다.let
키워드를 사용하면 에러가 발생하면서 혹시나 발생할 수 있는 버그를 방지해준다!const
키워드const
키워드의 특징const
let
키워드와 동일하게 블록 스코프를 따른다.const
키워드 사용을 권장한다.var
로 선언된 전역 변수 및 전역 함수는 window 객체에 속하게 된다.window
라는 객체가 존재한다.전역 변수는 가장 바깥 스코프에 정의한 변수로, 어디서든 접근이 가능하다.
얼핏 "모든 변수를 바깥으로 빼면 스코프 걱정을 하지 않아도 되겠네?" 라는 생각이 들 수도 있지만, 전역 변수를 많이 만드는 것은 그다지 좋은 선택이 아니다.
보통 애플리케이션을 만들 때에는, 내가 직접 작성하지 않은 수많은 다른 함수와 로직이 포함된다. 너도나도 똑같은 이름으로 전역 변수를 선언하려고 한다면 분명 문제가 발생할 것이다.
이를 부수 효과(side effect)라고 한다. 전역 변수를 최소화하는 것은 side effect를 줄이는 좋은 방법이다.
let
, const
를 주로 사용하자.var
는 블록 스코프를 무시하며, 재선언을 해도 에러를 내지 않는다.var
로 선언하는 경우 문제가 될 수 있다.var
로 선언한 전역 변수가 window 기능을 덮어씌워서 내장 기능을 사용할 수 없게 만들 수 있다. 😰var
, let
, const
) 없이 변수를 할당을 하지말자.var
로 선언한 전역 변수처럼 취급된다.