자바스크립트에서 호이스팅
호이스팅은 변수 및 함수 선언을 포함 범위(전역 범위 또는 함수 범위)의 맨 위로 이동(또는 "호이스팅")하는 동작입니다. 코드가 실행됩니다. 즉, 코드에서 실제로 선언되기 전에 변수와 함수를 사용할 수 있습니다.
변수 호이스팅
var
- var로 선언된 변수는 해당 범위의 맨 위로 끌어올려지지만 해당 값은 할당이 발생하는 코드 지점까지 초기화되지 않습니다.
console.log(x); // undefined
var x = 5;
console.log(x); // 5
로그인 후 복사
하자와 const
- let 및 const로 선언된 변수도 호이스팅되지만 선언에 도달할 때까지 "임시적 데드존"에 배치됩니다. 선언되기 전에 액세스하면 ReferenceError가 발생합니다.
console.log(y); // ReferenceError: Cannot access 'y' before initialization
let y = 10;
// block scope
{
let x = 5;
}
console.log(x); // ReferenceError: x is not defined
로그인 후 복사
함수 호이스팅
전통적인 기능
- 함수 선언은 완전히 호이스팅됩니다. 즉, 선언과 함수 본문이 모두 범위의 맨 위로 이동됩니다. 이를 통해 코드에서 함수를 선언하기 전에 함수를 호출할 수 있습니다.
sayHello(); // "Hello!"
function sayHello() {
console.log("Hello!");
}
로그인 후 복사
- 반대로 함수 표현식(함수가 변수에 할당된 경우)은 변수로만 호이스팅되므로 변수가 초기화되기 전에 호출하면 정의되지 않음 또는 TypeError가 발생합니다.
greet(); // TypeError: greet is not a function
var greet = function () {
console.log("Hi!");
};
greet(); // ReferenceError: Cannot access 'one' before initialization
let greet = function () {
console.log("Hi!");
};
로그인 후 복사
화살표 기능
- 반대로 함수 표현식(함수가 변수에 할당된 경우)은 변수로만 호이스팅되므로 변수가 초기화되기 전에 호출하면 정의되지 않음 또는 TypeError가 발생합니다.
greet(); // TypeError: greet is not a function
var greet = () => {
console.log("Hi!");
};
greet(); // ReferenceError: Cannot access 'one' before initialization
let greet = function () {
console.log("Hi!");
};
로그인 후 복사
시간적 데드존(TDZ)
let 및 const를 사용하여 선언된 변수에는 TDZ(시간적 데드존)가 존재합니다. 왜냐하면 JavaScript는 변수가 선언되고 초기화되기 전에 이러한 변수에 액세스하지 못하도록 설계되었기 때문입니다.
var와 let, const가 호이스팅에서 다르게 동작하는 이유
- 자바스크립트의 역사적 진화 때문입니다.
- 처음에 JavaScript는 개발자가 아닌 사용자를 위해 설계되었으며 JavaScript의 주요 핵심 용도는 웹페이지에 작은 대화형 요소를 추가하는 것이었습니다.
- 따라서 var는 기능적 범위만 지원합니다. 또 당시에는 블록스코프가 없었습니다.
- 그러나 나중에 JavaScript가 발전하면서 var를 사용하고 버그를 수정하는 것이 더욱 복잡해졌습니다.
- 그래서 JavaScript가 다른 최신 언어와 경쟁할 수 있도록 하기 위해 let, const, 화살표 함수, ES6 메소드 등과 같은 더 많은 기능이 추가되었습니다.
var가 let 및 const처럼 업데이트되지 않는 이유
- 이전 버전과의 호환성 때문입니다.
- 당시 JavaScript는 많은 기업에서 널리 사용되었으므로 기존 기능을 업데이트하거나 변경하면 코드베이스가 손상될 수 있었습니다.
- 그래서 최신 기능이 개별적으로 추가되었습니다.
일반적인 면접 질문
- 자바스크립트에서 호이스팅이란 무엇인가요?
- JavaScript에서 호이스팅되는 것과 그렇지 않은 것은 무엇입니까?
- 호이스팅과 관련하여 var, let, const의 차이점은 무엇인가요?
- 자바스크립트에서 시간적 데드존(TDZ)이란 무엇인가요?
- 함수 선언과 함수 표현식을 사용한 호이스팅을 설명할 수 있나요?
- ES6 모듈에서 호이스팅이란 무엇인가요?
- 실제 코드에서 호이스팅에 의존하지 말아야 하는 이유는 무엇입니까?
요약
- 호이스팅은 컴파일 단계에서 변수 및 함수 선언이 해당 범위의 맨 위로 이동되는 JavaScript의 기본 동작입니다.
- 호이스팅은 var 및 기존 함수로 선언된 변수에만 작동하며 let, const 및 arrow 함수에는 작동하지 않습니다.
- 함수 선언만 호이스팅되므로 기존 함수는 작동하지만 함수를 변수에 할당하면 정의할 때까지 호출할 수 없습니다.
- var 및 기존 함수는 호이스팅되고 let, const, arrow 함수는 호이스팅되지 않는 이유는 초기에는 작은 UI 상호작용에 주로 JavaScript를 사용했기 때문입니다.
- 그러나 이후 기업에서 애플리케이션을 구축하는 데 JavaScript가 널리 사용되면서 전역 범위만으로 버그를 수정하는 것이 더 어려워졌습니다.
- 그래서 향후 업데이트에서는 더 많은 보안 문제가 해결되었습니다.
- 게다가 기존 기능을 업데이트하면 코드베이스가 깨질 수 있으므로 새로운 기능을 별도로 추가했습니다.
위 내용은 JavaScript의 호이스팅 이해: 종합 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!