꼬리에꼬리를무는질문요정 🧞‍♂️_ 나라리야에게 물어봐!_01

꼬리에 꼬리를 무는 질문요정🧞‍♂️ 나라리야 등장!
반가워해주세요 😝 ( 리액션에 목마른 1인 댓글은 언제나 환영! )
거두절미 하고 준비한 질문의 답변을 정성껏 준비했다! (하핫) 너도 이것만 알면 프론트엔드 정복할 수 있쒀!

1. 스코프에 대해서 설명해줘요

식별자에 대한 유효 범위 즉, 다른 코드가 변수 자신을 참조할 수 있는 범위를 말한다.
자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙이다. (아무거나 가져다 쓸 수 없자나여?🤔 )
변수은 자신이 선언된 위치에 의해 자신이 유효한 범위 즉 다른 코드가 변수자신을 참조할 수 있는 범위가 결정되는데 이 유효한 범위를 스코프라고 한다.

1-1. 렉시컬 스코프는 뭐에요?
자바스크립트는 렉시컬 스코프를 따르는데 함수를 어디서 호출했는지가 아니라 함수를 어디서 정의했는지에 따라 상위 스코프를 결정하게됩니다. 함수가 호출된 위치는 상위 스코프 결정에 어떠한 영향도 주지 않죠! 즉, 함수의 상위 스코프는 언제나 자신이 정의된 스코프 입니다.

예시)

var x = 1; // x변수의 값이 1로 할당되어있다

function foo() {
  var x = 10;
  bar();  // foo함수를 호출하게되면 bar함수가 실행되게 되는데 
}         // foo의 함수가 반환하는 값은 bar 함수가 실행될때의 값이기 때문에 아무리 foo함수안에
          // 10이라는 값을 가진 변수가 선언되어있어도 아무런 영향을 주지 않는다. (이게 렉시컬스코프)

function bar() {
  console.log(x);
} // bar함수가 실행되면 log의 매개변수로 x의 값이 1이 할당되어 출력되게된다. 

foo(); // 1
bar(); // 1

2. 클로저에 대해서 설명해줘요

함수와 함수가 선언된 어휘적 환경의 조합,
이 때의 환경이란 클로저가 생성된 시점의 유효범위 내에 있는 모든 지역 변수로 구성된다.
자바스크립트에선 함수를 리턴할 때 클로저를 형성하기 때문에 클로저가 만들어질 당시의 함수와 함수가 선언된 당시 관계되는 코드의 참조를 유지하게 됩니다

2-1 설명만으론 이해하기 어려워요~ 예시를 들어주세요!

예시)

function makeFunc() {  //makeFunc함수가 실행되면 displayName함수가 실행되어 리턴되는데
  var name = "Mozilla"; //이 때 displayName함수가 name변수에 접근할 수 없을 것이라고 생각하는데 
  function displayName() { // 자바스크립트에선 함수를리턴할때 클로저를 형성하기 때문에 당시에 관계되는 코드의 참조를 유지하게된다. 
    alert(name);
  }
  return displayName;
}

var myFunc = makeFunc();
//myFunc변수에 makeFunc에 할당되며 실행이 종료되었지만
//유효범위의 어휘적 환경을 유지

myFunc(); // 최종적으로 myFunc를 호출하게되면 클로저가 생성될 당시의 환경를 기억하고있기 때문에 alert창에 Mozilla를 띄워 출력된다. 
//리턴된 displayName 함수를 실행(name 변수에 접근)

위에서 본 예시 처럼 자바스크립트 클로저는 독립적인 변수(로컬로 사용되지만 둘러싼 범위에서 정의된 변수)를 참조하는 함수입니다. 그리고 이 함수들은 생성될 당시의 환경을 기억합니다.

3. 변수 선언, 초기화, 할당의 차이점에 대해서 설명해줘요

변수선언은 데이터를 담아두기 위한 공간인 변수를 명시된 식별자(변수명)을 등록하여 자바스크립트 엔진에 변수의 존재를 알리는 것이야.

한마디로 변수명으로 선언해놓으면 자바스크립트에서 원하는 데이터를 변수명을 통해 가져갈 수 있지! 그러려면 자바스크립트에 알려줘야하니까 변수명(식별자)를 먼저 선언해주는거지!

초기화는 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화 하게되지

아직 아무값도 할당되어있지 않기 때문에 변수를 호출해도 값이 없어서 undefined가 출력될 것이야

할당은 할당연산자(=)을 통해 선언된 변수에 값을 넣어주어 데이터를 저장하게 되는 것이지

예시)

let nara  // 변수선언
console.log(nara) //초기화, 할당된 값이 없기 때문에 undefined가 리턴된다. 
nara = 10;
console.log(nara) //할당, 변수에 할당된 10이라는 값이 출력된다. 

4. 호이스팅과 Temporal Dead Zone(TDZ)이 어떻게 연관되어 있나요?

직역을 하자면 hoisting은 '끌어올리다' TDZ는 '임시로 죽어 있는 공간' 이라는 뜻인데
호이스팅은 자바스크립트 엔진 동작 과정 중 일부분을 쉽게 이해하기위한 가상의 개념이고 TDZ는 선언전에 변수를 사용하는 것을 비허용하는 개념상의 공간입니다.
쉽게 말해서 호이스팅은 자바스크립트 엔진 동작을 이해하기 쉽게 만들어진 개념으로 변수 및 함수 선언이 유효한 스코프 최상단으로 끌어올려진 후에 코드를 실행하는것이고 ES6버전에 나온 let과 const의 경우 식별자가 호이스팅 후에 실제 코드에서 선언되기 전까지 TDZ에 있기 때문에 let,const선언 된 곳 이전에는 해당 변수에 참조할 수 없게끔 되어있습니다~

자자! 아쉽지만 오늘은 여기까지 내일 또 만나자구!
다음에 더 알찬 질문으로 찾아오겠어!
그럼 Adios!