JavaScript Hoisting

블레어(blair)·2020년 6월 13일
1

JavaScript

목록 보기
3/4
post-thumbnail

호이스팅 ?

  • 호이스팅이란 var로 변수가 선언되거나 선언식으로 함수가 선언될 경우 스코프의 최 상단으로 끌어올려져서 선언하기 전에 호출하는것이 가능해지는 것을 의미합니다.

언제 ? 선언식 함수 & var로 선언된 변수

  • 함수가 선언되는 몇가지 방식에대해서 먼저 이해하고 있어야 한다.
    함수의 정의방식은 1.선언식2.표현식3.생성자함수 이 세가지로 정의 될 수 있다.여기서 호이스팅과 관련된 얘기는 1번과 2번인데
    코드로 예시를 들자면
console.log(add(1,2)) // 3      선언식함수 호이스팅
console.log(sum(1,2) // error
console.log(first) // 2         var 호이스팅

// 변수선언
var first = 2

// 선언식함수
function add(a,b) {
	return a + b
}

//표현식 함수
const sum = function add() {
	return a + b
}
  • 즉 변수에 할당되지 않고 선언된 함수를 선언식으로 정의됬다고 말하고 변수에 담긴 함수를 표현식으로 정의됬다고 한다.
    호이스팅의 의미를 다시 상기시키자면, 함수가 표현식이 아닌 선언식으로 선언되면 현재 스코프의 최상단으로 끌어올려 지는 것을 의미한다. (즉 함수선언문에서 호이스팅이 일어난다)
    호이스팅은 변수선언 중 var에서도 일어난다.

선언식 함수의 이름과 var로 선언된 변수이름이 같다면?

  • 그렇다면 var와 선언식함수의 이름이 같다면? 상단에서 console.log를 찍으면 var가 우선순위로 결과가 나온다.
    그런데 만일 var가 undifined상태로 선언됬다면 그때는 선언식 함수의결과가 출력되는 것 이다.
console.log(kim) // 2 var가 함수를 덮음

var kim = 2

function kim() {
	return 5
}

console.log(lee) // 5 선언식함수가 var를 덮음

var lee;

function lee() {
	return 5
}
profile
프론트엔드 개발자 블레어의 개인 블로그 입니다. 개발공부를 하며 나누고 성장하고 싶습니다 :)

0개의 댓글