var,let,cont 차이와 호이스팅(Hoisitng)

변수 선언할 때마다 헷갈리는 var , let, const의 차이와 호이스팅에 대하여 알아봅시다 👻

---

var let const

	var	let	const
중복선언	O	X	X
재할당(수정)	O	O	X
존재범위	function	{}:블록	{}:블록
호이스팅	O

단, const로 선언된 변수가 object형일 경우 object 내 데이터에 대해서는 변경 가능

컴포넌트 밖에서 let은 절대 쓰지 맙시다!

그 컴포넌트를 여러번 호출했을 때, let으로 선언한 변수가 공유되는 문제가 발생 !!

✔️렌더할 때 export하는 그 컴포넌트만 만든다.
그 밖에 있는 변수는 처음에 import할때 딱 한번되는거니깐 공유되는 것!

const 는 사용 가능!
왜? const는 재할당이 불가능하니까 공유되어도 어짜피 처음 선언했을 때 할당받은 값으로 이용됨.

💡useState 사용해서 관리하자 ^^!

호이스팅(Hosting)

함수 내부에 있는 선언들을 모두 끌어올려 해당 함수 유효 범위의 최상단에 선언하는 것

실제로 코드가 끌어올려지는 것이 아닌, 자바스크립트 Parser가 함수 실행 전 해당 함수를 한 번 훑는 과정에서 내부적으로 끌어올려 처리하는 것을 뜻하며 실제 메모리에서는 변화가 없음
=> 미리 선언문을 실행해둔다고 이해하면 됨.

• var,함수선언문( function ~(){}) : 호이스팅 됨
• let,const,함수표현식(car ~ =function --(){}) : 호이스팅 되지만 접근 X
  함수표현식을 사용하거나 let 또는 const 로 변수를 선언하는 경우, 자바스크립트 내부에서는 코드 실행 전 변수 선언만 해둘뿐 초기화는 코드 실행 과정에서 변수 선언문을 만났을 때 수행함. 그렇기 때문에 호이스팅이 발생하기는 하지만, 값을 참조할 수 없기 때문에 동작하지 않는 것처럼 보이는 것임.