> 웹 프론트엔드 > JS 튜토리얼 > JavaScript의 호이스팅 이해: 종합 가이드

JavaScript의 호이스팅 이해: 종합 가이드

Linda Hamilton
풀어 주다: 2024-10-17 06:26:02
원래의
687명이 탐색했습니다.

Understanding Hoisting in JavaScript: A Comprehensive Guide

자바스크립트에서 호이스팅

호이스팅은 변수 및 함수 선언포함 범위(전역 범위 또는 함수 범위)의 맨 위로 이동(또는 "호이스팅")하는 동작입니다. 코드가 실행됩니다. 즉, 코드에서 실제로 선언되기 전에 변수와 함수를 사용할 수 있습니다.

변수 호이스팅

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿