함수를 끌어올린다?(Hoisting)

함수를 끌어 올려?

MDN Javascript 문서를 보다가 보니 함수를(혹은 클래스)를 끌어올린다는 표현이 가끔씩 나온다.

대체 뭘 끌어올린다는 건지 이해가 되지않아 몇개의 글을더 찾아 읽어보다가

Hoisting이라는 단어를 끌어올린다고 번역하였음을 알 수 있었다.

영어 발음 그대로 '호이스팅'이라고 표현된 부분도 있었다.

'끌어올리다'라는 용어 자체가 흔히 쓰이는 말인지는 모르겠지만

그 단어 자체에 대한 정의는 따로 찾을수 가 없어서 의미를 알기가 혼란스러운 점이 있긴 하다.

MDN에 Hoisting에 대한 페이지가 따로 존재한다.

'끌어올리다'라는 표현이 잘 이해가 안되었는데 함수가 선언된 부분을 코드의 맨 위로 끌어올린다는 것에서 나온 표현으로 볼 수 있을것같다.

호이스팅(hoisting)에 대해서 몇가지 사실만 정리해보면

• 변수/함수를 초기화하거나 호출 할 때, 선언문이 코드의 뒤에 위치하더라도 문제 없이 작동하는 것을 호이스팅(hoisting)이라고 한다.
• ECMAScript® 2015 언어 명세 및 그 이전 표준 명세에서 사용된 적이 없는 용어이다. 
• 끌어올리다 = 호이스팅 = hoisting  (문맥적으로 파악한 부분)
• 코드내에서 선언문의 위치가 실제로 앞쪽으로 옮겨지는 것은 아니고,  컴파일 단계에서 변수/함수에 대한 선언이 메모리에 저장되는 것.

1. 보통 변수 사용 순서

보통 함수든 변수든 사용을 하려고 하면, 아래 코드와 같이 선언 > 초기화 > 사용(참조) 순서로 이루어질 것이다.

(value  는 이미 선언이 된 값이라고 치자)

var x; //선언

x = 10; //초기화

value = x; //참조

2. 변수 hoisting 예시

아래 코드를 보면, 선언되기 전에 초기화가 된다. 

변수 x의 선언문이 나오기 전에 변수를 먼저 초기화 해도 에러가 뜨지 않는다.

x = 10; //초기화(사용)

value = x; //사용

var x; //선언

3. 변수 hoisting 안되는 경우

* 하지만 초기화가 안된 변수를 사용하는것은 안 된다고 한다. 

* 아래와 같이 선언문과 초기화 문장이 둘다 나중에 온다면 에러가 뜰것이다.

value = x; //사용

var x=10; //선언 및 초기화

4. 함수 hoisting

함수에서는, 아래와 같이 아직 정의되지 않은 함수를 호출해서 사용할수 있다.

cat.function("Jake"); //호출

var function("name"){ //함수 선언, 정의

consol.log("고양이의 이름은" + name + "입니다");

}

5. 함수 hoisting이 안되는 상황

- 함수 표현식(function expression, 함수를 정의하자 마자 사용되는 경우, 익명함수 형태로 쓰이는 경우)에서는 끌어올리는 것이 허용되지 않는다.

notHoisted(); // TypeError: notHoisted is not a function

var notHoisted = function() {

   console.log("bar");

};

참고: 함수 표현식과 함수를 정의하는 구문은 다른 용어로 쓰이고 있다

* 함수 선언 (function declaration)은 함수를 선언하고 정의하는 부분. 

* 함수 표현식(function expression)은 표현식 내에서 함수를 정의하면서 바로 사용하는 경우.

* (The function keyword can be used to define a function inside an expression)

* (The function declaration (function statement) defines a function with the specified parameters.)

참고한 사이트

함수 표현식

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/function

Hoisting

https://developer.mozilla.org/ko/docs/Glossary/Hoisting

함수 선언

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/function

추가된글