자바스크립트 화살표 함수 ("return"은 언제 쓰고, "괄호"는 어떤 걸 써야 하는지 모르겠다면?)

안녕하세요, 처음 코딩입니다.

오늘은 화살표 함수에 대해서 정리하려고 합니다.

저는 자바스크립트를 처음 배우기 시작하고 한 두달 뒤쯤 화살표 함수를 처음 보게 되었습니다.

배열을 좀 더 유용하게 다루기 위해 map,forEach,filter등 내장 함수를 배우기 시작할 때였는데, 함수를 이렇게 편하게 만들 수도 있구나 하며 신기해했던 기억이 납니다.

그 때는 내장 함수들의 개념조차 어려워서 화살표 함수에 대해서 더 찾아보지 못했는데 이번에 리액트를 공부하면서 화살표 함수 내에서 리턴문 외에 코드를 더 작성하다보니 "return"을 명시해줘야하는 경우가 생겼습니다.

화살표 함수를 사용할 때, "return"은 어떤 상황에서 써줘야 하고, "괄호"는 어떤 걸 써야 하는지 정확한 기준을 잡고 있지 못했습니다.

그래서 오늘 그 기준을 확실하게 잡고 넘어가려고 합니다.

그럼 시작하겠습니다!

---

Before You Learn

• 함수 선언식을 설명할 수 있다.

---

Achievement Goals

• 화살표 함수에서 "return"을 써야할 때, 쓰지 않아도 될 때를 구분할 수 있다.

---

화살표 함수란?

화살표 함수의 개념은 MDN에서 다음과 같이 정의됩니다.

"화살표 함수 표현(arrow function expression)은 function 표현에 비해 구문이 짧고  자신의 this, arguments, super 또는 new.target을 바인딩 하지 않습니다. 화살표 함수는 항상 익명입니다. 이  함수 표현은 메소드 함수가 아닌 곳에 가장 적합합니다. 그래서 생성자로서 사용할 수 없습니다."

화살표 함수 안에 this,arguments,super등 다양한 개념들이 나오지만 오늘은 "return"을 언제 써야하는가에 대해서만 초점을 맞추도록 하겠습니다.

---

화살표 함수를 사용하는 법은?

화살표 함수의 사용법을 함수 선언식과 비교하여 살펴보겠습니다.

//함수 선언식
function add (x, y) {
  return x + y;
}

//화살표 함수
const add = (x,y) => { 
  return x + y;
}

 

함수 선언식은 "function" 키워드를 통해 함수를 선언하고 뒤에 이름을 정했습니다.

그 이후 파라미터를 받는 자리를 작성하고 중괄호 안에 코드를 작성합니다.

하지만 화살표 함수에서는 변수 선언 키워드를 사용하고 값만 할당하면 됩니다.

const add 라는 변수를 선언했고, 그 값에는 파라미터를 받는 소괄호와 로직을 작성하는 중괄호 사이에 "=>" 함수를 나타내는 약속된 기호인 화살표를 붙입니다.

화살표 함수는 로직을 감싸주는 괄호의 종류에 따라서 혹은 로직에 리턴문만 있느냐 없느냐에 따라서도 return을 붙이기도 하고 안붙이기도 합니다.

제가 사용하면서 대표적으로 느꼈던 화살표 함수의 4가지 버전을 작성해보겠습니다.

// 1. 로직을 중괄호로 감싸주면 "return"을 써준다.

const add = (x, y) => {
  return x + y;
]

// 2. 화살표 함수 내부에 return문 밖에 없는 경우에는 return문을 줄일 수 있다.

const add = (x, y) => x + y

// 3. 2번과 같지만 보기좋게 로직을 소괄호로 감싸줄 수 있다.

const add = (x, y) => (x + y)

// 4. 매개변수가 한 개라면 매개변수를 소괄호로 묶지 않을 수 있다.

const add = x => !x 

위의 4가지 버전은 특히 배열의 내장 함수 map,filter,forEach를 사용할 때 편하게 작성할 수 있습니다.

이제 화살표 함수를 사용할 때 언제 중괄호를 사용하고, 소괄호를 사용하는지, "return"은 언제 작성해야하는지 감이 오실 거라고 생각합니다.

복잡하지 않고 사소한 개념처럼 보일 수 있지만, 어쩌면 복잡하고 큰 개념보다 더 자주 사용되므로 기본을 탄탄하게 잡고 가는게 도움이 될 거 같아 정리하는 시간을 가졌습니다.

그럼 이상으로 화살표 함수의 "return"을 쓰는 타이밍에 대하여 마치겠습니다.

감사합니다.

---