호이스팅(hoisting)

어렴풋이만 알고 있었는데 호이스팅이 뭔지 아냐고 물어보니 정확하게 대답을 못했다. 이참에 

하나씩 제대로 공부를 해봐야겠다.

- 호이스팅(hoisting) : js의 동작 순서에 대해 이해하기

"변수와 함수의 메모리 공간을 선언 전에 미리 할당하는것"
"변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는것"
var : 호이스팅 시 undefined로 변수 초기화 (선언과 초기화가 동시에 이루어짐)

-> 변수 할당이전에도 호이스팅해 사용이 가능하다.

console.log(name); // 1)undefined
var name = "jiwon";
console.log(name); // 2)jiwon

var name = "banana";
console.log(name); // 3)banana

let, const : 호이스팅 시 변수를 초기화 하지 않음

 

- 변수선언의 단계

1)선언 단계 - 변수 객체에 변수를 등록, 스코프가 참조하는 대상이 된다.

2)초기화 단계 - 변수 객체에 등록된 변수를 메모리에 할당, 변수는 undefined로 초기화된다.

3)할당 단계 - undefined로 초기화된 변수에 실제 값을 할당

 

- 함수의 실행

또한 js는 함수의 코드를 실행하기전에 함수 선언에 대한 메모리 할당이 우선순위다.
코드 하단에 함수 선언했어도 우선순위가 높기 때문에 상단에서 함수 호출해서 사용할 수 있다.

callName("jiwon")

function callName(name){
console.log(name);
}

/*
결과: "jiwon"
*/

 

- 결론

변수 선언에는 기본적으로 const를 사용하고(의도치 않은 재할당을 방지해줌) let은 재할당이 필요한 경웨 사용한다.

->let을 사용할 때 스코프는 최대한 좁게 만든다.

그리고 ES6사용할 때 var는 안쓰면 된다.

포이머 웹을 참고해보면 이런 말이 결론으로 있다.

 

변수를 선언하는 시점에는 재할당이 필요할지 잘 모르는 경우가 많다. 그리고 객체는 의외로 재할당을 하는 경우가 드물다. 따라서 변수를 선언할 때에는 일단 const 키워드를 사용하도록 하자. 반드시 재할당이 필요하다면(반드시 재할당이 필요한지 한번 생각해 볼 일이다.) 그때 const를 let 키워드로 변경해도 결코 늦지 않는다.

 

그리고 함수의 경우 선언문 대신 표현문을 사용하면 호이스팅을 방지할 수 있다.

 

- 다음에 참고할 학습

스코프(SCOPE), 와 클로저에 대해 학습해야겠다.

 

- 참고한 링크

https://developer.mozilla.org/ko/docs/Glossary/Hoisting#%EA%B8%B0%EC%88%A0_%EC%98%88%EC%A0%9C

호이스팅 - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN

https://edu.goorm.io/learn/lecture/557/%ED%95%9C-%EB%88%88%EC%97%90-%EB%81%9D%EB%82%B4%EB%8A%94-node-js/lesson/226443/%EC%8A%A4%EC%BD%94%ED%94%84%EC%99%80-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85

구름EDU - 모두를 위한 맞춤형 IT교육

https://poiemaweb.com/es6-block-scope

let, const | PoiemaWeb

https://poiemaweb.com/js-data-type-variable

Data type & Variable | PoiemaWeb