[Javascript] 스코프

Min Seong Kim·2022년 7월 11일
0
post-thumbnail

스코프

  • "변수 접근 규칙에 따른 유효 범위"이다.

스코프 규칙

  • 안쪽 스코프에서 바깥쪽 스코프로 접근할 수 있지만 반대는 불가능하다.
  • 스코프는 중첩이 가능하고 스코프는 마치 중첩된 울타리와 같다.
  • 가장 바깥쪽의 스코프는 전역 스코프(Global Scope)라고 부른다. 전역의 반대말은 지역(local)으로 전역이 아닌 다른 스코프는 전부 지역 스코프(local scope)이다.
  • 지역 스코프에 선언한 변수는 지역 변수, 전역 스코프에서 선언한 변수는 전역 변수이다.
  • 지역 변수전역 변수보다 더 높은 우선순위를 가진다.

스코프의 종류와 let, const, var 키워드

  • 먼저 스코프는 두 가지 종류가 있다. 하나는 블록 스코프(block scope)라고 부르며 중괄호를 기준으로 범위가 구분된다. 또 다른 스코프 종류로는 함수 스코프(function scope)가 있다. function 키워드가 등장하는 함수 선언식 및 함수 표현식은 함수 스코프를 만든다. (화살표 함수블록 스코프로 취급된다)

var 키워드 와 let 키워드

변수를 정의하는 또 다른 키워드 var

  • var 키워드는 블록 스코프를 무시하고 함수 스코프만 따른다. (모든 블록 스코프를 무시하는건 아니고 화살표 함수의 블록 스코프는 무시하지 않는다.)

  • 블록 단위로 스코프를 구분 했을 때 훨씬 더 예측 가능한 코드를 작성 할 수 있으므로 let키워드의 사용을 권장한다.

  • var를 사용하지 않는다 해도 함수 스코프let으로 선언된 변수의 접근 범위를 제한한다.

var 키워드 보다 let 키워드가 안전한 이유

  • var 키워드는 재선언을 해도 아무런 에러도 내지 않지만 let 키워드는 재선언을 방지 한다.

값이 변하지 않는 상수를 정의 할 때 쓰는 const

  • let 키워드와 동일 하게 블록 스코프를 따른다.
  • 값의 변경을 최소화하여 보다 안전한 프로그램을 만들 수 있다.
  • 값을 새롭게 할당할 일이 없다면 const키워드의 사용이 권장된다.
  • const는 값의 재할당이 불가능하며 값을 재할당할 경우 TypeError를 내므로 의도하지 않은 값의 변경을 막을 수 있다.
letconstvar
유효 범위블록 스코프 및 함수 스코프블록 스코프 및 함수 스코프함수 스코프
값 재할당가능불가능가능
재선언불가능불가능가능

스코프 변수 선언에서 주의 할 점!

var로 선언된 전역 변수 및 전역 함수는 window 객체에 속하게 된다

  • 브라우저에는 window 라는 객체가 존재한다.
    • 브라우저 창을 대표하는 객체
    • 그러나 브라우저 창과 관계없이 전역 항목도 담고 있다.
  • 함수 선언식으로 함수를 선언하거나 var전역 변수를 만들면 window 객체에서도 동일한 값을 찾을 수가 있다.

전역 변수는 최소화 하기

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

  • "모든 변수를 바깥으로 빼면 스코프 걱정을 하지 않아도 되겠네?" 라는 생각이 들 수도 있다. 그러나 전역 변수를 많이 만드는 것은 그다지 좋은 선택이 아니다.

  • 보통 애플리케이션을 만들 때에는 내가 직접 작성하지 않은 수많은 다른 함수와 로직이 포함하게 되는데 너도나도 똑같은 이름으로 전역 변수를 선언하려고 한다면 분명 문제가 발생할 것이다.

  • 이를 side effect라고 한다. 전역 변수를 최소화하는 것은 side effect를 줄이는 좋은 방법이다.

let, const를 주로 사용 하기

  • var 키워드는 블록 스코프를 무시한다. 또한 재선언을 해도 에러를 내지 않는다. letconst를 주로 사용하자.

  • 전역 변수var로 선언하는 것은 브라우저의 내장 기능을 사용하지 못하게 만들 수도 있다.

선언 없는 변수 할당 금지

  • 선언 없이 변수를 할당하지 않는다.
  • 선언 없이 변수를 할당하면 해당 변수는 var로 선언한 전역 변수처럼 취급된다.
  • 실수를 방지하기 위해 Strict mode를 사용 할 수 있다.

Srict Mode는 브라우저가 보다 엄격하게 작동하도록 만들어준다. 앞서 언급한 것처럼 "선언 없는 변수 할당"의 경우도 Strict Mode는 에러로 판단한다.

profile
의미 있는 개발자

0개의 댓글