스코프(scope)

💡 지역이란 함수 몸체 내부를 말한다.
💡 스코프 체인이란 스코프가 계층적으로 연결된 것을 말한다.

1. 렉시컬 스코프

• 함수를 어디서 정의했는지에 따라 함수의 상위 스코프를 결정한다.
• 상위 스코프가 동적으로 변하지 않고 함수 정의가 평가되는 시점에 상위 스코프가 정적으로 결정되기 때문에 정적 스코프라고도 부른다.
• 함수 정의가 실행되어 생성된 함수 객체는 이렇게 결정된 상위 스코프를 기억한다. 이는 함수가 호출될 때마다 함수의 상위 스코프를 참조할 필요가 있기 때문이다.

👾#01

var n1 = 1;
var n2 = "a";

function a() {
  var n1 = 2;
  b();
}

function b() {
  var n2 = "b";
  console.log(n1); // 1
  c();
  function c() {
    console.log(n2); // b
  }
}

a();

2. 함수 레벨 스코프

• 함수에 의해서만 지역 스코프를 생성한다.
• var키워드로 선언된 변수는 오직 함수의 코드 블록(함수 몸체)만을 지역 스코프로 인정한다. 이러한 특성을 함수 레벨 스코프라 한다.

var i = 10;

for(var i = 0; i < 5; i++){
	console.log(i); // 0 1 2 3 4
}

console.log(i) // 5

👉🏻 for문 안에서 선언한 i는 전역변수이다!

3. 블록 레벨 스코프

• 블록 레벨 스코프란 함수 몸체 뿐만 아니라 모든 코드 블록(if, for, while, try/catch 등)이 지역 스코프로 인정한다.
• let, const키워드로 선언한 변수는 블록 레벨 스코프를 따른다.

let foo = 1; // 전역 변수

{
  let foo = 2; // 지역 변수
  let bar = 3; // 지역 변수
}

console.log(foo); // 1
console.log(bar); // error

4. let

• let 키워드로 선언한 변수는 '선언 단계'와 '초기화 단계'가 분리되어 진행되는데, '선언 단계'는 런타임 이전에 실행되고 '초기화 단계'는 변수 선언문에 도달했을 때 실행된다.

💡 일시적 사각지대란 스코프의 시작 지점부터 초기화 시작 지점까지 변수를 참조할 수 없는 구간을 말한다.

console.log(foo); // ReferenceError

let foo; // 변수 선언문에 도달하여 초기화를 실행함
console.log(foo); // undefined

foo = 1; // 할당문에서 할당 단계가 실행된다
console.log(foo); // 1

5. const

• let과 대부분 동일함.
• const키워드로 선언한 변수는 반드시 선언과 동시에 초기화해야 한다.
• 재할당이 금지된다!!
• 재할당이 금지된 변수를 말하는 변수인 상수는, const 키워드로 선언한 변수에 원시 값을 할당하면 만들 수 있다.(상수는 일반적으로 대문자로 선언한다.)
• const 키워드로 선언된 변수에 객체를 할당한 경우 값을 변경할 수 있다!! -> 재할당을 불변할 뿐 '불변'을 의미하지 않는다!!