230328

📌Hoisting 이란? TDZ란?

• Hoisting이란?
  • 코드가 실행하기 전 변수,함수 선언이 해당 스코프의 최상단으로 끌어 올려진 것 같은 현상.
  • 자바스크립트 엔진은 코드를 실행하기 전 실행 가능한 코드를 형상화하고 구분하는 과정을 거친다.
  • 이 과정에서 자바스크립트 엔진은 코드 실행을 위한 모든 선언들을 스코프에 등록(메모리에 저장)한다.
  • Hoisting 대상에는 변수 선언과 함수 선언 두 가지가 있다.
• 변수 선언(var, let, const 키워드)
  • 자바스크립트의 모든 선언에는 호이스팅이 일어남
  • var 키워드로 선언된 변수와는 달리 let 키워드로 선언된 변수를 선언문 이전에 참조하면 참조 에러 (ReferenceError)가 발생함.
  • 이는 let 키워드로 선언된 변수는 스코프의 시작에서 변수의 선언까지 TDZ(Temporal Dead Zone)에 빠지기 때문.
  • 여기서 중요한 점은 선언에서만 호이스팅이 일어난다는 점이고, 선언에서만 호이스팅이 일어나기 때문에 값을 할당하더라도 할당된 값은 호이스팅이 일어나지 않는다.
  • 참조 에러가 나는 이유는 var 키워드는 선언과 함께 undefined로 초기화되어 메모리에 저장되는데 let과 const는 초기화되지 않은 상태로 선언만 메모리에 저장이 되기 때문에 초기화 되지 않으면 변수를 참조할 수 없으므로 에러가 나는 것이다.
  • 즉 let과 const도 호이스팅이 되는데 아무런 값이 할당이 되어있지 않기 때문에 에러가 나는 것!
• 함수 선언
  • 함수 선언의 경우 선언 단계, 초기화 단계, 할당 단계를 동시에 진행해 TDZ가 존재하지 않음.
  • 함수는 전체 함수에 대한 참조와 함께 저장됨
   

 

❗ 자바스크립트에서 어떻게 변수를 생성할까?

  -> 자바스크립트에서는 var, let, const 키워드를 붙여 변수를 생성하는데 이는 기본적으로 3단계를 거쳐 실행되지만 순서가 조금씩 다름

• 자바스크립트 변수 처리 단계
  1. 선언 단계
     • 변수 객체를 생성하고 변수 등록
     • 스코프는 해당 변수 객체를 참조
  2. 초기화 단계
     • 변수 객체에 등록된 변수를 메모리에 할당
     • 변수는 undefined로 초기화됨
  3. 할당 단계
     • undefined로 초기화된 변수에 실제 값을 할당.
• let, const
  • let은 선언 단계와 초기화 단계가 분리되어 있고 그 사이에 TDZ가 존재함
  • TDZ에 접근할 경우 ReferenceEroor가 발생.
  • const는 let과 달이 선언 단계와 초기화 단계가 동시에 실행되지만 그 전에 TDZ가 생성되어 TDZ에 접근 할 경우 ReferenceError가 발생.

• var
  • let, const와 달리 TDZ가 존재하지 않음
  • 선언 단계와 초기화 단계가 동시에 진행되며 선언과 동시에 undefined로 초기화 됨.
  • 따라서 변수 선언문 이전에 변수에 접근해도 스코프에 변수가 존재하기 때문에 에러가 발생하지 않는다.
  • 다만 undefined를 반환하고 이후에 변수 할당문에 도달하면 비로소 값이 할당됨.
   

📍 var와 let,const의 차이는 TDZ의 유무!

 

• TDZ란?
  • Temporal Dead Zone의 약자로, 일시적 사각지대.
  • 스코프 혹은 라이프 사이클의 시작지점부터 초기화 단계 직전까지의 구간.
• TDZ에 영향을 받는 구문
  • const 변수
  • let 변수
  • class 구문
  • constructor() 내부의 super()
  • 기본 함수 매개변수

💡참고

https://hanamon.kr/javascript-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85%EC%9D%B4%EB%9E%80-hoisting/

[JavaScript] 호이스팅(Hoisting)이란? - 하나몬

https://yoo11052.tistory.com/151

[JavaScript] 호이스팅이란

https://noah0316.github.io/JavaScript/2020-11-04-temporal-dead-zone,-hoisting%EC%97%90-%EA%B4%80%ED%95%98%EC%97%AC/

Temporal Dead Zone, Hoisting에 관하여

 

---

📌parameter와 argument의 차이에 대해 설명해주세요.

• Parameter (매개변수)
  • 함수 혹은 메소드 정의에서 나열되는 변수 명
  • 함수의 정의에서 잔달받은 인수를 함수 내부로 전달하기 위해 사용하는 변수
  • 형식 매개 변수 (함수에서 정의된 변수)와 실제 매개 변수 (인자(인수)값을 변수로 넘겨줄 때)로 나눈다
• Argument (인수)
  • 함수 혹은 메소드를 호출할 때 전달 혹은 입력되는 실제 값
  • 함수가 호출될 때 넘기는 변수 값
  • 전달인자 또는 인자라고도 함