JavaScript에서 호이스팅이란 무엇입니까?

호이스팅은 실행 전에 선언이 이루어지는 JavaScript의 프로세스를 나타냅니다. 변수 및 함수 선언이 먼저 처리됩니다. 결과적으로, 변수를 선언하기 전에 참조하더라도 오류가 발생하지 않고 대신 undefed를 반환하게 됩니다. 함수 선언의 경우 전체 함수가 호이스팅됩니다. 즉, 코드에 정의되기 전에 사용할 수 있습니다. 이 프로세스는 실행이 시작되기 전에 선언을 스택에 배치합니다.

더 간단하게 말하면:

• var로 선언된 변수는 호이스팅 중에 정의되지 않은 상태로 초기화됩니다.

• 함수 선언은 완전히 끌어올려져 코드에 작성되기 전에 호출할 수 있습니다.

• 호이스팅 프로세스는 코드에서의 위치에 관계없이 이러한 선언이 실행 스택에서 인식되도록 보장합니다.

할당이 아닌 선언만 호이스팅된다는 점에 유의하는 것이 중요합니다. 과제는 작성한 장소와 동일하게 유지됩니다.

참고: 호이스팅 중에 코드가 맨 위로 이동한다고 말하는 사람들은 실제로 잘못된 것입니다. 코드는 위로 이동하지 않습니다.

예:

console.log(myVariable); // undefined      
var myVariable = 10;

이 코드는 두 가지 작업을 동시에 수행합니다. 먼저 myVariable 변수를 선언하고 이를 범위에 끌어올리지만 해당 값은 여전히 ​​정의되지 않습니다. 따라서 console.log 명령은 초기화되지 않은 값을 정의되지 않음으로 표시합니다. 그 후 myVariable에 값 10이 할당됩니다.

단, 변경하려고 하면 이전 선언에는 아무런 영향이 없습니다. 예를 들어:

console.log(myVariable); // ReferenceError: myVariable is not defined      
myVariable = 10;

여기에서는 myVariable 변수를 선언하지 않았으므로 변경을 시도하기 전에 ReferenceError가 발생합니다.

요약하자면, JavaScript는 먼저 모든 코드를 읽은 다음 할당을 원래 위치에 유지하면서 모든 선언을 밖으로 끌어올립니다. 이 프로세스를 호이스팅이라고 합니다.

var 및 let도 호이스팅됩니다.

var와 let은 모두 JavaScript에서 호이스팅되지만 동작이 약간 다릅니다.

변수:

var를 사용하여 변수를 선언하면 해당 선언이 범위 밖으로 끌어올려지고 선언 전에 변수에 액세스할 수 있지만 값이 할당될 때까지 정의되지 않은 값을 갖게 됩니다.

예:

console.log(myVariable); // undefined
var myVariable = 10;

위 코드에서 var myVariable 선언은 범위 밖으로 호이스팅되지만 myVariable = 10 할당은 그대로 유지됩니다. 따라서 변수가 존재하지만 아직 값이 할당되지 않았기 때문에 console.log 문은 정의되지 않음을 출력합니다.

허락하다:

반면, let을 사용하여 변수를 선언하면 호이스팅 동작이 약간 다릅니다. 변수 선언은 호이스팅되지만 선언 전에는 변수에 액세스할 수 없습니다. 이는 "시간적 데드존"으로 알려져 있습니다. 선언하기 전에 let 변수에 액세스하려고 하면 ReferenceError가 발생합니다.

예:

console.log(myVariable); // ReferenceError: myVariable is not defined
let myVariable = 10;

이 경우 let 선언은 호이스팅되지만 선언 전에는 변수에 액세스할 수 없습니다. 따라서 변수가 아직 정의되지 않았기 때문에 console.logstatement에서 ReferenceError가 발생합니다.

여기서 기본적으로 let의 경우, 끌어올려도 변수의 값은 정의되지 않은 상태로 유지됩니다. 해당 변수를 저장할 메모리 공간이 없기 때문입니다. 이로 인해 해당 주소를 참조할 수 없습니다. 메모리에 myVariable = 10의 주소가 없기 때문에 참조 오류가 발생합니다.

const:

const 키워드를 사용하면 값이 할당되면 다시 할당할 수 없는 변수인 상수를 만들 수 있습니다.

예:1

const PI = 3.142;
PI = 22/7; // Attempt to reassign the value of PI
console.log(PI); // Output: TypeError: Assignment to constant variable

이 예에서는 PI를 초기 값이 3.142인 상수로 정의합니다. PI에 새 값을 재할당하려고 하면 상수를 재할당할 수 없기 때문에 TypeError가 발생합니다.

예:2

const PI;
console.log(PI); // Output: SyntaxError: Missing initializer in const declaration
PI = 3.142;

이 경우 초기화하지 않고 상수 PI를 선언합니다. 이 코드는 상수를 동시에 선언하고 초기화해야 하기 때문에 SyntaxError를 발생시킵니다.

예:3

function getCircumference(radius) {
  console.log(circumference);
  circumference = PI * radius * 2;
  const PI = 22/7;
}
getCircumference(2); // ReferenceError: circumference is not defined

여기서 getCircumference 함수 내에서 선언 전에 원주에 액세스하려고 합니다. 변수가 아직 정의되지 않았기 때문에 ReferenceError가 발생합니다.

const를 사용할 경우에는 변수를 선언하고 초기화한 후 사용해야 합니다.

전반적으로 var와 let은 모두 JavaScript에서 호이스팅되지만 이들의 동작과 임시 데드존 개념은 let 변수에만 적용됩니다. const는 일단 초기화되면 재할당할 수 없는 상수를 생성합니다.

선언되지 않은 모든 변수는 전역 변수입니다.

function hoisted() {
a = 20;
var b = 100;
}
hoisted();
console.log(a); // 20
// can be accessed as a global variable outside the hoisted() function.

console.log(b);
// As it is declared, it is bound within the bounds of the hoisted() function. We cannot print it outside the hoisted() function.
output: ReferenceError: b is not defined

함수 범위 변수

hoist() 함수 범위에서 var 메시지 변수 선언이 함수의 맨 위로 이동하는 것을 볼 수 있습니다.
이 문제를 방지하려면 변수를 사용하기 전에 변수를 선언해야 합니다.

제공한 두 예 모두에서 출력은 정의되지 않습니다.

예:1

function hoist() {
  console.log(message);
  var message = 'Hoisting is all the rage!';
}
hoist(); // Output: undefined

예:2

function hoist() {
  var message;
  console.log(message);
  message = 'Hoisting is all the rage!';
}

hoist(); // Output: undefined

두 경우 모두 변수가 해당 범위의 맨 위로 끌어올려지기 때문에 출력이 정의되지 않지만 나중에 코드의 원래 순서대로 할당이 발생합니다.

함수 표현식

함수 표현식은 호이스팅되지 않으며 표현식이 함수가 아닌 변수로 처리되기 때문에 TypeError가 발생합니다.

expression(); // Output: "TypeError: expression is not a function
var expression = function() {
  console.log('Will this work?');
};

엄격 모드

이름에서 알 수 있듯이 변수가 선언되기 전에는 변수 사용을 허용하지 않는 제한된 JavaScript 변형입니다. 엄격 모드에서 코드 실행:

• 일부 자동 JavaScript 오류를 명시적 발생 오류로 변경하여 제거합니다.

• JavaScript 엔진이 최적화를 수행하기 어렵게 만드는 실수를 수정합니다.

• 변수 선언을 놓칠 수 있습니다. 참조 오류가 발생하여 중단된 strict를 사용하세요.
  

'use strict';

console.log(hoist); // Output: ReferenceError: hoist is not defined
hoist = 'Hoisted';

결론

변수와 함수를 선언할 때 자바스크립트에서 호이스팅을 이해하는 것이 중요합니다. 호이스팅을 설명하면 자바스크립트 코드가 실제로 어떻게 처리되는지 이해할 수 있을 것입니다.