[토의] 호이스팅에 대하여.

[Markers]

질문

1. 호이스팅이 무엇인가?

2. 왜 알아야 하는가?

3. 호이스팅으로 인한 장점 혹은 단점이 있는가? [이 부분에 대해서 생각해봅시다]

상세내용

변수 선언문이 위치와 상관없이 유효 스코프의 최상단으로 올려진 것처럼 동작하는 자바스크립트의 특성.

var 변수 선언과 함수 선언문에서만 호이스팅이 발생.

동작 순서

1. 자바스크립트 엔진이 런타임 이전에 소스코드를 평가. 호이스팅이 발생하는 변수 선언문을 유효 스코프 최상단으로 끌어올림.
2. 그 후에 소스코드를 한라인씩 위에서 아래로 순서대로 실행.

예제.

// Test.js
// node로 실행
console.log(score) // undefined 

score = 80  // 값의 할당
var score; // 변수 선언

console.log(score) // 80

호이스팅으로 인하여 변경

// Test.js
// node로 실행
var score; // 변수 선언, 호이스팅으로 인하여 변수 선언문이 위로 옮겨짐

console.log(score) // undefined 
score = 80  // 값의 할당

console.log(score) // 80

출력 결과물

undefined.            /// 에상대로라면 reference error 라던지 별도의 에러 출력이 되어야..?
80

ES6 이후부터는 변수 선언시 const 와 let 키워드가 추가되어 사용되어 호이스팅이 발생하지 않았지만, 그 이전의 소스들은 var를 이용하여 사용하였기에 사용자의 의도와 다르게 소스가 동작할 수 있음. 이를 인지하고 있어야 함.

호이스팅의 장단점?

예전에 호이스팅의 장점? 이라고 설명을 한 글을 본거 같은데 기억 나질 않아 의문이 드네요. 일단은 자바스크립트의 예전 문법의 부가효과이기 때문에 인지를 해야된다고 책에서는 언급하고 있습니다.
단점으로는 예상 밖의 결과를 초래할 수 있다는 점과 이런식의 호이스팅을 일으키는 선언문이 많을 경우, 소스를 실행하기 전에 처리해야 할 부분이 많아져 느려지는 부분이 있다고 알고 있습니다.
혹 다른 분들이 알고 있는 부분이 있으면 알려주세요.

참고

모던 자바스크립트 Deep Dive 책 4장 변수, 43p

[jessi68]

1. 호이스팅이 무엇인가?
   호이스팅이란 변수의 선언하는 부분이 코드의 맨위로 옮겨져서 코드가 실행되는 것을 말한다.
2. 왜 알아야 하는가?
   자바스크립트로 코딩을 짜면서 호이스팅 부분을 제대로 알고 있으면, 변수 선언 측면에서의 오해를 줄일 수 있다.
3. 호이스팅으로 인한 장점 혹은 단점이 있는가? [이 부분에 대해서 생각해봅시다]
   일반적으로 위에서부터 아래로 차근 차근 실행되는 방식과 약간 괴리감이 있어 헷갈리기 쉽다.
   단점 큰 프로그램이 있을 때, 변수 선언을 실수로 뒤에 넣었을 때 오류를 고칠 필요가 없다.(?)

[live-small]

1. 호이스팅은 무엇인가?
호이스팅은 변수의 선언이 코드 상단에 옮겨져서 실행되는 것처럼 작동하는 것을 말한다.

2. 왜 알아야 하는가?
호이스팅은 자바스크립트 동작방식이기 때문에 알고 있어야한다.
자바스크립트 엔진은 소스코드를 평가한 뒤, 실행한다.
소스코드 평가에서 선언된 변수를 찾아내 먼저 실행하기 때문에,
선언이 코드 상단에 옮겨져서 실행되는 것처럼 보인다.

const, let도 호이스팅이 이루어진다. 근데 왜 var랑 다르게 작동할까?

변수의 생성과정: 선언 - 초기화 - 할당

이유는 변수의 생성과정에 있다.
var는 런타임 이전인 소스코드 평가때, 선언과 초기화(undefined) 함께 이루어진다.
let, const는 소스코드 평가에 선언만 이루어지며, 런타임에 변수 선언문에서 초기화가 이루어진다.
그렇기에 let,const도 호이스팅이 이루어지지만, 참조오류때문에 호이스팅이 작동하지 않는 것처럼 보인다.

console.log(a); // ReferenceError: Cannot access 'a' before initialization 
let a = 5; 

에러메시지를 잘 보면, 초기화 전에 접근했기에 참조오류를 내고있다.
즉, 변수 a의 선언은 이전에 일어난 것을 알 수 있다.
*var, let, const 이외에도 function, class 등 모든 선언은 런타임 이전에 실행된다.

• 읽어보면 좋을자료
  • let, const hoisting: https://junhobaik.github.io/js-let-cont-hoisting/
  • var 키워드로 선언된 변수의 문제점: https://poiemaweb.com/js-data-type-variable#24-%EB%B3%80%EC%88%98-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85variable-hoisting

3. 호이스팅 장/단점
장점: 사용할 클래스, 함수 등을 의도적으로 상단에 선언하지 않아도 잘 작동한다.

hi('me');  // 선언 전, 실행해도 잘 작동한다. 호이스팅때문! 

function hi(name) {
    console.log(`hello world! it's ${name}`);
} 

단점: var 처럼 선언과 초기화가 함께 일어날 경우, 에러를 내지 않기에
런타임에 프로그램이 죽어도 원인을 찾기 쉽지 않다.

참고

1. https://stackoverflow.com/questions/15005098/why-does-javascript-hoist-variables
2. 모던 자바스크립트 deep dive 15장, 23장