함수의 선언

함수를 선언하는 방법에는 크게 세가지가 있는데, 각각 어떻게 정의하는지, 장단점은 무엇이 있는지를 알아보자.

1. 함수 선언식

function action () {
	return "Action이라는 이름의 함수";
}

일반 함수라고도 하며, 가장 기본이 되는 형태로, 함수 선언식을 사용했을 때에는 호이스팅되어 최상단으로 끌어올려지며, 선언되는 줄 이전에 값을 사용할 수 있다. 예를 들어

action(); // output : "Action이라는 이름의 함수"
function action () {
	return "Action이라는 이름의 함수";
}

형식으로 사용될 수 있다. 또한, 함수 선언식 방식으로 선언된 함수는 재할당이 가능하기 때문에 다음과 같은 상황이 발생하게 된다.

action(); // output : "Action이라는 이름의 함수"
function action () {
	return "이렇게 하면 어떻게 될까요?";
}

function action () {
	return "Action이라는 이름의 함수";
}

다음과 같이, 함수 선언식은 호이스팅되고, 선언되는 줄 이전에도 값을 사용할 수 있고, 같은 이름에 재할당이 가능하기 때문에 의도치 않은 오류를 발생시킬 가능성이 높다.

2. 함수 표현식

유연한 자바 스크립트의 특징을 활용한 선언 방식으로, 다음과 같이 함수에 이름이 없는 익명함수의 형태를 이용하며,

function() { return "" }

이 익명함수를 변수에 담아서 사용하는 함수이다.

var action = function () {
	return "Action이라는 이름의 함수";
}

이 형태는 익명 함수를 변수에 담아서 사용하기 때문에 전에 Hoisting 포스트에서 다뤘던 것 처럼, 끌어올려지지만 선언되는 줄 이전에는 undefined상태이고, 선언 줄 이후에 값, 함수를 사용할 수 있다.
또한, let이나 var을 사용하게 된다면, 변수의 재할당이 가능하기 때문에 문제가 발생할 수 있으므로 const를 사용하는것이 가장 적절하다고 보여진다.

3. 화살표 함수

화살표 함수는 사실상 함수 표현식과 거의 같은데, 함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있는것에 장점이 있다.

const action = n => n + 1;

다음과 같은 형태로, 괄호도 생략하고, return도 생략한 형태로 함수를 만들 수 있다. 만약 인수가 없다면

const action = () => "action이라는 이름의 함수";

다음과 같이 인수가 들어갈 부분을 비울수도 있다. 단, 이 경우에는 괄호를 생략할 수 없다. 물론, 본문이 여러줄일때는

const action = (n) => {
  	let answer = n + 1
	return answer
}

와 같은 형태로 사용할 수도 있다. 본문이 여러 줄일 때는 중괄호를 이용해 함수의 범위를 표시해주어야한다.

결론

함수를 작성할 때에는 여러 방법을 사용할 수 있는데, 여러 장단점을 따져보았을 때, const를 이용한 화살표 함수를 가장 자주 사용하게 될 것 같다, 단 이 방법을 이용했을때, 가독성이 떨어진다고 느낄 수 있기 때문에 어떤 함수인지, //를 이용해 주석을 잘 달아주면 더 좋을 것 같다.