17. 스코프

스코프란?

• 식별자가 유효한 범위
• 선언된 위치에 따라 유효 범위가 결정됨
• {} 블럭안의 변수는 블럭 안에서만 유효
• 이름 충돌 방지, 메모리 절약
• 코드 블럭: { }, if() {}, for() {}, function() { }

// 블럭 외부에서는 블럭 내부의 변수를 참조할 수 ❌
{
  const a = 'a';
}
console.log(a);
const b = 'b';

// 함수 외부에서는 함수 내부의 변수를 참조 ❌
function print() {
  const message = 'Hello World';
  console.log(message);
}
console.log(message);

// 함수 외부에서는 함수의 매개변수를 참조 ❌
function sum(a, b) {
  console.log(a, b);
}
console.log(a, b);

---

Garbage Collector(GC)

• 메모리가 부족할 때 쓰레기를 정리해주는 프로그램
• 어디서든 참조하고 있지않은 객체 삭제
  

// 글로벌 변수는 앱이 종료될때까지 계속 메모리에 유지됨!
const global = 1;
{
  // 블럭 내부에서만 존재하고, 블럭이 끝나면 자동으로 소멸됨 (GC)
  const local = 1;
}

function print() {
  // 함수 내부에서도 블럭안에서 필요한 경우에는
  // 필요한 곳에서! 블럭 안에서 변수를 선언하고 사용해야 함
  if (true) {
    let temp = 0;
  }
}

---

실행 컨텍스트 Execution Context

• 코도의 실행순서와 스코프를 기억

렉시컬 환경

• 환경 레코드 : 현재 블록에 해당하는 데이터
• 외부 환경 참조 : 외부 환경(부모 블록)에 대한 데이터
• 코드 실행 과정
  • 필요한 변수와 함수를 "로컬 레코드"에서 검색
  • 없으면 부모 레코드 ( 외부 렉시컬 환경 )에서 검색
  • 글로벌 렉시컬 환경에도 없으면 Error 발생
  • 찾으면 변수 사용

---

호이스팅

• 자바스크립트 엔진이 코드를 실행하기 전, 변수, 함수, 클래스의 선언문을 끌어 올리는 것을 말함
• 함수의 호이스팅은 함수의 선언문 전에 호출이 가능하게 해줌
• 변수의 선언과 초기화를 분리한 후, 선어만 코드의 최상단으로 옮김

// 함수의 선언문은 선언 이전에도 호출이 가능함
print();

function print() {
  console.log('Hello');
}

// 변수(let, const)와 클래스는 선언만 호이스팅이 되고,
// 초기화는 안됨
// 초기화 전, 변수에 접근하면 컴파일(빌드) 에러가 발생
// console.log(hi);
let hi = 'hi';
let func1 = function () {};

// const cat = new Cat();
class Cat {}

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