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

호이스팅이란?

JavaScript에서 호이스팅은 변수나 함수가 선언되기 전에 사용되는 방법을 설명하는 데 사용되는 용어입니다.


예시:

console.log(name) // => undefined
var name = 'Pharia'

개념적으로 바인딩 이름이 코드의 맨 위에 올려진다고 상상할 수 있습니다.

var name // declaration is moved to the top
console.log(name) // => undefined because all variables in JS are initially set to undefined
name = 'Pharia' // assignment is not moved

이것이 어떻게 가능한지?

JavaScript에서 코드가 한 줄씩 실행되기 전에 JS 엔진은 빌드한 전체 코드와 사용자가 만든 모든 함수에서 만든 변수를 위한 메모리 공간을 따로 확보합니다. 이것은 실행 단계가 뒤따를 컴파일 단계로 간주됩니다.

변수의 경우 키워드 var로 선언된 변수만 호이스팅될 수 있음

함수의 경우 함수 이름 식별자와 본문이 모두 호이스트됨

예

var - CAN 호이스트

console.log(name) // undefined
var name = "Pharia"

const - 호이스트할 수 없음

console.log(name) // // ReferenceError: Cannot access 'name' before initialization
const name = "Pharia"

let - 호이스트할 수 없음

console.log(name) // ReferenceError: Cannot access 'name' before initialization
let name

키워드 없이 선언된 변수 - 호이스트할 수 없음

console.log(name) // ReferenceError: name is not defined
name = "Pharia"

기능 - CAN 호이스트

logName() // => "Pharia"
function logName() {
  return "Pharia"
}

결론

Javascript에서 호이스팅이 가능하지만 버그 및/또는 오류를 피하기 위해 범위의 맨 위에 모든 함수와 변수를 선언하는 것이 더 나은 방법입니까?

기억하세요... 즐거운 코딩, 친구들! =)


출처

https://developer.mozilla.org/en-US/docs/Glossary/Hoisting