함수 선언문과 함수 표현 식의 차이 그리고 호이스팅

1. 함수 선언문 

함수 선언 Keyword로 시작해서 함수를 선언하는 문장. 

//함수 선언문
function hello () {}

function 함수이름 (인수 넣는 자리) {동작 로직} 형태로 적힌다. 

 

 

2. 함수 표현식 

변수에 익명함수나 기명 함수를 대입하는 형태의 표현식이다. 

// 표현식 1. 기명함수를 변수에 대입
const world = function hello () {}

// 표현식 2. 익명함수를 변수에 대입
const world2 = function () {} 
const world3 = () => {}

표현식 1인 기명함수를 변수에 대입할 시 원래 함수의 이름으로 더 이상 호출하여 쓰지 못한다. 무조건 대입한 변수 이름으로만 호출하여 쓸 수 있다. 

hello();
// error -> 엥? hello란 함수가 없는데?? 


world();
// 정상작동 -> 이제 해당 함수의 이름은 hello가 아니라 world 이다.

 

3. 호이스팅. 

함수의 선언부를 코드의 유효범위 내의 최상단으로 끌어 올려 주는 것을 뜻한다. 

해당 행위는 JS 컴파일러가 자동으로 해준다. 

이렇게 되면 함수 선언부 보다 해당 함수 호출을 먼저 했더라도, 컴파일러가 무슨 함수를 호출한 것인지 알아차려서 에러 없이 동작을 수행할 수 있다.

 

Java에서는 함수 선언부의 인수 까지만 적힌 형태를 최상단에 개발자가 직접 쳐줘서 컴파일러에게 알려줘야 했다.

이에 비해선 편하다. 

 

**호이스팅의 조건! 

호이스팅은 함수 선언문으로 작성된 함수에게만 지원하고, 함수 표현식으로 작성된 함수에게는 작동되지 않는다. 

 

hello();
world();

function hello() {
  console.log("hello~");
}

const world = function hello2() {
  console.log("hello2~");
};



// hello는 작동하지만, world는 작동하지 않는다. 
// 왜냐하면 hello는 함수 선언문 형태로 작성되어서 JS가 자동 호이스팅을 해주지만, 
// world는 함수 표현식으로 적혀서 자동 호스팅이 안되기 때문이다.

실행 결과: world는 초기화 전에 호출 해서 쓰려고 했고 이것은 에러다. 고 알려준다.

 

**JS에서 함수 호출에 관하여! ** 

function hello () {return "안녕하세요"};

console.log(hello)
// 잘못된 호출 -> 이렇게 하면 함수 자체가 호출됨. 

console.log(hello());
// 반환값인 안녕하세요가 호출됨.

 

3. 스스로 해보기