🌈 JavaScript hoisting

🤍 hoistinig

✔ 들어가기 전에...

Javascript에서 사용자 정의 함수(function)를 사용할때 두가지 방법이 있습니다.

1. 함수 선언식

       function 함수명(매개변수1, 매개변수2 ..){
           함수가 호출되었을 때 실행할 문장;
           ..
           return 값;
       }
   
       //호출할때
       함수명(값1, 값2 ..);

2. 함수 표현식

        let 변수명 = function(매개변수1, 매개변수2 ..){
            함수가 호출되었을 때 실행할 문장;
            ..
            return 값;
        }
        //호출할때
        변수명(값1, 값2 ..);

이 두개의 차이점은 무엇일까요? 1번은 '선언'되었기 때문에 javascript가 메모리에 먼저 올려 선언 전에 함수를 호출을 하더라도 에러가 발생하지 않습니다. 오늘은 javascript의 hoisting이 무엇인지 알아보겠습니다.

✔ hoisting의 정의

JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. 즉 변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮겨 변수를 정의하는 코드보다 사용하는 코드가 앞서 등장할 수 있습니다.

✔ hoisting의 대상

• var 변수 선언
• 함수선언문

let/const 변수 선언과 함수표현식에서는 호이스팅이 발생하지 않습니다. 이러한 원리를 모르고 var 변수와 함수선언문을 사용한다면 원하는 결과가 안나올 확률이 높기 때문에 꼭 알아둬야하는 javasctipt의 특징입니다.

✔ hoisting시 주의사항

1. 선언과 초기화를 함께 수행하는 경우, 선언 코드까지 실행해야 변수가 초기화된 상태가 됩니다.

//호이스팅먼저! var 변수 y선언(undefined) -> x=1 (x초기화) -> y=2; 초기화
x = 1; 
console.log(x + " " + y); // '1 undefined'
var y = 2; 
console.log(x + " " + y);// '1 2'

2. JavaScript는 초기화를 제외한 선언만 호이스팅합니다.
   - var로 선언한 경우 undefined로, 그 외에는 초기화하지 않음
   
   
   

✔ 호이스팅 기술 예제

JavaScript는 함수의 코드를 실행하기 전에 함수 선언에 대한 메모리부터 할당합니다. 덕분에 함수를 호출하는 코드를 함수 선언보다 앞서 배치할 수 있습니다.

catName("클로이");

function catName(name) {
  console.log("제 고양이의 이름은 " + name + "입니다");
}

에러 없이 결과같이 정상적으로 출력되는 것을 알 수 있습니다

 func1();
// func2();         //에러뜸!
function func1(){
  alert('func1 호출되었음!');
}

const func2 = function(){
  alert('func2 호출되었음!');
}
func2();

func1은 호이스팅 대상이라 호출을 먼저 하더라도 결과값이 정상적으로 출력되는 것을 알 수 있습니다!

이 문서는 국비과정 수업을 바탕으로 만들어진 자료입니다.
수정할 사항이 있다면 댓글 남겨주세요!
참고:https://developer.mozilla.org/ko/docs/Glossary/Hoisting