호이스팅(Hoisting)에 대한 개념을 정리해 보자
호이스팅이란?
호이스팅(Hoisting)은 자바스크립트에서 변수나 함수를 선언하면, 해당 변수나 함수를 유효 범위(Scope)의 최상단으로 끌어올리는 동작을 의미한다.
호이스팅을 하게되면 변수나 함수의 선언이 호출보다 뒤의 단계에 존재 함에도 불구하고, 그 변수나 함수를 사용할 수 있는 javascript의 동작이라고도 생각할 수 있다.
이 호이스팅은 때론 코드 작성을 쉽게 할 수도 있지만, 잘 못 사용하였을 때는 에러동작을 유발할 수도 있다.
호이스팅의 동작
변수 호이스팅은 var 키워드로 선언된 변수에만 적용되며, 해당 변수가 유효 범위 내에서 어디에서든지 참조될 수 있다는 것을 의미한다. 즉, 변수 선언이 해당 스코프의 최상단으로 끌어올려지기 때문에, 변수를 선언하기 전에 참조하더라도 오류가 발생하지 않습니다. 단, 선언한 변수를 초기화하지 않은 상태에서 참조하면 undefined가 반환된다.
함수 호이스팅은 함수를 선언할 때 해당 함수를 유효 범위의 최상단으로 끌어올려서, 함수 선언문 이전에도 호출할 수 있도록 한다. 이때 함수 선언문과 함수 표현식의 호이스팅이 다르다는 것에 유의해야 한다. 함수 선언문은 함수 전체가 끌어올려지므로 함수 표현식과 달리 함수를 선언하기 전에 호출할 수 있다. 반면, 함수 표현식은 변수 호이스팅이 적용되므로, 변수가 선언된 위치에서부터 함수를 호출할 수 있다.
호이스팅의 장단점
변수를 어디에 선언해도 오류가 발생하지 않고 참조가 가능하며, 작은 프로젝트에서는 코드를 줄여주고 편하게 사용할 수 있도록 해준다.
다만 프로젝트가 커지고 변수 선언의 위치를 찾기 힘들어 지면, 코드 자체의 가독성이 떨어지고, 에러가 발생하거나 변수의 값이 재할당 되는 곳을 찾지 못해 문제가 발생하였을 때 워낙 넓은 유효범위를 가지고 있어서 수정해야할 부분을 찾기 어려워진다.
따라서 var로 선언한 변수의 사용에 문제가 발생함에 따라 ES6문법에서 추가된 let, const의 변수 선언으로 호이스팅을 방지할 수있다.
