Scope : 변수, 너에게 닿을 수 있는 그 범위

자바스크립트에서 변수를 선언하고 값을 할당하고 여러 기능을 구현할 때,

값이 할당된 변수에 접근해 해당 값을 활용하곤 하는데

이 때, 스코프(scope) 라는 개념이 적용된다.

 

중요한 개념 중 하나이니 쓱 정리해 보고 가자.

 

---

 

스코프란?

스코프를 구글에 검색하면 총에 사용하는 조준경이 가장 먼저 나온다.

억지 같긴 하지만 조준경과 자바스크립트의 스코프의 공통점을 찾아보자면 범위라는 점이 있다.

 

조준경은 넓은 범위에서 타겟이 있는 위치의 범위를 좁히는 역할로 사용하는 장비라면

자바스크립트의 스코프는 어떠한 변수에 접근할 때, 그 변수에 접근할 수 있는 범위를 의미한다.

범위라는 개념만 보면 조준경과 자바스크립트의 스코프는 대충 비슷한 개념이다.

 

그렇다면 왜 이 범위가 중요한 개념이라고 하는 걸까?

var age = 10;

function setAge () {
  var age = 20;
};

console.log(age);

만약 위의 예시 코드에서 스코프의 개념이 없다라고 가정해 보자.

그렇게 되면 age의 값으로 20이 출력이 될 것이다.

 

왜냐하면 변수에 접근할 수 있는 범위가 설정 되지 않는다면

어디서 선언하는지에 상관없이 모든 범위에서 해당 변수에 접근이 가능해지기 때문이다.

그렇기에 접근할 수 있는 범위의 설정은 다양한 에러를 방지할 수 있는 역할을 하게 된다.

 

스코프의 종류

스코프의 종류에는 전역 스코프(global scope)와 지역 스코프(local scope)가 있다.

전역 스코프는 말 그대로 전체 범위를 뜻하고, 지역 스코프는 블록({ })으로 구성된 범위를 뜻한다.

 

var first = 1;
let second = 2;
const third = 3;

function checkVariable () {
  console.log(first);    // 1
  console.log(second);   // 2
  console.log(third);    // 3
}

checkVariable();

console.log(first);    // 1
console.log(second);   // 2
console.log(third);    // 3

위의 예시 코드에서 볼 수 있듯,

전역 스코프에서 선언된 변수는 함수 내에서건 함수 밖이서건 어디서든 접근이 가능하다.

 

function checkVariable () {
  var first = 1;
  let second = 2;
  const third = 3;

  console.log(first);    // 1
  console.log(second);   // 2
  console.log(third);    // 3
}

checkVariable();

console.log(first);    // ReferenceError: first is not defined
console.log(second);   // ReferenceError: second is not defined
console.log(third);    // ReferenceError: third is not defined

지역 스코프에서 선언된 변수는 블록 내에서만 접근이 가능하다.

위의 예시를 보면 함수 내에서 선언된 변수는 함수 밖에서는 접근이 불가능해진다.

 

여기서 말하는 블록은 중괄호({ })로 둘러 쌓인 것을 의미하는데

함수에서도 사용 되지만 반복문, 조건문 등에서도 블록이 생기기 때문에

블록이라고 해서 무조건 함수만 생각하는 건 안된다.

 

728x90

 

함수 스코프 / 블록 스코프

함수 스코프나 블록 스코프 모두 지역 스코프인데 어떤 차이가 있는걸까?

우선 두 스코프의 차이를 본다면 함수 스코프는 함수 내부 영역을 변수 접근 범위로 보는거고

블록 스코프는 중괄호로 잡혀 있는 영역을 변수 접근 범위로 보는 것이다.

그래서 블록 스코프의 경우 함수 외에도 조건문, 반복문 등도 포함한다.

 

사실 여기까지 개념과 차이에 대해서 정리하면 되는데,

자바스크립트 기반의 개발자는 자바스크립트의 특징 때문에 한단계 더 공부해야 한다.

 

원래 자바스크립트는 함수 스코프를 따르는 언어였다.

ES6 등장 이전에는 함수 스코프를 따랐지만, ES6 등장 이후에는 블록 스코프를 따르는 개념이 등장했다.

( 참고글 : var, let, const를 비교하는 글 )

 

 

if (true) {
  var a = 1
}

console.log(a) // 1

if (true) {
  let b = 2
}

console.log(b) // ReferenceError: b is not defined

위의 예시를 보면 블록 스코프 안에서 변수를 선언했는데 선언 키워드가 각각 var와 let으로 선언 되어있다.

var의 경우 함수 스코프를 따르기 때문에 블록 안에서 선언했다고 하더라도

마치 전역에서 선언한 것 처럼 블록 밖에서 해당 변수에 접근이 가능하다.

 

그러나 let으로 선언한 변수는 블록 스코프를 따르기 때문에

블록 안에서 선언한 변수는 블록 밖에서 접근 할 수 없게 된다.

 

---

 

이러한 스코프의 기본적인 개념을 잡아두고

차후 스코프 체인, 클로저에 대한 자바스크립트의 특징에 대해서 이어서 공부해보자.

 

함께 읽으면 좋은 글 리스트

var, let, const : 자바스크립트 변수 선언 3 대장

실행 컨텍스트 : 자 이게 너가 사용할 수 있는 친구들이야

호이스팅 : 변수, 함수 끌어~ 올려!

 

포스팅 작성에 참고한 감사한 글들

poiemaweb : Scope

꼼코더 블로그 : 스코프란?