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

여러분, 안녕하세요!
이번 포스팅에서는 자바스크립트의 Hoisting 개념에 대해 알아보겠습니다. 호이스팅에 대해 알아야 할 모든 것과 알아야 할 중요한 이유를 살펴보겠습니다. 나중에 다시 방문할 수 있도록 이 페이지를 북마크하는 것을 잊지 마십시오.

일반적인 의미

단어의 의미 영어로 hoisting은 "로프와 도르래를 사용하여 (무엇이든) 들어 올리는 것"을 의미합니다.

다른 말로 하면 우리는 정상에 무언가를 가져오고 있다고 말할 수 있습니다. 이제 Javascript의 관점에서 이야기해 보겠습니다. "변수 선언을 맨 위로 올리기"는 변수 선언을 맨 위로 또는 변수 사용 전에 가져오는 프로세스를 의미합니다.

그렇다면 호이스팅이란 무엇일까요?

호이스팅은 선언을 맨 위로 옮기는 JavaScript의 기본 동작입니다. 선언이 이루어질 때 변수가 생성됩니다. 예: var a; 초기화에는 값(예: var a = 2)을 지정하는 작업이 포함됩니다.

var a; // Declaration
a = 2; // Initializing
var a = 2; // Declaration & Initializing

JavaScript의 변수는 정의되기 전에 사용할 수 있습니다.

간단히 말해, 자바스크립트에서 변수를 선언할 때마다 변수가 사용되기 전이든 후이든 상관없이 브라우저의 자바스크립트 엔진이 해당 변수를 맨 위로 이동하여 브라우저가 정의되지 않은 오류를 반환하지 않도록 합니다.

이는 javascript 선언이 호이스팅(hoisted)됨을 의미하며, 호이스팅은 선언을 맨 위로 가져오는 행위입니다.

a = 2; // Initailized
console.log(a); //used
var a; // Declared
// output -> 2

var a; // Declared
a = 2; // Initailized
console.log(a); //used
// output -> 2

모든 선언은 현재 범위의 맨 위로 이동하기 때문에 둘 다 동일한 결과를 제공합니다(현재 스크립트 또는 현재 함수의 맨 위로).

let & const를 사용한 선언:

let 및 const 변수는 블록의 맨 위로 호이스트되지만 초기화되지는 않습니다.
의미: 변수는 코드 블록에서 인식되지만 선언되기 전에는 사용할 수 없습니다.

let 변수가 정의되기 전에 사용되면 ReferenceError가 발생합니다. 마찬가지로 선언되기 전에 const 변수를 사용하면 구문 오류가 반환되므로 코드가 실행되지 않습니다. 예를 들어;

허락하다

a = 'fotie';
let a;
// this will result in a reference error

const

a = 'fotie';
const a;
// this code will not run

다음 사항에 유의할 가치가 있습니다. JavaScript는 초기화가 아닌 선언만 호이스트합니다.

읽어 주셔서 감사합니다.

이 게시물이 마음에 드셨나요? 더 많은 정보를 얻으려면 팔로우하세요!

2022년 3월 5일 codementor에 원래 게시되었습니다.