JS : 호이스팅 (Hoisting)

 

JS : 호이스팅 (Hoisting)

---

• 코드에 선언된 변수 및 함수를 유효한 범위의 코드 상단으로 끌어올리는 작업을 말한다.
• var 변수/함수의 선언만 위로 올려지고, 할당은 올려지지 않는다.
• let / const 변수 선언과 함께 표현식에서는 호이스팅이 발생되지 않는다.
• var를 사용할때 발생되며, 무분별한 호이스팅이 발생하여 변수에 대한 선언이 순서를 안 지켜지고 정상적으로 작동을 안 할 수가 있기 때문에 let / const를 사용하는 것을 지향한다.

---

 

 

 

// 001 var 를 사용할때 호이스팅 
console.log(name); // undefined 
var name = "aaa"; 
console.log(name); // 'aaa'

// 002 var 를 사용할때 호이스팅 
console.log(hello); // undefined hello 변수에 undefined로 초기화가 됨
hello ="안녕하세요"  // "안녕하세요" 할당됨
console.log(hello) // "안녕하세요"
var hello // hello 선언


// 003 var, let, const 호이스팅
console.log(name1); // undefined
console.log(name2); // ReferenceError: name2 is not defined
console.log(name3); // ReferenceError: name3 is not defined

var name1 = "aaa";
let name2 = "bbb";
const name3 = "ccc";

console.log(name1); // 'aaa'
console.log(name2); // 'bbb'
console.log(name3); // 'ccc'

 

 

• 자바스크립트 함수는 실행되기전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위의 최상단에 선언한다.
  • 자바스크립트 Parser 가 함수 실행 전 해당 함수를 한번 훑는다.
  • 함수 안에 존재하는 변수/함수 선언에 대한 정보를 기억하고 있다가 실행시킨다.
  • 유효범위 함수 블록(scope) {}안에서 유효

• 즉, 함수 내에서 아래쪽에 존재하는 내용 중 필요한 값들을 끌어올리는 것이다.
  • 실제로 코드가 끌어올려지는 건 아니며, 자바스크립트 Parser 내부적으로 끌어올려서 처리하는 것이다.
  • 메모리에서는 변화가 없다.

 

JS : Scope (스코프)

 

 

---