[TIL] Day 1

더 생각해 보아야 할 내용들

호이스팅 (Hoisting)

-자바스크립트에서 실행 콘텍스트가 어떻게 동작하는가에 대한 일반적인 생각 
-함수 안에 있는 변수 및 함수 선언들을 모두 끌어올려 해당 함수 유효 범위의 최상단에 선언 하는 것
 
	
    
    ● 자바스크립트 Parser가 함수 실행 전 해당 함수를 살펴본다.
    ● 함수 안에 존재하는 변수 및 함수 선언에 대한 정보를 기억하고 있다가 실행시킨다.
    ● 즉, 함수 내에서 아래쪽에 있지만 필요한 값들을 끌어 올리는 것이다.
    (실제 물리적인 코드는 변화하지 않고, 자바스크립트 Parser 내부적으로 끌어 올려서 처리하는 것)
    

호이스팅의 대상

	● var 변수 선언과 **함수 선언문**에서만 호이스팅이 발생한다. 
    		(단, 변수/함수의 선언만 위로 끌어 올려지며, 할당은 끌어 올려지지 않는다.)
	● let/const 변수 선언과 **함수 표현식** 호이스팅이 발생하지 않는다.

간단한 예제

console.log(hello); //hello의 선언이 끌어 올려져 있지만 할당은 되어있지 않으므로  undefined 출력
//console.log(bye); //bye는 현재 선언되어있지 않으므로 오류발생
var hello = "안녕하세요~ 만나서 반갑습니다.";
let bye = "안녕히계세요 저는 이만 가보겠습니다.";
//선언 할당 모두 되어있어 정상 출력
console.log(hello);  
console.log(bye);

myFnc();    //정상 출력
//myFnc2(); //에러
function myFnc(){
return console.log("myFnc 입니다. Hoisting 되었어요!");
}
const myFnc2 = function(){
return console.log("myFnc2 입니다. Hoisting 되지 않았어요!");
}
myFnc2(); //정상 출력

호이스팅 우선순위

만약 var 변수와 함수 선언문으로 작성한 함수명이 같다면 어떻게 될까?

var itsMe = "저에요 변수";
var itsMe2 ; //할당은 하지 않고 선언만 한 경우
function itsMe(){
return 1;
}
function itsMe2(){
return 1;
}
/*
---------------------실제 동작 과정-----------------
1. 변수를 먼저 선언
    var itsMe;
    var itsMe2;             
2. 함수 선언
    function itsMe(){
        return 1;
    }
    function itsMe2(){
        return 1;
    }
3. 변수에 할당
    itsMe= "저에요 변수";
*/
console.log(itsMe, typeof(itsMe));    // 실행결과 - 저에요 변수 string
console.log(itsMe2, typeof(itsMe2));  // [Function: itsMe2] function

 값이 할당 되어있는 변수 - 변수가 함수 선언문을 덮어씀
 값이 할당 되어있지 않은 변수 - 함수 선언문이 변수를 덮어씀
 
 

3줄 요약

	1. 코드의 가독성과 유지보수를 위해 가급적 호이스팅이 일어나지 않도록 할것!
    	2. let / const를 사용하기!
        3. let과 / const는 ES6부터 사용가능 ES5로 트랜스 컴파일 해야하는 경우를 위해서 var가 동작 하는것을 이해하고 있어야한다.
        

Reference
https://gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html
https://developer.mozilla.org/ko/docs/Glossary/Hoisting