[Javascript] 호이스팅

HOISTING(호이스팅)이란??

호이스팅이란 변수나 함수의 호출 코드가 선언코드보다 아래쪽에 있음에도 불구하고 에러가 발생하지 않고, 선언코드를 위로 끌어올려서 함수 유효범위의 최상단에서 선언되어지는 것을 말한다.

​

즉 함수 내에서 아래쪽에 존재하는 내용 중 필요한 것들만을 끌어올리는 것이다.

(실제로 끌어올려지는 것이 아닌 먼저 실행되어진다는 개념으로 이해하면 쉽다)

​

​

*호이스팅의 대상

​

var변수선언과 함수 선언문에서만 호이스팅이 일어나게 된다.

​

그 극명한 차이를 알 수 있는 예시가 있는데,

바로 자바스크립트에서 함수를 생성하는 두가지 방법인 "함수 선언식"과 "함수 표현식"을 통해 알아볼 수 있다.

---

자바 스크립트에서 함수를 만드는 방법은 크게 함수 표현식을 이용한 방법, 함수 선언식을 이용한 방법으로 크게 나뉘어 진다.

​

함수 선언식

일반적으로 많이 사용하는 함수 정의 방식에 해당한다.

 

number(); //호이스팅이 되어 실행 가능!!! function number(){ i=0; while(i<10){ document.write(i); i +=1; } }

이 함수 선언에서의 특징은 함수선언을 다른 코드보다 먼저 읽고 실행한다는 뜻이다.

(이것이 바로 호이스팅의 개념으로 함수가 아래쪽에 생성되어도 저절로 함수가 호출부보다 먼저 실행이 되어 오류가 발생하지 않는다.)

​

때문에 함수선언 전에 number()함수를 호출하여도 문제없이 정상적으로 동작이 이루어지게 된다.

​

함수 표현식

함수 표현식은 변수를 선언하고 해당 변수에 함수를 할당하는 형태라고 보면된다.

​

하지만 이 방법은 위의 함수 선언식과는 다르게 함수를 먼저 실행해 주지 않기 때문에 함수 선언 전 위에서 호출을 해주게 되면 오류가 발생하게 된다.

number() //위에서 호출 시 호이스팅이 되지 않아 함수호출 시 오류 발생 var number = function (){ i=0; while(i<10){ document.write(i); i +=1; } }

​

함수 선언문으로 함수를 정의하게 되면 생성과는 상관없이 아무곳에서 호출이 가능하기 때문에 사용하기가 쉽니만,

대규모 애플리케이션을 개발하는 경우 너무 많은 코그를 변수객체에 저장하기 때문에 응답속도가 현저히 떨어질 수 있기 때문에 조심해야 한다고 한다.

​

또한 함수 호이스팅이 함수 호출 전 반드시 함수를 선언하여야 한다는 규칙을 무시하기 때문에 코드의 구조를 엉성하게 만들 수 있어

"함수표현식"을 쓰는 것을 권장하는 바이다.

---

위 글은 아래의 링크를 참고하여 작성하였음을 명시합니다.

https://thisblogbusy.tistory.com/entry/Hoisting

 

호이스팅(Hoisting)

호이스팅(Hoisting)

호이스팅(Hoisting) 호이스팅이란 변수 선언문이나 함수 선언문등 모든 선언문이 해당 Scope의 선두로 옮겨진 것처럼 동작하는 특성을 말한다. 즉 선언문은 할당되기 이전에 참조가 가능하다.(undefiend) 변수 자..

thisblogbusy.tistory.com

 

 

출처 m.blog.naver.com/ka28/221992900149