JavaScript 변수 수명 주기 설명

여기에 JavaScript 변수 수명 주기에 대한 자기 노트를 작성했습니다. 이것이 당신에게 빠른 요약이 되기를 바랍니다.

아래 코드 블록을 살펴보겠습니다.

sayMyName('Rasika')

function sayMyName(userName) {
console.log(`Hello ${userName}`);
}

단순히 이 함수 식별자가 호이스트됩니다. 이는 범위 시작 부분에서 생성된 모든 식별자를 의미합니다. 그러나 다른 것이 있습니다. 그러나 관련 범위가 실행되기 시작할 때 sayMyName가 값을 얻었다고 생각한 적이 있습니까?
function hoisting 때문입니다. 함수의 이름 식별자가 자신이 속한 범위의 맨 위에 등록될 때마다 그 순간도 초기화됩니다.

Note: This will happen if you declare a function with function declaration. Not for the function assign to variable.

If you try below code you will get ReferenceError that saying Cannot access ‘sayMyName’ before initialization

sayMyName();
const sayMyName = (userName) => {
console.log(`Hello ${userName}`);
};

var 대신 const를 사용하면 TypeError 가 표시됩니다.

TypeError: sayMyName is not a function

또한 여기에서 var 시나리오를 고려하고 있습니다. 좋아, 그 오류sayMyName에는 값이 있지만 함수 참조가 아닙니다. 이것이 오류 메시지에서 얻을 수 있는 것입니다.
function로 선언할 때마다 호이스트되어 함수 값을 자체로 초기화합니다.

function sayMyName(userName) { ... }

하지만…, var 변수를 정의하고 function 식을 할당하면 변수 값에 호이즈되어 undefined 할당됩니다. 할당이 발생한 런타임까지 함수 참조가 없습니다. (아래 코드 블록처럼)

var sayMyname = function sayMyName(userName) { ... }

Hoisting rule is, hoist the function declaration first, the hoist variables.

예를 들어 이 예를 고려하십시오.

myName = "Rasika";
sayMyName()


function sayMyName() {
console.log(`My name is ${myName}`);
}

var myName;

기본적으로는 이렇게 실행됩니다.

function sayMyName() {
console.log(`My name is ${myName}`);
}
var myName;
myName = "Rasika";
sayMyName()

그러나 let 또는 const를 사용하면 코드가 실행되지 않습니다. SyntaxError 를 던질 것입니다.

아래의 예를 고려하십시오.

const myFavoriteFruit = "Mango";

console.log(myFavoriteFruit);

myFavoriteFruit = "Ba na na"

여기에서 먼저 콘솔 출력을 얻은 다음 TypeError 를 얻습니다. 아닙니다 SyntaxError .

또한 for 루프에서 내부 변수는 범위 인스턴스당 한 번 선언됩니다. 재선언이 아닙니다.

for (let i = 0, i < 5, i++){
// in here i will be declare in five separate scope instances 
}

또한 이것은 for..in 및 for..of와 동일하게 작동합니다.

그러나 const 루프에서 for를 사용하면 첫 번째 반복 후에 실패합니다.

for (const i =0; i < 5 , i++) { // will give an error after 1st iteration }

그러나 const는 for..in 및 for..of 와 함께 작동합니다.

임시 데드 존

아래 코드 블록을 고려하십시오.

console.log(myFavoriteFruit);

let myFavoriteFruit = "Mango";

이것은 아래 오류를 제공합니다.

ReferenceError: Cannot access 'myFavoriteFruit' before initialization

따라서 let 또는 const 를 사용하는 경우 초기화 전에 변수를 사용할 수 없다는 결론에 도달할 수 있습니다. 기본적으로 이것을 TDZ(Temporal Dead Zone)라고 합니다.

Make sure that let and const also, hoist the variable.

그러나 자동으로 초기화되지 않습니다. 기본적으로 스코프의 최상위 변수를 자동 등록합니다.

범위의 맨 위에 변수를 정의하여 이 TDZ를 피할 수 있습니다.

참조:
The (Not So) Secret Lifecycle of Variables 나는 당신이 가서 이 기사를 확인하는 것이 좋습니다.

MDN - var

MDN - let

MDN - const

이와 관련하여 질문할 사항이 있으면 여기에 댓글을 남겨주세요. 또한 내 이해에 따라 이것을 썼습니다. 따라서 잘못된 점이 있으면 주저하지 말고 저를 수정하십시오. 정말 감사합니다.

오늘의 친구들을 위한 것입니다. 곧 봐요. 고맙습니다

커버image credit