[JS] 호이스팅, 함수선언식, 함수표현식

제가 이해한 대로 정리한 것이며 절대 정답이 아님임을... 고지합니다..

 

Hoisting

- 사전적 정의 : 끌어올리기

- 변수의 정의가 선언과 할당으로 나뉘어 스코프의 최상단으로 끌어올려지는 것을 말한다.

- 함수 바깥에서 변수를 정의했으면 선언 부분이 전역 스코프의 최상단으로 / 함수 안쪽에서 정의했으면 함수의 최상단으로

- 함수 선언식도 동일하게 적용

 

호이스팅의 특징

 

1. var로 선언할 때만 & 선언만 위로감

 

변수 정의를 하게 되면 선언 부분만 상단으로 끌어올려진다.

또한 변수 정의를 var로 했을 때만 호이스팅이 일어난다.

 

아래는 var로 변수를 정의한 예시이다.

 

처음 console.log(input1)을 했을 때 레퍼런스에러가 나지 않고 undefined인 이유는 선언 부분, 즉 var input1 부분이 함수 상단으로 끌어올려졌기 때문이다. 실제로는 아래처럼 작동하고 있는 것이다.

function test1(){
	var input1;
    console.log(input1);
    input1 = 'hi';
    console.log(input1);
}

아래는 var로 변수를 정의한 예시이다.

let으로 변수를 정의하게 되면 호이스팅이 일어나지 않기 때문에 input2는 어느 곳에도 정의되어있지 않다.

따라서 레퍼런스에러를 일으키게 된다.

 

2. 함수 선언식만 위로감

 

함수정의 방법 중 함수 선언식에서만 호이스팅이 일어난다.

함수정의 방법의 대표적 두 가지 방법은 아래와 같다.

 

- 함수선언식

function returnhi(){
	console.log('hi')
    }

- 함수표현식

let returnhi= function(){
	console.log('hi')
    }

 

 

- 함수선언식 -> Hoisting O

plus라는 함수가 정의되기 전 plus함수를 실행시켰지만 오류는 나지 않고 정상적으로 실행된다.

함수선언식으로 함수가 정의되면 스코프의 최상단으로 함수 자체가 끌어올려지는 것을 알 수 있다.

 

- 함수표현식 -> Hoisting X

 

minus라는 함수가 정의되기 전 minus함수를 실행시키면 minus는 함수가 아니라는 타입에러가 발생한다.

함수표현식으로 함수가 정의되면 호이스팅이 일어나지 않는 것을 알 수 있다.

 

3.호이스팅의 우선순위 (같은 이름의 변수 vs 함수)

 

변수 승!

var를 이용한 변수 선언과 함수선언식을 이용한 함수 전부 호이스팅이 일어나겠지만, 변수의 선언이 더 우선적인 것을 알 수 있다.

 

실제로는 이렇게 실행된다. 결국 변수 선언 -> 함수 선언 -> 변수 값 할당 순으로 호이스팅이 진행된다는 것이다

var name;

function name(){
	console.log('yullmoo');
};

name = 'chaeyoon';

console.log(name);

 

 

4. 호이스팅의 우선순위 (값이 할당되어있는 변수 vs 할당되어있지 않은 변수 vs 함수)

 

color는 위에서 알아보았다시피 할당값이 함수선언보다 뒤에 호이스팅 되기때문에 'cream'이 콘솔에 찍힌다.

num같은 경우는 선언만 되어있고 할당이 되어있지 않아 함수선언이 제일 나중에 호이스팅 되기 때문에 함수num이 콘솔에 찍힌다.

 

 

 

 

 

블로깅의 중요성을....찐으로 깨달았다...드디어 이해했다 호이스팅.....................