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

안녕하세요 여러분 오늘 저는 Javascript의 Hoisting에 대해 논의하고 있습니다.

호이스팅이란?
호이스팅은 변수와 함수의 선언을 인터프리터에 의해 스코프의 맨 위로 옮기는 과정입니다.
변수 선언을 기본값으로 맨 위로 이동하거나(초기화 부분이 아닌 선언 부분만) 선언 전에 함수 호출을 사용하고 선언 후 코드에서 선언 부분을 제공할 수 있습니다.
예를 들어 이것을 이해합시다.

예제 1 - 변수 호이스팅

console.log(a)
var a = 10;
//output - undefined

console.log(b)
let b = 20;
// output - ReferenceError: Cannot access 'b' before initialization

console.log(c)
let c = 20;
//output - ReferenceError: Cannot access 'c' before initialization

보시다시피 변수를 선언하기 전에 콘솔에 변수를 기록했습니다.

선언 부분이 초기화 부분이 아닌 "var"로 호이스팅되었기 때문에 "var"키워드로 선언된 변수의 경우 undefined를 반환합니다.

"let"및 "const"로 선언된 변수의 경우 "let"및 "const"가 기본값으로 호이스팅되지 않았기 때문에 참조 오류를 반환합니다.

예제 2 - 함수 호이스팅

hoistedFunction()

function hoistedFunction(){
  console.log("This function is called before it's declaration")
}
//output - This function is called before it's declaration


hoistedParameterisedFunction(10,20,30)

function hoistedParameterisedFunction(a,b,c){
  console.log(a,b,c)
}
//output - 10 20 30


hoistedArrowFunction()

let hoistedArrowFunction = () => {
  console.log("This function is called before it's declaration")
}

//output - ReferenceError: Cannot access 'hoistedArrowFunction' 
//before initialization

선언 전에 함수를 호출했지만 여전히 출력을 제공하는 것을 볼 수 있습니다. 함수 호이스팅의 경우 전체 함수 선언과 본문이 호이스팅되어 원하는 출력을 제공하기 때문입니다.

호이스팅된 함수 호출에 매개변수를 전달할 수도 있습니다.

Arrow 함수의 경우 익명의 화살표 함수를 "hoistedArrowFunction"변수에 할당했으며 이를 호이스팅하면 변수의 경우와 동일한 참조 오류가 발생합니다.

이 개념을 제가 아는 한 최대한 설명하려고 노력했으며 이 개념에 대한 더 많은 내용이 있으면 댓글란에 언급해 주세요.

이 게시물을 확인해 주셔서 감사합니다.
^^ 아래 링크에서 기부로 저를 도울 수 있습니다 감사합니다👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

이 게시물도 확인하십시오.