호이스팅이란?
브라우저에서 자바스크립트를 해석할때 변수와 함수의 메모리 공간을 선언전에 미리 할당하는것을 의미합니다.
변수의 선언과 초기화를 분리한 후, 선언만 최상단으로 옮기는 것이라고 합니다.
예제를 통해 이해
함수 선언
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://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/
