함수와 변수의 호이스팅

자바스크립트는 실행되기 전에 내부적으로 함수 또는 변수를 최상단에 위치 시킵니다. 그렇다고 물리적으로 코드의 위치를 바꾼다거나 그런 것은 아니고, 자바스크립트의 내부적인 환경에서만 조정을 하게됩니다. 이러한 일련의 과정을 호이스팅이라고 합니다.

호이스팅의 대상

우리의 호이스팅은 개중에도 var 변수 선언과 함수 선언문에서 일어납니다. 최근에는 var는 거의 쓰여지지 않는 추세이지만, 그래도 어떤 원리인지만 알 수 있게끔 예시를 들겠으니 참고만 하시면 좋을 것 같습니다!

• var 변수 그리고 함수 선언부만 호이스팅이 일어나 최 상위로 이동한다. 여기서 할당은 호이스팅이 일어나지 않는다.
• let,const도 호이스팅이 일어난다. 그렇지만 실질적 위치에 도달하기 전까지는 액세스가 불가능하다.
• 예시로 확인 해 보기.

console.log("hello world");
  var name = 'hello';
  let nameA = 'hello2';

내부적인 환경에서의 자바스크립트

var name; // 변수의 선언부가 호이스팅
console.log("hello world"); 
name = 'hello'; // 할당 부분은 호이스팅X
let nameA = 'hello2'; // let 변수는 호이스팅 o 그러나 코드 위치까지 오기 전까지는 액세스 불가.

함수 선언문과 함수 표현식 차이의 예시

helloWorld();
helloWorld2();

function helloWorld() { // 함수 선언문
	console.log('hello world!');
};

var helloWorld2 = function() { // 함수 표현식
	console.log('hello world!');
};

// 내부적으로 호이스팅이 일어난 경우

var helloWorld2; // var 변수 호이스팅 

function helloWorld() { // 함수 선언문 호이스팅
	console.log('hello world!');
};

helloWorld();
helloWorld2(); // 할당이 이루어지기 이전에 함수를 사용했으므로 ERROR

helloWorld2 = function() { // 함수 표현식은 호이스팅X
	console.log('hello world!');
};

이처럼 함수 선언문과 다르게 변수에 할당된 함수 표현식은 최 상위로 올라가지 않기 때문에 변수의 스코프 규칙을 잘 따라서 작성을 해주셔야 할 것 같습니다!

함수 선언문 내부에서의 호이스팅

함수 선언문 내부에서도 동일하게 호이스팅은 일어납니다. 바로 예시를 보겠습니다.

function foo() { 
  var result = tommy(); 
  console.log(result); 

  function tommy() { // 함수 foo 안에 다른 함수 tommy
    return "tommy"; 
  }
}

toone();

 // 호이스팅 동작 후 function foo의 예시

function foo() {
	var result; // var 호이스팅

	function tommy() { // 함수 선언문 호이스팅
		return "tommy";
	}
	result = tommy(); // 변수 할당
	console.log(result);
}

그래서?

호이스팅이 동작 하더라도 에러가 발생하지 않고 잘 동작한다면 문제가 없겠지만, 문제가 발생해서 작성한 코드를 다시 고치고 들여다보는 것은 골치 아픈 일입니다.

이러한 경우를 줄이기 위해서는 변수를 사용함에 있어서도 var를 사용하기 보단 let과 const를 사용하는 것이 좋습니다!

let과 const는 변수의 호이스팅은 일어나지만 코드 실행이 변수의 위치까지 오지 않으면 액세스가 일어나지 않기 때문에 let과 const를 이용하고, 함수도 가급적이면 상단에 위치해서 사용하면 호이스팅으로 문제가 되지 않을 것 같습니다.

요약해보면

• 변수 var를 사용하기 보다는 let과 const를 사용한다.
• 함수를 상단에 위치시킨다.

결론

간단히 호이스팅에 대해서 알아봤습니다. 예시를 많이 들지 않아서 이해하는데 어려움이 있을 수도 있을 것 같습니다. 사실 변수로 var만 사용하지 않는다면 호이스팅 논란으로 코드가 실행이 안되거나 그런 일은 거의 없었던 것 같습니다. let과 const를 사용하고 스코프 규칙에 맞게 순서를 생각하며 코드를 작성하시면 코드를 작성하는데 문제는 없을 것 같습니다. 아무튼 평소에 대충 알고 지나갔던 호이스팅에 대해서 글로써 정리를 해보니 자바스크립트에 대해서 더 자세히 알게 됐던 시간인 것 같습니다. 잘못된 정보가 있다면 댓글로 알려주세요! 바로 수정하겠습니다!