자바스크립트 호이스팅 (JavaScript Hoisting)

Hoisting은 선언(declarations )을 맨 위로 이동시키는 자바스크립트의 기본 동작(default behavior)입니다.


자바스크립트 선언(Declarations)은 맨 위로 끌어올려진다(Hoisted)

자바스크립트에서 변수(a variable)는 먼저 사용하고 나중에 선언될 수 있다.

즉, 변수는 선언되기 전에 사용할 수 있다.

Example 1Example 2는 같은 결과를 반환합니다:

Example 1


Example 2


이를 이해하려면, “호이스팅 (hoisting)”이라는 용어를 이해해야합니다.

Hoisting은 모든 선언(all declarations)을 현재 범위(current scope)의 맨 위(현재 스크립트 또는 현재 함수의 맨 위)로 이동하는 자바스크립트의 기본 동작(default behavior)입니다.


자바스크립트 초기화(Initializations)는 위로 이동하지 않습니다(Not Hoisted).

자바스크립트는 선언(declarations)만 위로 이동합니다(hoisted). 초기화(initializations)는 위로 이동되지 않습니다(not hoisted).

Example 1Example 2와 같은 결과를 반환하지 않습니다:

Example 1



Example 2



마지막 예제에서 y1은 undefined입니다. 이해가 됩니까?

이것은 단지 선언(declaration) (var y1) 때문입니다. 초기화(initialization) (=7)는 위로 이동되지 않습니다(not hoisted to the top).

hoisting 때문에 y1은 사용하기 전에 선언되지만, 초기화(initializations)는 위로 이동하지 않기(not hoisted) 때문입니다. 그래서 y1의 값은 undefined입니다.

Example 2도 마찬가지입니다:

Example



변수(Variables) 맨 위(At the Top)에 선언하십시오 !

Hoisting은 (많은 개발자가) 모르거나 간과하는 자바스크립트 동작입니다.

개발자가 hoisting을 이해하지 못하면, 프로그램에 버그(오류)가 있을 수 있습니다.

버그를 피하려면, 항상 모든 범위(every scope)의 시작 부분에 모든 변수를 선언하십시오.

이것이 자바스크립트가 코드를 해석하는 방식이므로, 항상 좋은 규칙입니다.

출처: JavaScript Hoisting

Leave a comment