👀 Hoisting
함수 안에 있는 선언을 종합하여 최상단으로 끌어올려 최상단에 선언하는 Hoisting에 대해 알아본다
✔ 실행방식
자바스크립트 Parser가 함수 실행 전 해당 함수를 훑는다
- 함수 안에 존재하는 변수 및 함수선언을 해당 유효 범위의 최상단에 선언한다
* 실제로 코드가 최상단에 위치하도록 변경되는것은 아니며, 내부적으로 처리하는 것
✔ 대상
- var 변수 선언과 함수선언문에서만 호이스팅이 일어난다
- var의 선언과 함수선언문만 호이스팅되며, 할당은 호이스팅되지 않는다
- let 또는 const의 경우에는 호이스팅이 발생하지 않는다
- var vs let
``` //선언 let name = 'dooddi'; var name2 = 'dooddi'; //호이스팅 결과 var name2; // var 호이스팅 let name = 'dooddi'; name2 = 'dooddi'; ```
- 함수선언문 vs 함수표현식
``` //선언 dooddi(); dooddi2(); function dooddi(){ // 함수선언문 console.log('dooddi'); } var dooddi2 = function(){ console.log('dooddi2'); } //호이스팅 결과 var dooddi2; // var 호이스팅, 변수 선언이 함수 선언보다 위에 위치 function dooddi(){ // 함수표현식 호이스팅 console.log('dooddi'); } dooddi(); dooddi2(); // 에러! dooddi2 = function(){ // 함수표현식은 호이스팅되지 않는다. console.log('dooddi2'); } ```
✔ 주의사항
- 가독성과 유지보수를 위해 호이스팅 사용 지양
- 가급적 변수 및 함수를 코드 상단부에 선언
- let과 const 사용
👍 참고 사이트
'- > js' 카테고리의 다른 글
[JS] 자바스크립트 메모리 누수 (0) | 2021.06.19 |
---|---|
[JS] 비교 연산자 (0) | 2021.01.15 |
[JS] self vs this (0) | 2021.01.15 |
[JS] DOM (0) | 2021.01.15 |
[JS] 연동방식 (0) | 2021.01.15 |