Scope는 무엇일까?

Scope는 무엇일까?

scope라는 영어 단어의 의미는 범위이다.
컴퓨터 공학, 그리고 JS에서도 범위라는 의미를 가진다.
그리고 이는 javascript에만 존재하는 개념은 아니다.

Scope란?

식별자 접근 규칙에 따른 유효 범위

Scope의 정의는 식별자 접근 규칙에 따른 유효범위이다.
여기서 식별자란 변수, 함수, 클래스 와 같은것을 의미한다.

그래서 식별자에 따라 접근할 수 있는 범위가 존재한다.

범위는 중괄호(블록) 또는 함수에 의해 나눠지는데 이 범위를 Block Scope 그리고 Function Scope라고 부른다.

스코프의 주요 특징

안쪽 스코프에서 바깥쪽 스코프로 접근할 수 있지만 반대는 불가능하다.

function ImChangGyu() {
  let i = 0;
  function GSM() {
    let j = 0;
    console.log(i); // 0
  }
  console.log(j); //Reference Error
}

위와 같이 ImChangGyu란 함수가 있고 그안에 GSM이란 함수가 있다.
ImChangGyu에는 i라는 변수가 선언되어 있고 GSM이란 함수에는 j라는 변수가 선언되었다.

GSM이라는 함수안에서 i를 참조하려고 한다면 가능하지만 ImChangGyu라는 함수안에서 j를 참조하려고 한다면 불가능하다.

스코프는 중첩이 가능하다.

function ImChangGyu() {
  function ImChangGyu2() {
    // ...
  }
}

위와 같이 스코프는 중첩이 가능하다.

전역 스코프와 지역 스코프

var a = 'a';

function ImChangGyu() {
  let i = 'b';
  console.log(a); // a
}
console.log(b); // Reference Error

위의 a라는 변수는 전역 스코프(Global Scope)에 선언된 변수 입니다.
이처럼 전역 스코프는 가장 바깥쪽의 스코프를 의미합니다!

ImChangGyu라는 함수 내에 선언된 i라는 변수는 지역 스코프(Local Scope)에 선언된 변수입니다.
이처럼 지역 스코프는 위의 블록 스코프와 함수 스코프에 해당합니다.

지역 변수는 전역 변수보다 우선순위가 더 높다.

지역 스코프에서 선언한 변수는 지역 변수이고
전역 스코프에서 선언한 변수는 전역 변수이다.

var a = 'a';

function ImChangGyu() {
  var a = 'b';
  console.log(a); // b
}

위처럼 똑같은 a라는 이름의 변수를 선언 했지만 a로 초기화 된것은 전역 변수고 b로 초기화 된것은 지역 변수이다.

ImChangGyu라는 함수 내에서는 a라는 변수를 console에 찍어보았을 때 지역 변수가 우선순위가 더 높기에 b라고 console 뜨게 된다.

스코프의 종류

위에서 부터 계속 언급하고 있는 종류로 블록 스코프와 함수 스코프가 있다.

그러나 화살표 함수는 함수 스코프가 아니다. 그래서 화살표 함수는 블록 스코프로 취급된다.

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

JS에서 변수 선언 키워드 세가지가 있는데 이 세가지의 스코프 유효 범위에 대해 알아보자

const, let

for (let i = 0; i < 10; i++) {
  console.log(i); //1부터 10까지
}

console.log(i); //ReferenceError

위와 같이 let 혹은 const 키워드로 선언한 변수는 블록 혹은 함수 스코프 내에서만 유효한 범위를 가지기에 스코프 바깥에서 참조 할 경우 referenceError를 일으킨다.

const와 let은 블록스코프와 함수 스코프를 유효 범위로 가진다

var

for (var i = 0; i < 10; i++) {
  console.log(i);
}
console.log(i); // 10

var는 함수 스코프 내에서만 유효한 범위를 가지기에 블록 스코프에서 선언한 변수도 다른 곳에서 참조가 가능하다

var를 이용해 코드를 구성하게 되면 i라는 변수의 스코프를 제대로 예측하기 어렵기에
예측가능 한 코드를 작성할 수 있는 let, const 키워드의 사용을 더 권장한다.

스코프에 대해 변수 선언시 주의점

전역 변수는 최소화 하기

전역 변수는 어디서든 접근이 가능한데 이를 최소화 하면 side effect를 줄일 수 있다.
심지어 전역 변수를 var로 선언하게 된다면 브라우저의 콘솔을 이용해 접근하여 선언된 변수를 조작해 기능을 못하게 할 수 있다.

그래서

위와 같이 스코프라는 개념은 추후에 설명할 클로저라는 개념을 알기 위해 필요한 개념이라 정리해 보았습니다!