함수 표현식, 함수 선언식

일급 객체

자바스크립트에서 특별한 대우를 받는 것들을 일급 객체라고 부르며, 그 중 하나가 함수이다.
자바스크립트에서 함수는

• 변수에 할당할 수 있다.
• 다른 함수의 인자로 전달될 수 있다.
• 다른 함수의 결과로 리턴될 수 있다.

이렇게 특별하게 취급된다.

이는 함수를 데이터처럼 다룰 수 있다는 것을 의미하고, 변수에 저장하여 배열의 요소나 객체의 속성값으로 저장하는 것도 가능하다.

함수 선언식, 함수 표현식

함수 선언식

일반적인 프로그래밍 언어에서의 함수 선언과 비슷한 형식이다

function example() {
  return 'this is test function'
}
example() // 'this is test function'

함수 표현식

유연한 자바스크립트 언어의 특징을 활용한 선언 방식

let example = function() {
    return 'this is test function'
  }
example() // 'this is test function'

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

함수 선언식 호이스팅에 영향을 받음.
함수 표현식 호이스팅에 영향을 받지 않음.

함수 선언식은 코드를 구현한 위치에 상관하지 않고 자바스크립트의 특징인 호이스팅 에 따라, 브라우저가 자바스크립트를 해석할 때 위치가 끌어올려진다.

logMessage();
sumNumbers();

function logMessage() {
     return 'worked';
     }

var sumNumbers = function () {
     return 10 + 20;
     }

예를 들어 위와 같은 코드를 실행하게 되면 호이스팅에 의해 아래와 같이 인식하게 된다.

function logMessage() {
      return 'worked';
      }

var sumNumbers;

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

sumNumbers = function () {
      return 10 + 20;
      }

함수 표현식으로 작성한 sumNumbers에서 var도 호이스팅이 적용되어 위치가 상단으로 끌어올려진 것을 볼 수 있다.
하지만 선언만 끌어올려지고 할당은 호출된 이후에 할당되므로, sumNumbers는 함수로 인식하지 않고 변수로 인식한다.

호이스팅에 대해 제대로 이해하지 못한 상태일지라도, 함수와 변수를 가급적 코드 상단부에서 선언하는 습관을 들이면 호이스팅으로 인한 스코프 오류는 사전에 방지할 수 있다.