JS 호이스팅

February 13, 2020

호이스팅

  • 사전적 의미 : 끌어올리기

인터넷 및 주변사람들을 통해 호이스팅에 대해서 물어보면 함수 선언전 함수를 실행시키면 함수가 끌어올라와 실행시키는걸 '호이스팅'이라고 알고있다.

자바스크립트는 프로그램이 작동하면서 '실행 컨텍스트'가 생성된다. 컨텍스트 안에는 변수객체/활성객체가 생성되며, 이러한 객체안에는 아래와 같은 순서대로 생선된다.

(참고) 실행컨텍스트가 생성되는 경우
1. 전역코드
2. eval() 함수로 실행되는 코드
3. 함수 안의 코드를 실행하는 경우
  1. 아큐먼트 객체 (함수의 전달인자)
  2. 컨텍스트 안에 있는 변수(단, 초기화가 안되어있고, undefined)
  3. 함수 객체 (자바스크립트는 함수 또한 객체이다.)
  4. this (this는 나를 호출한 사람이라고 생각하면 된다.)
  5. [scope](리스트의 형태로 저장이 된다.)
hello() // 'hello'

//이유 : 실행 컨텍스트 내에 이미 hello 함수객체가 선언이 되어있기 떄문에 컨텍스트 안에서는 어디서든 부르든 실행이 가능하다
function hello() {
    console.log('hello')
}

world() // 에러 발생

//이유 : 컨텍스트 내에서 변수는 expresstion 되어야지 초기화가 되는데 world는 아직 undefined이기 떄문에 에러가 발생된다.

var world = function () {
    console.log('world')
}

호이스팅이란, 컨텍스트의 활성객체가 생성이 나고 실행이 되는데 이러한 함수표현식과 함수선언문의 차이로 인해 에러가 발생한다.

함수선언문은 함수객체이기때문에 컨텍스트 자체에 생성이 되어 에러가 발생하지 않는다. 함수표현식은 변수이기 때문에 함수표현식이 실행하기전에는 변수의 값은 undefined이기 떄문에 에러가 발생한다.

호이스팅 방지법??

스크립트 언어이기 때문에 위에서 아래로 코드가 작동하는 것처럼 만들기 위해서는 함수는 함수표현식을 작성하여 함수가 작동하게 프로그래밍을 해야 할것같다.


© 2023, Customized by Joon