Javascript - 화살표 함수를 선언하는 방법 [arrow function]

자바스크립트 ES6에서 새롭게 추가된 내용 중 화살표 함수(arrow function)는 함수를 단축해서 사용하는 방법으로 유용한 문법입니다. 함수를 단축해서 사용하는 문법이 화살표 함수라고 말했지만, 사실 화살표 함수(arrow function)가 일반 함수(function)와는 결을 달리 합니다. 그럼 오늘은 자바스크립트 ES6에 새롭게 추가된 화살표 함수를 알아보도록 하겠습니다.

자바스크립트의 화살표 함수

화살표 함수를 선언하는 방법

화살표 함수는 일반 함수와 다른 점이 몇 가지 있습니다. 대표적으로는 선언하는 방법과 this의 범위입니다. 오늘은 먼저 화살표 함수를 선언하는 방법을 알아보겠습니다.

function fn1() {
  return 'Hello World!'
}

const arrowFn1 = () => 'Hello World!';

function fn2(name) {
  return `Hello ${name}`
}

const arrowFn2 = (name) => `Hello ${name}`;

 예제 코드를 통해서 화살표 함수를 설명하려는 내용은 총 3가지입니다. 또한 예제 코드로 작성한 화살표 함수와 일반 함수 예제 코드는 동일하게 동작합니다.

 

 - function을 생략할 수 있다.

 - 함수에 매개변수가 하나뿐이라면 괄호(())가 생략이 가능하다.

 - 함수의 body 표현식이 한 line이라면 중괄호({})와 return 생략이 가능하다.

 

 화살표 함수는 기본적으로 익명 함수이기 때문에 식으로 변수에 할당해서 사용이 가능하지만, 일반 함수처럼 function 키워드를 이용해 이름을 정의할 수 없다는 점이 화살표 함수(arrow function)와 함수(function)의 선언 방식에 가장 큰 영향을 미칩니다.

 

 예시를 통해 제시한 코드는 설명을 위해 작성된 코드입니다. 화살표 함수와 일반 함수에는 우위가 없으며 상황에 따라 필요한 문법을 이용해 사용하시는 것이 자바스크립트의 함수를 가장 잘 사용하는 방법입니다. 화살표 함수는 익명 함수를 만들어 전달해서 사용하는 고차 함수를 이용하기에 가장 좋은 문법입니다.

 

 화살표 함수 선언 방법뿐만 아니라 스코프(Scope)가 달라 this를 사용하는 방법도 일반 함수와 방법을 조금 달리하는 부분이 있습니다. 이 부분은 다른 글을 통해 설명하도록 하겠습니다.