[JS] 스코프 체인과 호이스팅

세나정·2023년 6월 4일
0

스코프 체인?

현재 스코프에서 식별자를 검색할 때 상위스코프를 연쇄적으로 찾아나가는 방식

함수에서 어떤 값에 접근이 가능한가, 불가능한가

예전에는 함수가 기준이었다면 이제는 block 기준 (중괄호)
함수가 아닌데 블록을 갖고 있는 것들 (if, for, while 들도)

만약 다음과 같은 코드가 있고
함수의 스택을 기준이 아니라 함수의 선언을 기준으로 한다면,

다음과 같은 코드는 이렇게 표기가 될 수 있음 (연결이라 체인)

렉시컬 스코프(Lexical Scope)

*선언 기준

항상 들여쓰기의 최상단 (왼쪽 위)에는 anonymous가 있다고 생각하면 되기 때문

코드를 쓰면 선언이라는 건, 스코프라는 건 변하지 않음 그래서 내 부모 함수가 누구인지 쉽게 찾을 수 있음

그래서 이렇게 코드의 선언을 헀을 때 관계가 바뀌지 않는 것렉시컬 스코프(Lexical Scope) 라고 함.

즉, 렉시컬 스코프는 함수를 어디서 "선언"했는지에 따라 상위 스코프가 결정되는 것을 의미

그렇기 때문에 함수의 선언들을 보고 분석을 하면 됨

예를 들어, a -> anony 같은 경우를 보자
a에서 b의 "선언"이 있나보면 선언이 되어 있지 않다.
그러면 a가 아닌 그 다음 anony에서 b의 "선언"이있나 보면 됨. (들여쓰기 기준)

-> b의 선언이 존재하지 않으므로 b는 not define 라는 에러 값이 나오는 것


TDZ (temporal Dead Zone) 란?

선언보다 먼저 변수에 접근하는 것 -> 이런 상황을 그냥 안 만들면 됨

함수들은 자체적으로 호이스팅이 가능


함수 선언문은 호이스팅에 의해 스코프 상단으로 옮겨지지만
할당을 하는 함수 표현식 같은 경우에는 호이스팅 되지 않음 const z = () => {} 같은 화살표 함수도 마찬가지

호이스팅

var함수는 선언시 호이스팅에 따라 변수의 선언만이 먼저 올라감

(var y)
var y = 'hi';

-> var (베리어블)을 쓰면 안 되는 이유 : 코드를 분석할 때 매우 헷갈리게 만들고 
호이스팅 때문에 선언부분만 올라가기 때문에 직관적이지가 않기 때문

요약 : function 선언 (함수전체), var는 (선언만) 호이스팅 되기 때문에 위로 올라감

웬만하면 화살표 함수를 쓰는데 그래도 함수 선언문은 전체가 올라가기 떄문에 좀 괜찮음, var는 쓰지마셈.

예시

그러면 이 같은 경우엔 어떻게 z에 접근이 가능하느냐?
이건 스코프를 생각했을 때 a안에 z가 있는 함수 안에서 발생하는 것이라 괜찮음

하지만
a();
const z = 'z1' 은 에러가 발생

profile
압도적인 인풋을 넣는다면 불가능한 것은 없다. 🔥

0개의 댓글