[JS/함수] 화살표 함수 1분만에 이해하기 : 함수(Function)을 정의하는 4가지 방법

Function을 선언하는 방법은 총 4가지가 있다.

1. 함수 선언문을 통해 정의하는 방법

function plus(x,y) {
  return x+y;
}

이렇게 정의하려면, 반드시 함수 이름을 써줘야만 한다.

 

2. 함수 표현식을 통해 정의하는 방법

const plus = function(x,y){
  return x+y;
};

좀 더 발전된 형태의 정의 방법이다.
이 경우 함수 이름을 생략할 수가 있다. 이를 익명 함수라고 부른다.

그렇다면 함수 표현식으로 정의하면서 동시에 함수 이름도 부여하는 경우, 함수를 호출할 때는 무엇으로 함수를 불어야할까?

이미 함수 표현식을 이용하여 plus에 익명함수를 할당한 후에, 다시 minus에 plus라는 이름의 함수를 할당하여도 에러가 뜨지 않는다. 동시에 minus를 호출하여 연산하면, minus에 할당된 바로 그 함수가 실행되지만, 다시 plus를 호출하여 연산하면 앞서 정의한 익명함수가 실행되는 것을 볼 수 있다.

이를 통해 함수는 함수 이름으로 호출하는 것이 아니라 함수 객체를 가리키는 식별자로 호출된다는 점을 알 수 있다.

 

3. 화살표 함수를 통해 정의하는 방법

const plus = (x,y) => x+y;

위 코드의 경우 return을 내포(암묵적 리턴, implicit return)하고 있다.

const plus = ((x,y) => {return x+y});

한편, 위와 같이 표현하게 되면 return을 명시적으로 표현할 수 있다. 물론 return을 원하지 않는다면 return 하지 않을 수도 있다.

양자의 차이점은 중괄호의 여부이다. 중괄호가 없다면 반드시 화살표 다음의 코드를 return하게 되고, 중괄호가 있다면 함수 표현식에서의 중괄호와 같은 역할(여러 문을 묶어둠)을 수행하므로, return이 필요하면, 별도로 return을 입력해줘야만 한다.

어쨌거나 화살표 함수는 근본적으로 함수 표현식을 통한 정의 방법이 좀 더 간편해진 버전이라는 것이 핵심이다.
또한, 화살표 함수는 언제나 익명 함수이다.

단, 화살표 함수는 표현뿐만 아니라 기능도 단순화 되어 있다. 따라서, this 바인딩 방식이 기존 함수와 다르고, arguments 객체를 생성하지 않는 등의 차이점이 있다.

 

4. Function 생성자 함수를 통해 정의하는 방법

const plus = new Function('x','y','return x+y');

사실상 거의 안쓴다.