JS_문법 (3)_호이스팅

호이스팅 이슈

Hoisting = 끌어올린다

 

일반적인 언어 = 함수, 변수를 선언 후 사용이 가능

JS = 선언 전에 사용을 해도 에러를 내지 않는다...!

---

예시

1. var 키워드

var은 let과 같은 변수를 선언에 쓰이는 키워드이다.

하지만 같은 이름의 변수를 재선언해도 오류가 나지 않는다.

var a = 1;
var a = 2;
console.log(a)

>>>
2
======================
let a = 1;
let a = 2;
console.log(a)

>>>
SyntaxError: Identifier 'a' has already been declared

 

호이스팅이 일어나는 예시

console.log(a)
a = 10;
console.log(a)
var a = 1
console.log(a)

>>>
undefined
10
1

 

2. 함수

showData();

function showData() {
    console.log("Hello")
}

>>>
Hello

함수의 경우 역시

선언 전에 호출을 해도

오류가 나지 않는다.

---

Hoisting 이유

JS는 파일을 컴파일할 때

다음의 과정을 거친다.

 

1. var로 선언된 변수가 있는지 확인
2. 함수가 있는지
3. 1-2번에 해당되는 것들을 최상단부에서 먼저 선언을 한다.
4. 전체 코드 실행

이때 상단부에서 선언을 할 때는 초기화는 되지 않은 상태이다.

 

문제점

자신이 의도하지 않은 결과를 내는 경우가 많다.

(자세한 것은 나중에!)

 

Hoisting 해결법

1. 변수 선언

let, const를 이용한다.

 

2. 함수 선언

함수 표현식을 이용한다!

// 함수 표현식
let getData = function() {
    console.log("Hello")
}

// 함수 선언문
function getData() {
    console.log("Hello")
}

함수 표현식의 경우

let, const로 변수를 선언한 뒤 

그곳에 할당을 하는 것이므로

변수로 인지를 한다.

 

따라서 선언이 호출보다 뒤에 오면

오류가 발생을 한다.