Javascript 변수 선언 방식은 var, let, const 이렇게 세 가지가 있다.
var는 이미 선언된 변수를 재선언 할 수 있고, 재할당 또한 가능하기 때문에 현재는 사용하지 않는 선언 방식이다. (var 대신 let과 const를 주로 사용한다.)
var는 재선언과 재할당 이외에도 호이스팅이라는 부분에서 문제가 된다.
아래에서 문제가 되는 부분을 살펴보도록 하겠습니다.
cookie라는 변수를 선언하기 전에 console에 찍었는데 에러가 발생하지 않고 undefined가 콘솔에 띄워졌다. 우리의 예상대로라면 변수를 선언하기 전에 사용해서 에러가 나와야 하는데, 왜 에러는 나타나지 않는걸까? 이런 이상한 상황이 발생하는 이유는 호이스팅에 있다.
호이스팅
호이스팅이란? 코드 실행을 위한 컨텍스트를 만들면서 코드 관련 식별자(변수명, 함수명)를 수집하며 발생하는 현상이다.
다시 말해서, 변수, 함수의 선언부만 코드의 최상단으로 끌어올려주는 것이다.
따라서 앞서 본 예제처럼 선언보다 호출이 앞서도 에러가 안 나는 경우가 있을 수 있다.
함수(function)의 호이스팅
함수에도 다양한 표현의 함수식이 있다. (함수 선언식, 함수 표현식, 화살표 함수)
먼저 함수 선언식에 대해 살펴보자.
함수 선언식은 호이스팅의 영향을 받는다.
예제를 통해 자세히 알아보자.
함수가 선언되기 전에 실행을 먼저 했는데 아무런 문제 없이 잘 실행되는 것을 확인할 수 있다.
이런 상황이 바로 말씀드린 호이스팅 때문에 일어나는 상황이다.
이런 상황을 방지하기 위해서는 함수 표현식을 이용하는 게 좋다.
그럼 표현식으로 작성하게 되면 어떻게 될까?
방금 작성한 catName을 함수 표현식으로 변경해보자.
우리의 예상처럼 이렇게 에러가 나타났고, 이렇게 함수 표현식을 사용하면 함수가 선언되기 전에 호출이 되지 않도록 합니다. 이러한 이유로 앞으로 함수를 작성할 때, 함수 표현식을 사용해 주는 것이 좋다.
함수의 표현식에서의 var와 const,let
// var로 선언**
test1()
var test1 = function(){
console.log("이건 타입에러가 뜰 것 입니다.")
}변수를 var로 주게 되면 호이스팅의 영향을 받게 된다.
즉, 변수의 선언부에 접근이 가능하다는 것이다.
따라서 선언부는 코드의 최상단부로 끌어 올려지며 할당부가 초기화가 되어
test1 = undefined 상태가 된다.
그래서 콘솔로 test1을 찍었을 때, undefined가 나오는 것을 확인할 수 있다.
그런데 undefined인 상태에서 함수를 호출하는 코드로 변수를 부르니, 함수가 아닌 것을 함수로 불렀기 때문에 타입에러가 뜨는 것이다.
// const 선언
test2()
const test2 = function(){
console.log("이건 레퍼런스 오류가 뜰 것 입니다.")
}반면, const나 let을 사용하게 되면 호이스팅은 되지만
접근은 불가능 하기 때문에 레퍼런스 오류가 뜨게 된다.
[정리]
-호이스팅은 코드 실행을 위한 컨텍스트를 만들면서
코드 관련 식별자(변수명, 함수명)를 수집하며 발생하는 현상이다.
-var는 재선언과 재할당 이외에도 호이스팅 부분에서 문제가 된다.
-함수 선언식도 호이스팅늬 영향을 받기 때문에 함수 표현식을 사용하는 것이 좋다.
-var, let, const 모두 호이스팅은 된다.
하지만 var는 접근까지 가능하기 때문에 에러가 나타나야 하는 상황에서도 에러가 나지 않을 수 있고, let과 const는 접근이 불가능 하기 때문에 에러가 나타난다.
