[javascript] 함수선언과 표현 / 호이스팅

함수선언 또는 선언문(Declaration) 

• function으로 시작해서 함수명이 존재한다. 

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

hello(); // hello

함수표현식 (Expression)

• 변수로 시작해서 변수이름을 지정하고 할당연산자를 이용하여 함수를 할당한다.

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

 

호이스팅(Hoisting)

• 자바스크립트로 인하여 함수 선언부가 유효범위 최상단으로 끌어올려지는 현상을 의미한다. 
• 함수표현식은 호이스팅현상이 발생하지 않는다.

/*함수선언*/
hello(); // hello~

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

/*함수표현식*/
hello();

const hello = function () {
  console.log("hello"); //ReferenceError: Cannot access 'hello' before initialization
};

위의 코드와 같이 함수선언문은 함수를 정의하기 전 함수를 실행을 하여도 제대로 동작하는데 이는 자바스크립트로 인해 함수가 정의된 부분의 코드가 유효한 부분 내에서 최 상단으로 호이스팅 되었기 때문이다. 

표현식으로 작성한 함수의 경우 호이스팅현상이 이러나지 않기 때문에 함수정의 이후 실행문을 작성해야한다.

 

함수선언문으로 작성할 경우 함수실행문을 먼저 작성하고 이후 정의를 작성하는 경우가 있는데 이렇게 작성하는 이유 중 한 개는 함수의 경우 함께 연결된 코드 또는 복잡한 코드들을 한 함수에 담아서 작성하는데
이럴 때 코드를 확인하고 해석하는데 오래 걸릴 수 있기 때문에 실행문의 이름을 통해 어떤 동작을 하는 함수인지 먼저 간단하게 확인하고 자세한 코드는 아래쪽에서 확인할 수 있도록 하기 위해서다.