> 웹 프론트엔드 > JS 튜토리얼 > JavaScript에서 호이스팅이란 무엇입니까?

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

Patricia Arquette
풀어 주다: 2025-01-14 22:30:48
원래의
579명이 탐색했습니다.

O que é Hoisting no JavaScript?

마술쇼를 준비하고 있다고 상상해 보세요. 시작하기 전에 마술사는 무대에서 사용할 모든 항목을 정리하고 카드, 토끼, 모자를 올바른 위치에 배치합니다. 이는 그가 혼란에 빠지지 않고 트릭을 수행하는 데 도움이 됩니다.

JavaScript에서는 코드를 작성할 때 비슷한 일이 발생합니다. 이 경우 "마법사"는 프로그램 실행을 시작하기 전에 몇 가지 사항을 구성하는 JavaScript입니다. 이러한 자동 구성을 호이스팅이라고 합니다.


호이스팅은 어떻게 작동하나요?

  1. 먼저 설정:
    JavaScript는 변수와 함수의 모든 선언을 가져와 코드 상단으로 "올라갑니다". 마치 "시작하기 전에 중요한 것을 모두 분리해서 헤매지 않도록 할게요."라고 말한 것 같습니다.

  2. 중요:
    할당된 값이 아닌 선언만 맨 위로 이동됩니다. 마치 "야, 이 마법 모자가 존재한다!"라고 말하는 것과 같지만, JavaScript는 코드에서 적시에 모자가 도착했을 때만 모자를 사용하는 방법만 알아냅니다.


간단한 예

이 코드 보기:

console.log(meuNome); // undefined
var meuNome = "Jonas";
console.log(meuNome); // Jonas
로그인 후 복사

처음에는 이상해 보입니다. JavaScript는 myName을 선언하기 전에 존재하는지 어떻게 알 수 있나요?

이런 일이 일어나는 이유는 그가 뒤에서 이런 짓을 하기 때문입니다.

var meuNome; // Declaração "subiu"
console.log(meuNome); // undefined
meuNome = "Jonas"; // Valor atribuído
console.log(meuNome); // Jonas
로그인 후 복사

즉, myName 변수 선언을 추가하지만 "Jonas" 값만 올바른 위치에 할당합니다.

letconst를 사용하여 호이스팅

이제 중요한 차이점이 있습니다. let 또는 const를 사용하는 경우 JavaScript는 선언하기 전에 변수를 사용할 수 없습니다.
확인해 보세요:

console.log(idade); // Erro: Cannot access 'idade' before initialization
let idade = 14;
로그인 후 복사

이는 letconst가 특수 영역에 "저장"되고 이를 선언한 후에만 사용할 수 있기 때문에 발생합니다.

함수를 이용한 호이스팅

JavaScript의 함수도 "상승"됩니다. 다음 예를 참조하세요.

cumprimentar();

function cumprimentar() {
  console.log("Olá!");
}
로그인 후 복사

선언하기 전에 함수를 호출해도 작동합니다! 이는 JavaScript가 전체 함수를 코드 상단으로 "등반"하기 때문에 발생합니다.

결론

호이스팅은 마치 JavaScript가 매우 조직적인 마술사인 것과 같습니다. 실행을 시작하기 전에 코드를 빠르게 살펴보고 모든 변수와 함수 선언을 분리한 다음에만 쇼가 시작됩니다.

하지만 기억하세요. 큰 힘에는 큰 책임이 따른다는 점을 기억하세요. 이해하지 못한 채 호이스팅을 사용하면 혼란이 발생할 수 있습니다. 따라서 코드를 더 명확하고 체계적으로 구성하려면 변수와 함수를 신중하게 선언하세요!

위 내용은 JavaScript에서 호이스팅이란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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