자바스크립트 함수 선언시 선언과 표현식의 차이점

아래와 같은 예제는 다른 결과를 가져옵니다.
 

console.log(test);

test = function() {
  return;
};

에러가 발생합니다. 하지만 아래는?
 

console.log(test);

function test() {
  return;
};

이번에는 undefined 에러가 발생하지 않습니다. 그 이유는 함수가 선언되면 제일 먼저 그 위치를 위로 올려 실행시키기 때문입니다. 이를 호이스팅(hoisting: 함수 선언을 끌어올림)이라고 합니다.



아래처럼 특정 상태에 따라 다른 함수를 선언하는 것이 가능합니다. 만약 condition이라는 조건이 있다면...

<script>
var isTrue = true;
if(isTrue) {
  function testFunc() {
    return 1;
  }
}
else {
  function testFunc() {
    return 2;
  }
}
</script>

이 방법은 잘못된 방법입니다. 호스팅 때문에 어떤 함수가 먼저 선언될 지 모르죠... 하지만 아래처럼 함수 선언 방식은 가능합니다.
 

<script>
var isTrue = true;
if(isTrue) {
  testFunc = function() {
    return 1;
  }
}
else {
  testFunc = function() {
    return 2;
  }
}
</script>

오류가 발생할 수 있으므로 함수 선언시 더욱 주의해야합니다.