[ S.A ] 호이스팅 과 TDZ

정인성·2022년 5월 20일
0

S.A

목록 보기
3/4
post-thumbnail

스코프,호이스팅,TDZ

스코프( scope ) : 변수에 접근할 수 있는 범위 ( 전역변수와 지역변수 )
호이스팅 : 코드환경이 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것 ( var와 let 차이 )

  • var 함수만 지연변수로 호이스팅이 되고 나머지는 다 전역변수로 올려버림 ( for문 if문 )
  • let : TDZ ( 일시적으로 죽은 지역 ) 를 만들어서 에러가 방어한다 아래 코드를 let에 입장에서 해석
    • a가 호이스팅으로 기억된건 알지만 a선언문이 나오기 전까지는 너는 a에 접근할수 없어 일시적으로 너는 죽은 Zone ( TDZ )
console.log(a)
a = 1
var a 		// 선언전에 a를 1로 선언 했는데 오류가 나지 않고 undefined라는 값을 넣어 버림
console.log(a)	// 결과 값이 undefined 와 1 로 되는데 호이스팅시 선언과 초기화를 같이 시킴

함수 선언문과 함수 표현식에서 호이스팅 방식의 차이

함수 선언식 : 함수 전체를 호이스팅 한다 . 정의된 범위의 맨위로 호이스팅 되서 함수 선언 전에 함수를 사용가능
함수 표현식 : 별도의 변수에 할당하게 되는데, 변수는 선언부와 할당부를 나누어 호이스팅 하게 된다. 선언부만 호이스팅하게 됩니다

let,const,var,function

  • var : 변수 선언 방식에 있어 큰 단점을 가지고 있다(같은 변수를 한번 더 선언해도 에러가 나오지 않는다)
  • const : 변수 재선언 , 변수 재할당 모두 불가능 ( 불변 )
  • let : 변수에 재할당이 가능하다
  • function : 작업을 수행하거나 값을 계산하는 문장 집합

실행 컨텍스트와 콜 스택

실행 컨텍스트와 콜스텍 : 코드에 제공할 환경 정보들을 모아놓은 객체로서, 동일한 범위에 있는 코드를 실행할때 필요한 환경 정보를 모아 컨텍스트를 구성하고 이를 호출 스택 (콜 스텍 ) 에 쌓아서 실행 순서를 보장한다

스코프 체인, 변수 은닉화

  • 스코프 체인
    해당 코드의 스코프 안에 있는 변수를 정의하는 객체의 체인,리스트이다
    자바스크립트가 변수 값을 얻으려고 할때 스코프 체인에서 변수를 찾는다
    함수가 정의될 때, 함수는 스코프 체인을 저장한다
    함수가 호출될 때, 함수는 지역 변수를 보관하는 새로운 객체를 만들고 그 객체를 기존에 만들어둔 스코프 체인에 추가한다.

  • 변수 은닉화 ( 클로저 )
    은닉화 : 직접적으로 변경되면 안 되는 변수에 대한 접근을 막는것을 은닉화

(function () {
  var a = 'a';
})();

console.log(a); // a is not defined

클로저를 통한 은닉화

 function a(){
  let temp = 'a' 
  
  return temp;
} 

// console.log(temp)  error: temp is not defined
const result = a()
console.log(result); //a

설명 ) 함수 내부적으로 선언된 temp 에는 직접적으로 접근을 할수 없다 그래서 함수 a를 실행시켜
그 값을 result라는 변수에 담아 클로저를 생성함으로써 temp의 값에 접근이 가능합니다

profile
2022.05.09 START

0개의 댓글