스코프 체인 개념정리

민범기·2022년 3월 23일
0

코드캠프 수업 시간에 스코프 체인에 대한 JS 수업이 있었다.
기존에 호이스팅과 스코프 체인에 대한 개념을 알고 있었지만,좀더 정확하게 알고 싶어서 다시 한번 공부를 진행했다.
내가 의문이 들었던 코드는 아래와 같다.

 var a = 1;
    function outer() {
      function inner() {
        console.log("inner내부", a);
        var a = 3;
      }
      inner();
      console.log("outter내부", a);
    }
    outer();
    console.log("outer외부", a);

전체적인 흐름을 한번 살펴보자.
1.제일 첫번째의 a =1은 전역으로 제일먼저 선언 되어진다.
2.outer 함수가 실행되면서 콜스택에 쌓인다.
3.inner 함수가 실해되면서 콜스택에 쌓인다.
4.스택의 후입선출 특성으로 inner() 부터 실행된다.

여기서! 이해가 안됬던 부분은 이미 전역으로 a 라는 변수에 1이 찍혀있는데
왜 inner내부 a의 콘솔은 undefined가 뜰까??? 1이 떠야 되는거 아닌가?? 라는 생각이였다..

조금 생각을 해보면 자바스크립트는 변수를 선언하는 순간 호이스팅을 적용시킨다.
자바스크립트는 해당 스코프 안에서 원하는 변수를 찾고 만약에 없다면 체이닝 처럼 그 위쪽의 자신을 감싸고 있는 상위 함수에 선언되어 있는 변수를 찾아간다.
하지만 inner함수 안에는 var a = 3; 이라는 변수를 선언했고 처음에는 a라는 값을 찾지 못하여 undefined를 출력하고 그 후에 바로 var a = 3이라는 선언문을 찾았기 때문에 더이상 a값을 찾으러 올라가지 않는것이다! 이미 자신은 inner 함수안에 a라는 값에 3이라는 숫자를 넣어주었기 때문에 더이상 EC가 발생하지 않는것!

profile
프론트엔드 개발 지망생 민범기입니다^^

0개의 댓글