호이스팅이란?

브라우저에서 자바스크립트를 해석할때 변수와 함수의 메모리 공간을 선언전에 미리 할당하는것을 의미합니다.
변수의 선언과 초기화를 분리한 후, 선언만 최상단으로 옮기는 것이라고 합니다.

예제를 통해 이해

함수 선언

catName("클로이"); //함수호출

function catName(name) { //함수선언
  console.log("제 고양이의 이름은 " + name + "입니다");
}

/*
결과: "제 고양이의 이름은 클로이입니다"
*/
|
|
|
V
//호이스팅발생
function catName(name) { //함수선언
  console.log("제 고양이의 이름은 " + name + "입니다");
}


catName("클로이"); //함수호출

위와 같은 경우 함수를 호출할 때 에러가 발생해야하는데 javascript에서는 호이스팅(hoisting)을 통해 함수선언문을 상단으로 옮겨서 실행시키고 함수호출문이 실행된다.

함수표현식

catName("클로이"); //함수호출 ReferenceError


var catName = function(name) {//함수 표현식
  console.log("제 고양이의 이름은 " + name + "입니다");
}
// const catName = (name) => { //화살표 함수
// 	console.log("제 고양이의 이름은 " + name + "입니다");
// }


|
|
|
V
//호이스팅
var catName;
catName("클로이"); //함수호출 ReferenceError

catName = function(name) {//함수 표현식
  console.log("제 고양이의 이름은 " + name + "입니다");
}

함수표현식 catName이 호이스팅되어 선언이 됐지만 브라우저에서는 일단 변수로 인식하여 error를 뱉는다.
선언만 되었기 때문이다.

알수있는 점

함수 선언식은 호이스팅 O
함수 표현식은 호이스팅 X

함수표현식 사용이유

• 호이스팅의 영향을 받지 않는다. (가독성과 유지보수가 좋다)
• 클로져로 사용
• 콜백으로 사용

변수선언

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

아래 코드는 error가 발생하는데 선언 부가 없어서 그렇다.

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

호이스팅 주의사항

• 코드의 가독성과 유지보수를 위해 호이스팅이 일어나지 않도록한다.
  주로 함수표현식으로 선언

  • 호이스팅 발생시 스코프가 꼬이므로 유지보수시 원인을 찾기 어려울 수 있다.

• var을 사용하지 않고 let/const 사용

var, let, const 호이스팅 차이

var는 선언 전에 접근하면 undefined로 보여집니다.
var, let, const도 호이스팅이 발생합니다.
하지만 let과const는 초기화 하기전에 읽거나 사용 할 수 없습니다.

console.log(bar); // undefined
console.log(foo); // ReferenceError
console.log(con); // ReferenceError
var bar = 1;
let foo = 2;
const con = 3;

var

var은 호이스팅 발생으로 최상위 스코프에서 선언된다.

let 과 const의 차이

호이스팅이 발생하는 건 같지만 const는 선언시 초기화가 필요하다.

let ne;
const nj; // 초기화 error 발생

const는 변경이 되지 않기 때문에 선언시 초기화도 해주어야 한다.

스코프란

쉽게 말하면 변수에 접근할 수 있는 범위이다.
기본적으로 자바 스크립트는 함수 스코프를 따르는 언어

블록 스코프와 함수 스코프로 나눌 수 있다.

함수 스코프

함수가 생성 될 때마다 새로운 스코프가 발생한다.

블록 스코프

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

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/let#%EC%8B%9C%EA%B0%84%EC%83%81_%EC%82%AC%EA%B0%81%EC%A7%80%EB%8C%80

https://gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html

https://joshua1988.github.io/web-development/javascript/function-expressions-vs-declarations/

https://www.sitepoint.com/demystifying-javascript-closures-callbacks-iifes/

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/let#temporal_dead_zone_and_errors_with_let

https://velog.io/@fromzoo/%ED%95%A8%EC%88%98%EC%8A%A4%EC%BD%94%ED%94%84-vs-%EB%B8%94%EB%A1%9D%EC%8A%A4%EC%BD%94%ED%94%84