💻 TIL 23.03.06

🤷 면접을 준비하며 공부한 내용을 끄적거려 볼까 한다.

1. 호이스팅

• 호이스팅이란 실제 코드가 실행되는 런타임 이전에 변수의 선언 단계가 코드의 맨 위로 올려진 것처럼 동작하는 자바스크립트의 특징이다.

호이스팅의 대상

• 자바스크립트에서는 let, const를 포함한 모든 선언을 호이스팅합니다.
• 변수는 3가지 단계를 거처 생성됩니다.

  • 선언 단계 : 변수를 객체에 등록

  • 초기화 단계 : 변수 객체에 등록된 변수를 위한 공간을 메모리에 확보. 이때 변수는 undefined로 초기화

  • 할당 단계 : undefined로 초기화된 변수에 실제 값을 할당.

    해당 부분에서 var와 es6에서 도입된 let,const와의 차이점이 생긴다.
    var는 선언 단계와 초기화 단계가 한번에 이뤄진다.
    
    console.log(a) // undefined
    var a = 12;
    console.log(a) // 12
    
    하지만 const와 let의 경우 선언 단계와 초기화 단계가 분리되어 이루어지기 때문에, 
    스코프에 변수를 등록(선언 단계)하지만 초기화 단계는 변수 선언문에 도달했을 때 실행 되기 때문에 
    초기화 이전에 변수에 접근하면 참조 에러(ReferenceError)가 발생한다.
    
    

    ❔ 그렇다면 어떤 이유로 es6에 추가된 const,let은 선언, 초기화 단계를 구분했을까?

    var는 중복 선언이 가능하기 때문이다. 해당 부분이 왜 문제가 되는지는 코드를 봐보도록 하자

    var PersonName = '김아무개';
    console.log(`그의 이름은 ${PersonName}입니다.`); //김아무개
    var PersonName = '김진짜진짜';
    console.log(`그의 이름은 ${PersonName}입니다.`); //김진짜진짜

    위와 같이 짧은 코드만 보더라도 내가 "김아무개"에 대한 정보를 가진 변수를 사용하고 싶어도 중복된 변수명으로 "김진짜진짜"가 다시 선언되었기 때문에 "김아무개"에 대한 정보를 다시 가져올 수 없게된다. 만약 수십에서 수백줄이 되는 코드에서 해당 문제가 발생하면 해결하기 위해 꽤나 오랜 시간이 걸릴 수 있다.
    하지만 let,const를 사용하면 같은 변수명을 중복해서 사용할 수 없기 때문에 해당 변수 선언을 권장하는 것이다.

2. 스코프

• 변수 이름, 함수 이름과 같이 식별자가 참조할 수 있는 유효 범위를 뜻한다.

종류

• 함수 레벨 스코프
  • 함수에 의해서만 스코프가 형성됨
  • var 키워드로 선언된 변수
• 블록 레벨 스코프
  • 코드 블록 단위의 스코프가 형성됨
  • let, const 키워드로 선언된 변수

변수를 참조할 때 JS엔진은 자신의 스코프에 변수가 없으면 상위 스코프 방향으로 이동하며 선언된 변수를 검색한다. 이를 스코프 체인이라고 한다.

예를 들어보자

var x = 1;

function foo() {
  var x = 10;
  bar();
}

function bar() {
  console.log(x);
}

foo(); // ?
bar(); // ?

해당 코드를 보았을 때 JS가 동적 스코프를 따르는지 렉시컬 스코프를 따르는지 잘 모른다면 결과 값을 동적 스코프를 따르는 10, 1로 예상했을 것이다. 하지만 JS는 렉시컬 스코프를 따르기 때문에 결과 값은 1,1이 나온다. 이때 렉시컬 스코프란 무엇일까?

렉시컬 스코프는 정적 스코프로 상위 스코프가 동적으로 변하지 않고 함수 정의가 평가 되는 시점에 상위 스코프가 정적으로 결정된다. 즉, JS의 상위 스코프는 어디서 호출했는지가 아닌 어디서 정의했는지에 따라 결정된다. 즉 bar는 전역 스코프를 기억하고 있다가 x를 전역에서 찾게 되기 때문에 결과 값이 1,1이 된다.

To be continued...