자바스크립트에서는 함수를 정의하는 4가지 방법이 있다.

• 함수 선언문
• 함수 표현식
• 화살표 함수
• Function 생성자 함수

함수란?
수학의 함수가 "입력"을 받아 "출력"을 내보내는 거라면, 프로그래밍 언어의 함수는
일련의 과정을 문(statement)로 구현하고 블록으로 감싸서 하나의 실행 단위로 정의하는 것
이라고 한다.
프로그래밍 언어의 함수도 입력을 받아서 출력을 내보내는데, 이때 입력을 전달하는 변수는 매개변수
함수에 입력되는 걸 인수, 출력 되는걸 반환값이라고 한다.

함수 선언문 - Function Declarations

일반적인 프로그래밍 언어에서의 함수 선언과 비슷한 형식으로, 자바스크립트 초창기부터 존재했던 전통적인 방식이다.
함수 선언문은 함수 리터럴과 형태가 동일하지만 이름을 생략할 수 없다.

특징

• 스크립트 최상위에 등록되기에 호출 순서에 구애받지 않는다.
• 함수 전체 스코프에 등록되므로 이름 충돌 위험이 있다.
• 또한 특정 모듈 내에서만 사용하고자 할때는 관리가 어렵다.
• 이름이 있으므로, 디버깅이나 재귀 호출등에 쓰인다.
• 이름을 잘 짓는다면 코드 구조를 직관적으로 이해할 수 있다.

함수 표현식 - Function Expression

함수 선언문과 함께 초창기부터 존재했지만, 변수에 할당한다는 점에서 차이를 나타내는 선언방식이다.
함수 리터럴을 변수에 할당하여 함수를 선언한다.

특징

• 콜백 함수나 IIFE(즉시 실행 함수)등에서 간편하게 사용할 수 있다.
• 선언문과 달리 변수에 할당하는 시점 이후부터 사용되므로 선언 시점과 실행 시점을 명확히 구분할 수 있다.
• 근데 선언 전에 사용하면 에러가 발생한다.
• 다른 변수나 인수로 전달할 수 있다.
• 위와 같은 이유로 코드의 추적과 디버깅에 어려움을 느낄 수 있다.

화살표 함수

ES6부터 도입되어 기존 함수 표현식을 화살표로 간결하게 작성할 수 있는방법이다.

형식

블록

화살표와 중괄호({},블록)을 통해 함수를 선언한다.

단일

함수의 실행문이 짧을 때 사용하는 방법이다.
화살표 뒤에 중괄호 없이 바로 동작을 넣어 함수를 선언한다.

특징

• 블록이든 단일이든 코드가 짧아서 콜백이나 고차함수에 자주 사용된다.
• 화살표 함수 자기 자신을 부르는 this를 갖고있지 않아서 상위 스코프의 this를 그대로 사용한다. 이러한 특징은 컴포넌트나 비동기 콜백에서 별도의 바인딩 없이도 안정적으로 this를 사용할 수 있게 한다.
• arguments 객체가 없어서 rest parameter를 사용한다.
• new 연산자를 사용할 수 없어서 프로토타입을 생성하지 않는다.
• 되도록이면 복잡한 코드는 지향한다.

잘 사용되지 않지만 다른 생성방법 - Function 생성자 함수

자바스크립트 빌트인 함수인 Function 생성자 로 만드는 함수이다.
매개변수 목록과 함수 몸체를 문자열로 전달하면서 new 연산자와 함께 호출하면 함수 객체를 생성해서 반환하는 함수이다.

해당 방법을 잘 사요하지 않는 이유는 다음과 같다.

• 해당 함수는 클로저(Closure)를 생성하지 않아서 외부 변수를 사용할 수 없다.
• 함수 내부에 문자열을 이용해 로직을 구현하므로 인젝션 공격에 취약하다.
• 문자열로 작성되어있어 디버깅이 어렵다.