JS_기본 문법 (17)_스코프

JS에서의 스코프에 대해서 알아보자!

 

1. 블록문 (Block)

블록문은 0개 이상의 statement(구문)을 묶은 것을 이야기하고,

한 쌍의 중괄호(brackets)로 감싸져있다.

{
	...
}

 

일반적으로 제어문, 함수 등에 사용이 되고

블록문은 새로운 스코프를 생성한다

 

1) 스코프 (Scope)

스코프란 변수나 상수, 식별자들이 유효하게 사용될 수 있는 범위를 말한다.

즉, 블록문을 생성할 경우 새로운 범위를 생성하게 되는 것이다.

 

특징 1_ 블록 안에 선언된 변수와 상수를 그 밖에서 사용 불가

{
  let x = 1;
  console.log(x);
}
console.log(x);

>>> 1
>>> Uncaught ReferenceError: x is not defined

위의 예시처럼 블록 안에 선언된 변수와 상수를 그 밖에서는 사용이 불가하다.

 

특징 2_ 블록 안쪽에서는 밖에서 선언된 것 사용 가능

let x = 1;
{
  console.log(x);
}
console.log(x);

>>> 1
>>> 1

위처럼 블록 안쪽에서도 밖에서 선언된 것에 접근을 할 수 있다.

 

특징 3_ 블록 안쪽에서 새로 선언될 경우 바깥 것 위에 덮어씌움

할당이 아닌 선언에 관한 특징이다.

const x = 0;
let y = 'A';
console.log(x, y);

{
  const x = 1; // 상수도 재선언이 가능하다.
  let y = 'B';

  console.log(x, y);
}

console.log(x, y);

>>> 0 'A'
>>> 1 'B'
>>> 0 'A'

위의 결과를 통해 알 수 있는 것은

블록 안에서는 밖에서 이미 사용한 '이름'을 다시 사용할 수 있다는 것이다.

상수나 변수에 구분 없이 가능하다.

 

블록 안에서 접근 시 주의할 점

상수일 경우에는 당연히 재할당이 불가하다.

const x = 0;

{
  x = 1; // 상수에 새로 할당할 수 없다.

  console.log(x);
}

>>> Uncaught TypeError: Assignment to constant variable.

 

블록 안에서 기존 변수에 값을 할당할 경우

재선언이 아니므로 밖의 변수 값을 바꾸는 것이다.

let y = 0;

console.log(y);

{
  y = 1; // 상수에 새로 할당할 수 없다.

  console.log(y);
}

console.log(y);

>>> 0
>>> 1
>>> 1 //값이 변경됨.

 

스코프 체인

블록으로 인한 스코프는 메모리 관점에서 보았을 때

지역 변수들은 스택 영역에 위치한다.

그에 따른 예시를 살펴보면

let a = 0;
let b = 1;
let c = 2;
console.log('1 : ', a, b, c);

{
  let a = 9;
  let b = 8;
  console.log('2 : ', a, b, c);
  {
    let a = 10;
    console.log('3 : ', a, b, c);
  }
  console.log('4 : ', a, b, c);
}
console.log('5 : ', a, b, c);

>>> 1 :  0 1 2
>>> 2 :  9 8 2
>>> 3 :  10 8 2
>>> 4 :  9 8 2
>>> 5 :  0 1 2

위의 결과를 통해 알 수 있는 것은 현재 블록에서 호출한 변수가 존재하지 않을 경우

현재의 상위 범위를 조사하여 값을 확인한다. (존재X = 하나씩 거슬러 올라가며 조사)

이는 스택으로 인한 결과라고 할 수 있다.

 

---

Global 변수/상수

데이터 영역에 위치

코드 어느 곳에서든 접근 가능

프로그램 종료 시 소멸

 

Local 변수/상수

스택 영역에 위치

선언된 블록 내에서만 존재

블록 종료 시 소멸