[용어] 자바스크립트 호이스팅

복습 한 내용 기록 

- 공부 방향 : tchschool 기초, javascript 공식 Docs, 유트브

출처 및 참고

참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Grammar_and_types#%eb%b3%80%ec%88%98_%eb%b2%94%ec%9c%84 (첫번째 교육자료)

 

추가로 포스팅할것 :

자바스크립트란 or 원리?

동등 and 일치 연산자 

프로퍼티 and 메소드 (함수형 프로그래밍)

 

 

호이스팅

호이스팅이란 ?

• 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다. 
• var로 선언한 변수의 경우 호이스팅 시 undefined를 뱉어낸다. (undefined로 변수를 초기화
• let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않는다. 

호이스팅을 설명할 땐 주로 변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는 것으로 말하곤 한다. 

따라서 변수를 정의하는 코드보다 사용하는 코드가 앞서 등장할 수 있다. 다만 선언과 초기화를 함께 수행하는 경우, 선언 코드까지 실행해야 변수가 초기화된 상태가 됨을 인지하자.

 

인터프리터 : 프로그래밍 언어의 소스 코드를 바로 실행하는 컴퓨터 프로그램 또는 환경
var와 let, const 호이스팅 시 차이점 이해

 

 

 

변수 호이스팅 

• 자바스크립트 변수의 특이점은 예외를 받지 않고도 나중에 선언된 변수를 참조할 수 있다는 점이다. 이것을 호이스팅(hoisting)이라고 한다. 
• 즉 자바스크립트 변수가 어떤 의미에서 끌어올려진다거나함수나 문의 최상단으로 올려지는 것을 말한다. 
• 하지만 이렇게 끌어올려진 변수는 undefined 값을 반환한다. 그래서 심지어 이 변수를 사용 혹은 참조한 후에 선언 및 초기화 하더라도 여전히 undefined를 반환한다. 

 

// 예시 1

console.log(x === undefined); // true
var x = 1; 

// 예시 2
var testVar = 'value';

(function() {
  console.log(testVar);
  var testVar = 'func value';
})();

 

▷ 위 예제는 아래 예제와 동일하게 볼 수 있다. (코드의 원리를 파악하는 것이 중요) 

// 예시 1

var x;
console.log(x === undefined); // true
x = 1; 

// 예시 2
var testVar = 'value';

(function() {
  var testVar;
  console.log(testVar); // undefined
  testVar = 'func value';
})();

 

• 호이스팅 때문에 함수 내의 모든 var 문은 가능한 함수 상단 근처에 두는 것이 좋다. 해당 방법은 코드를 더욱 명확하게 만들어준다.
• ES2015의 let(const)는 뱐수를 블록의 상단으로 올리지 않는다. 
• 변수가 선언되기 전에 블록 안에서 변수를 참조하게 되면 ReferenceError를 발생시키게 된다.
• 변수는 블록 시작부터 선언이 처리될 때까지 'temporal dead zone'에 위치하게 된다.

console.log(x); // ReferenceError
let x = 1;

 

 

함수 호이스팅

▶ 함수에서는 단지 함수 선언만 상단으로 끌어올려진다. 함수 표현식은 그렇지 않다. 

※ 함수 선언문과 함수 표현식

 

// 함수 선언

foo(); // bar 

function foo() {
  console.log('bar');
}

// 함수 표현식

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

var baz = function() {
  console.log('bar2');
};

 

 

예제

▶ 자바스크립트는 함수의 코드를 실행하기 전에 함수 선언에 대한 메모리부터 할당한다. 덕분에 함수를 호출하는 코드를 함수 선언보다 앞서 배치할 수 있다.

function myName(name) {
  console.log('내 이름은 ' + name + ' 이다.');
}

myName('pej');

// 내 이름은 pej 이다.

 

▷ 위의 코드 조각이 일반적으로 코드를 작성하는 순서라면, 함수를 선언하기 전에 먼저 호출할 경우 어떻게 될까? 

myName('pej');

function myName(name) {
  console.log('내 이름은' + name + '이다.');
}

// 내 이름은pej이다.
결과는 같다.

• 함수 호출이 함수 자체보다 앞서 존재하지만 해당 코드 역시 동작한다. 이것이 자바크스립트에서 실행 맥락이 동작하는 방식이다. 
• 호이스팅은 다른 자료형과 변수에도 잘 작동한다. 변수를 선언하기 전에 먼저 초기화하고 사용할 수 있는 것이다. 

 

선언만 호이스팅 대상

▶ 자바스크립트는 초기화를 제외한 선언만 호이스팅한다. 변수를 먼저 사용하고 그 후에 선언 및 초기화가 나타나면, 사용하는 시점의 변수는 기본 초기화 상태(var 선언 시 undefined, 그 외에는 초기화하지 않음)이다.

 

console.log(num); // 호이스팅한 var 선언으로 인해 undefined 출력
var num; // 선언 
num = 6; // 초기화

 

▷ 선언 없이 초기화만 존재하는 경우, 호이스팅도 없고 변수를 읽으려는 시도에서는 ReferenceError 예외가 발생한다. 

console.log(num); // ReferenceError
num = 6; // 초기화

 

▷ 다른 예제

// Ex 1
// y만 호이스팅 대상

x = 1;
console.log(x + ' ' + y); // '1 undefined'
// JS는 선언만 호이스팅하므로, 윗줄은 y는 undefined
var y = 2; // y를 선언하고 초기화 

// Ex 2
// 호이스팅은 없지만, 변수 초기화는 (아직 하지 않음) 변수 선언까지 병행하므로 변수를 사용할 수 있다.
a = 'ee'; // a 초기화
b = 'bb'; // b 초기화

console.log(a + ' ' + b); // ee bb

 

let과 const 호이스팅

▶ let과 const로 선언한 변수도 호이스팅 대상이지만, var와 달리 호이스팅 시 undefined로 변수를 초기화하지는 않는다. 

즉, 변수의 초기화를 수행하기 전에 읽는 코드가 먼저 나타나면 예외가 발생한다.