JavaScript 21 | 호이스팅 (Hoisting)

김민호·2022년 2월 16일
0

JavaScript

목록 보기
20/21

호이스팅이란?

  • 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것
  • 자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위 최상단에 선언한다. 자바스크립트 Parser가 함수 실행 전 해당 함수를 한 번 훑고 함수 안에 존재하는 변수/함수선언에 대한 정보를 기억하고 있다가 실행시킨다
  • 유효 범위 → 함수 블록 { }
  • 다시 말해서, 함수 내에서 아래쪽에 존재하는 내용 중 필요한 값들을 끌어올리는 것이다.
  • 실제로 코드가 끌어올려지는 것은 아니며, 자바스크립트 Parser 내부적으로 끌어올려서 처리하는 것.
  • 실제 메모리에서는 변화가 없다

호이스팅의 대상

  • var 변수 선언함수선언문에서만 호이스팅이 일어난다
    • var 변수/함수의 선언만 위로 끌어 올려지며, 할당은 끌어 올려지지 않는다.
    • let/const 변수 선언과 함수표현식에서는 호이스팅이 발생하지 않는다.
  • 예시 → var 변수와 let/const 변수
    console.log("호이스팅 테스트!")
    var myname1 = "KIM1"; // var 변수 
    let myname2 = "KIM2"; // let 변수 
    이런 코드가 JS Parser 내부의 호이스팅의 결과로 다음 아래와 같이 순서가 바뀐 것처럼 동작한다
    var myname; // 호이스팅 "선언"
    console.log("호이스팅 테스트!")
    myname1 = "KIM1" // "할당" 은 끌어 올려지지 않기 때문에 그대로 남는다
    let myname2 = "KIM2"; // let은 호이스팅 발생하지 않는다
  • 예시 → 함수선언문 vs 함수표현식
    first();
    second();
    
    //함수선언문
    function first() { 
    	  return "111";
    }
    
    //함수표현식
    var second = function() {
      return "222";
    }
    이런 코드가 JS Parser 내부의 호이스팅의 결과로 다음 아래와 같이 순서가 바뀐 것처럼 동작한다
    var second; // 호이스팅 - 함수표현식의 변수값 "선언"
    
    // 호이스팅 - 함수선언문
    function first() { 
      return "111";
    }
    
    first();
    second();
    
    second = function() {
      return "222";
    }
  • 호이스팅 예시로 이해
	first(); 
	// 이 함수의 호출은 선언이 뒤에 되어 있더라도 함수선언문으로 선언되어 있기 때문에 호이스팅이 되어서 리턴값이 반환된다
	console.log(second, 1) 
	// second()로 두면 함수표현식은 호이스팅이 되지 않기 떄문에 TypeError: second is not a function 에러 뜸
	// second를 못 찾았기 때문에 undefined

	//함수선언문
	function first() { 
        console.log("나는 1번")
		return "나는첫째";
	} 

	//함수표현식
	var second = function() {
      	console.log("나는 2번")
  		return "나는둘째";
	}

	console.log(second(), "ㅋㅋㅋㅋ", 2)

	/* 
	'나는 첫째'
	undefined 1

	'나는 1번'

	'나는 2번'

	'나는둘째' 'ㅋㅋㅋㅋ' 2
	*/
profile
개발자로서의 삶은 https://velog.io/@maxminos 에서 기록하고 있습니다 😀

0개의 댓글