[JavaScript] 함수 선언식과 함수 표현식

함수 선언식

일반적인 프로그래밍 언어에서 사용하는 방법과 유사

function 함수명() {
  구현 로직
}

function funcDeclarations() {
  return 'A function declaration';
}
funcDeclarations(); // 'A function declaration'

함수 표현식

자바스크립트만의 함수 방식

var 함수명 = function () {
  구현 로직
};

var funcExpression = function () {
    return 'A function expression';
}
funcExpression(); // 'A function expression'

---

함수 표현식과 선언식의 차이점

함수 선언식은 호이스팅에 영향을 받지만, 함수 표현식은 호이스팅에 영향을 받지 않는다.
함수 선언식은 코드를 구현한 위치와 관계없이 자바스크립트의 특징인 호이스팅에 따라 브라우저가 자바스크립트를 해석할 때 맨 위로 끌어 올려진다.

ex)

// 실행 전
Message();
sumNum();

function Message() {	//함수 선언식
  return 'good';
}

var sumNum = function () {	//함수 표현식
  return 3 + 2;
};

다음과 같은 코드에서 실제로 자바스크립트는 아래와같이 해석한다.

// 실행 시
function Message() {
  return 'good';
}

var sumNum;

logMessage(); // 'worked'
sumNumbers(); // Uncaught TypeError: sumNumbers is not a function

sumNum = function () {
  return 3 + 2;
};

결과

함수 표현식 sumNumbers 에서 var 도 호이스팅이 적용되어 위치가 상단으로 끌어올려졌다.
하지만 실제 sumNumbers 에 할당될 function 로직은 호출된 이후에 선언되므로, sumNumbers 는 함수로 인식하지 않고 변수로 인식한다.

따라서 호이스팅을 제대로 모르더라도 함수와 변수를 가급적 코드 상단부에서 선언하면, 호이스팅으로 인한 스코프 꼬임 현상은 방지할 수 있다.

---

함수 선언식으로 작성한 함수는, 함수 전체가 호이스팅 된다고 하였는데, 전역적으로 선언하게 되면, 중복적으로 동명의 함수를 쓰게 된다면, 원치 않는 결과를 초래할 수 있다.

함수 표현식으로 작성하게되면 이를 방지할 수 있다.