[JavaScript] 스코프

KIM DA MI·2023년 3월 2일
0

JavaScript

목록 보기
8/16
post-thumbnail

컴퓨터 공학, 그리고 자바스크립트에서의 스코프는 "변수의 유효범위"로 사용된다.
오늘은 스코프(Scope)의 종류와 각 선언 키워드(let, const)를 어떻게 사용해야 하는지 알아보자!

학습 목표
스코프의 의미와 적용 범위를 이해한다.
스코프의 주요 규칙을 이해한다.
전역 스코프와 지역 스코프의 차이를 이해한다.
block scope와 function scope의 차이를 이해한다.
변수 선언 키워드(let, const, var)와 스코프와의 관계를 설명할 수 있다.
전역 객체가 무엇인지 설명할 수 있다.


1. 스코프와 주요 규칙


스코프(Scope)

  • 스코프는 변수 접근 규칙에 따른 유효 범위이다.
  • 변수에는 접근할 수 있는 범위가 존재한다. 중괄호(블록) 안쪽에 변수가 선언되었는지,
    바깥쪽에 변수가 선언되었는지가 중요하다. 이 범위를 스코프라고 부른다.

스코프의 규칙

  1. 안쪽 스코프에서 바깥쪽 스코프로는 접근할 수 있지만 반대는 불가능하다.
  1. 스코프는 중첩이 가능하다. (마치 중첩된 울타리와 같다!)
  1. 가장 바깥쪽의 스코프는 전역 스코프(Global Scope)라고 부른다.
    전역의 반대말은 지역(Local)으로 전역이 아닌 다른 스코프는 전부 지역 스코프(Local Sope)이다.
  1. 지역 스코프에 선언한 변수는 지역 변수, 전역 스코프에서 선언한 변수는 전역 변수이다.
    여기서 지역 변수는 전역 변수보다 더 높은 우선순위를 가진다.
  • 두 번째 출력은 함수 안에서 선언한 name이라는 지역 변수에 접근하고 있다.
    변수 이름이 전역 변수와 똑같지만, 지역 변수가 전역 변수보다 우선순위가 높으므로,지역 변수 name이 출력되는 것이다.
  • 동일한 변수 이름으로 인해 바깥쪽 변수가 안쪽 변수에 의해 가려지는(shadow) 이러한 현상을 쉐도잉(variable shadowing)이라고 부른다.



2. 변수 선언과 스코프


스코프의 종류

  • 스코프는 두 가지 종류가 있다.
  1. 블록 스코프(block scope) : 중괄호({})를 기준으로 범위가 구분된다.
  • 같은 함수여도 화살표 함수를 사용하면 블록 스코프로 취급된다.
  1. 함수 스코프(function scope) : function 키워드가 등장하는 함수 선언식 및 함수 표현식은 함수 스코프를 만든다.

var 키워드

블록 스코프({})와 var 키워드

  • 먼저 첫번째 예제를 살펴보자. 다음 콘솔에 출력되는 결과는 무엇일까?
    • 블록 스코프 안에 정의된 변수 i는 블록 범위를 벗어나는 즉시 접근 할 수 없다.
      블록 스코프 밖의 i는 출력되지 않고 에러가 발생한다.

  • 다음은 두번째 예제는 let 대신 var 키워드를 사용했다. 결과는 어떨까?
    • 블록 스코프를 벗어났음에도 불구하고 변수 i에 대한 결과가 출력되었다. 왜그럴까??
      • var 키워드는 for문이 만들어낸 블록 스코프를 무시한다.

var 키워드와 let 키워드

  • 변수를 정의하는 방법은 let 외에도 var 키워드가 있다.

  • var 키워드로 정의한 변수는 블록 스코프를 무시하고, 함수 스코프만 따르는 특징이 있다.
    (화살표 함수의 블록 스코프 제외)

  • 따라서 시각적으로 구분이 명확한 코드를 작성하기 위해서는 블록 단위로 스코프를 구분했을 때
    이 규칙을 무시하는 var 보다는 let 으로 변수 선언을 하는 것을 권장한다.


var 키워드의 특징

  • var 키워드는 재선언을 해도 아무런 에러도 내지 않지만 let키워드는 재선언을 방지한다.
    • let 키워드를 사용하면 에러가 발생하면서 혹시나 발생할 수 있는 버그를 방지해준다!

const 키워드

const 키워드의 특징

  • 값이 변하지 않는 상수를 정의할 때 쓰는 const
  • let 키워드와 동일하게 블록 스코프를 따른다.
  • 값의 변경을 최소화 하여 안전한 프로그램을 만들 수 있다.
    값을 새로 할당할 일이 없다면 const 키워드 사용을 권장한다.
  • 값을 재할당하는 경우, TypeError를 낸다. (재할당이 불가능)
    • 의도하지 않은 값의 변경을 막을 수 있다!

let, var, const 키워드 비교



3. 변수 선언할 때 주의할 점


window 객체

  • var로 선언된 전역 변수 및 전역 함수는 window 객체에 속하게 된다.
    • 브라우저에는 window라는 객체가 존재한다.
    • 그러나, 브라우저 창과 관계 없이 전역 항목도 담고 있다.

전역 변수는 최소화하자.

  • 전역 변수는 가장 바깥 스코프에 정의한 변수로, 어디서든 접근이 가능하다.
    얼핏 "모든 변수를 바깥으로 빼면 스코프 걱정을 하지 않아도 되겠네?" 라는 생각이 들 수도 있지만, 전역 변수를 많이 만드는 것은 그다지 좋은 선택이 아니다.

  • 보통 애플리케이션을 만들 때에는, 내가 직접 작성하지 않은 수많은 다른 함수와 로직이 포함된다. 너도나도 똑같은 이름으로 전역 변수를 선언하려고 한다면 분명 문제가 발생할 것이다.
    이를 부수 효과(side effect)라고 한다. 전역 변수를 최소화하는 것은 side effect를 줄이는 좋은 방법이다.


let, const를 주로 사용하자.

  • var는 블록 스코프를 무시하며, 재선언을 해도 에러를 내지 않는다.
    • 같은 스코프에서 동일한 이름의 변수를 재선언 하는 것은 버그를 유발한다.

  • 전역 변수를 var로 선언하는 경우 문제가 될 수 있다.
    • var로 선언한 전역 변수가 window 기능을 덮어씌워서 내장 기능을 사용할 수 없게 만들 수 있다. 😰

선언 없는 변수 할당을 금지하자.

  • 선언 키워드 (var, let, const) 없이 변수를 할당을 하지말자.
    선언 없이 변수를 할당하면 해당 변수는 var로 선언한 전역 변수처럼 취급된다.

0개의 댓글