호이스팅

의미 :

1. 함수 내의 변수 및 함수 선언을 각 유효 범위의 최상단으로 끌어 올려주는 JS의 독특한 특징이다.

2. 선언문이 코드의 선두로 끌어올려진 것처럼 동작하는 현상

 

종류 :

🚨 var은 변수/함수 선언문 에서만 호이스팅이 일어난다.

🚨 let, const의 변수 선언과 모든 함수표현식(let,var,const,안넣고 변수로만)에선 호이스팅이 발생하지 않는다. <-- 호이스팅만 되지 않을뿐 밑에는 결과값이 출력이 된다.

🚨 var 변수/함수의 선언만 위로 끌어올려지며, 할당은 끌어올려지지 않는다.

 

1. 변수 호이스팅

let, const 변수 선언 :

1. let 예시1 = '~' <-- error 발생

2. const 예시2 = '~' <-- error 발생

var name = 'Jin';
console.log(name); // 호이스팅 발생
// output : "jin" : 출력으로 Jin이 나타남

let name2 = "jin";
console.log(name2); // 호이스팅 발생 X
// output : undefined : 출력으로 undefined

 

 

2. 함수 호이스팅

 

함수 표현식

예시1)

// 변수 호이스팅
console.log(lunchMenu);<-- 선언은 되지만 할당은 안됨

var lunchMenu = '마라탕';
console.log(lunchMenu);

//함수 호이스팅
deFunc('위 : ')
//expFunc('위 : ') <-- 호이스팅 되지 않는다.

function deFunc(value) {
    console.log(value,'함수 선언문');
}

const expFunc = function(value){
    console.log(value,'함수 표현식');
}

expFunc('아래 : ')
deFunc('아래 : ')

예시2) 함수 표현식의 종류

//함수선언
const intro = function intro() {
    console.log('마라팀에서 왕고를 맡은 임형종입니다.');
}

//함수호출
intro();

//매개변수
const intro2 = function intro2(name) {
    console.log(`마라팀에서 정글을 맡은${name}입니다.`);
}
intro2('임형종');

//매개변수 + return문
const intro3 = function intro3(name){
    return `마라팀에서  건두부를 좋아하는 ${name}입니다.`
}
intro3('임형종');//출력x
console.log(intro3('임형종'));

 

예시3) 함수표현식  화살표 함수 :

함수표현식 형태로 , function 대신에 =>을 넣어준다.

//함수선언
const intro = (name) => {
    console.log('마라팀에서 왕고를 맡은 임형종입니다.');
}

//함수호출
intro();

//매개변수
const intro2 = (name) => {
    console.log(`마라팀에서 정글을 맡은${name}입니다.`);
}
intro2('임형종');

//매개변수 + return문
const intro3 =  (name)=>{
    //매개변수 1개 => () 생략 가능
    //실행문 1ㄱㅐ => {}+return 생략가능
    return `마라팀에서  건두부를 좋아하는 ${name}입니다.`
}
intro3('임형종');//출력x
console.log(intro3('임형종'));