[JavaScript] var과 호이스팅

✅ 호이스팅이란?

catName("클로이");

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

/*
결과: "제 고양이의 이름은 클로이입니다"
*/

• 함수 안에 있는 선언들을 모두 끌어올려서, 해당 함수 유효 범위의 최상단에 선언하는 것
• 함수 선언만! 끌어올려짐 (할당은❌)

 

//변수의 호이스팅 예시

console.log(name); // undefined
var name = "김점프";

//-------------------------------

var name; // name변수가 호이스팅 되어 상단으로 이동
console.log(name);
name = "김점프";

 

//함수의 호이스팅 예시

foo();
foo2();

function foo() {
	console.log("함수선언문");
}

var foo2 = function() {
	console.log("함수표현식");
}

//----------------------------------

var foo2;

function foo() {
	console.log("함수선언문");
}

foo();
foo2();

foo = function() {
	console.log("함수표현식");
}

 

✅ 호이스팅의 우선순위

변수 선언이 함수 선언보다 위로 끌어올려짐!

 

var myName = "내 이름";

function myName() {
	console.log("이름을 출력합니다");
}

function yourName() {
	console.log("이름이 뭐니?");
}

var yourName ="너의이름은";

console.log(typeof myName);
console.log(typeof yourName);

//--------------------------------------

// 호이스팅 : 변수값 선언
var myName;
var yourName; 

// 호이스팅 : 함수선언문
function myName() {
	console.log("이름을 출력합니다");
}

function yourName() {
	console.log("이름이 뭐니?");
}

// 변수에 값을 할당
myName = "내 이름";
yourName ="너의이름은";

console.log(typeof myName); //String
console.log(typeof yourName); //String

 

 

✅ 호이스팅 사용 시 주의점

• 가독성과 유지보수를 위해서 호이스팅이 일어나지 않도록 하는게 제일 좋음
• var를 쓰면 혼란스럽고 쓸모없는 코드가 생길 수 있으나........
  • ES6을 지원하지 않는 경우가 있기 때문에, 아직까지는 var를 어떻게 쓰는 지 이해는 하고 있어야 한다고 함

 

 

✅ 그래서 var는 왜 호이스팅 되는건데

호이스팅은 함수를 위해 나온 기능이라고 한다.

//함수가 호이스팅 되어야 하는 이유

var foo = function() {
	foo2();
}

var foo2() = function () {
	console.log("호이스팅에 관한 글");
}

foo(); // "호이스팅에 관한 글"

foo() 안에서 foo2()를 호출하기 위해서 호이스팅이라는 기능이 생기게 된 것!

(함수를 순서에 상관없이 호출 할 수 있도록 하기 위해)

 

근데 초기 자바스크립트는 함수를 function으로 선언할지 var로 선언할지 애매했기 때문에 var도 호이스팅 되도록 했다고 한다...😨

 

 

 

👀참고 (감사합니다)

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

[JavaScript] 호이스팅(Hoisting)이란 - Heee's Development Blog

 

https://medium.com/sjk5766/var-let-const-%ED%8A%B9%EC%A7%95-%EB%B0%8F-scope-335a078cec04

var, let, const 특징 및 호이스팅

 

https://velog.io/@nomadhash/Java-Script-var%EC%99%80-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85

[Java Script] var와 호이스팅