최근 Arrow Function과 early return에 관해 알게 되었다.

이외에도 다양한 함수 표현식이 존재하는데, 같은 결과값을 내는데 다양한 표현이 있는 것에서 이런 생각이 들었다.

어떨 때에 사용해야하며, 어떤 코드를 작성하는 것이 바람직한가

이 말은 다양한 범주에서 적용된다.

---

우선, 바람직한 코드라는 말도 꽤 추상적이며 광범위하다

그래서 나는 협업에 있어 바람직한 코드 즉, 남이 읽기 좋은 코드에서 바람직한 코드를 적용시키겠다.

Arrow Function

ES6에서 추가된 간결한 함수 표현 방식으로

// 기존 함수 표현 방식
const add = function(a, b) {
    return a + b;
};

// Arrow Function
const add = (a, b) => {
    return a + b;
};

이렇게 사용한다

function(a, b)를 (a, b) =>로 대체한다. 그러니까 function이 =>로 대체된 것이다.

이를 더욱 간결하게 사용하면 중괄호와 return을 생략하여

const add = (a, b) => a + b;

이렇게 사용할 수 있다.

---

그렇다면 언제 사용하는 것이 좋을까

문법적으로 더 간결하기 때문에 최근 JavaScript 코드에서 자주 사용하는 추세이며 특히 짧은 로직을 표현할 때 가독성이 좋아진다.

대표적인 예시로 배열 메서드가 있다

// Arrow Function
const numbers = [1, 2, 3, 4];

const doubled = numbers.map(n => n * 2);

더불어

• map,filter,reduce와 같은 배열 메서드
• 짧은 콜백 함수
• 간단한 계산 로직

다시 한 번 정리해보자면 로직이 짧고 목적이 명확한 함수에서 사용하면 가독성이 좋아진다

---

단점

이 Arrow Function의 단점, 혹은 주의점은 자신만의 this를 가지지 않는다는 점이다.

Arrow Function에서 this는 이전 글에서 설명했던 것과 달리 자신의 this를 생성하지 않고 외부 스코프의 this를 사용한다

📍 따라서 객체의 메서드에는 Arrow Function을 사용하지 않는 경우가 많다.

---

Early Return

이것 또한 코드를 더 간결하게 만드는 방법 중 하나다

function printUser(user) {
  if (user) {
    if (user.isActive) {
      console.log(user.name);
    }
  }
}

이렇게 조건문을 작성하다보면 중첩되는 구조들이 많아진다
이것을 early return을 사용하면

function printUser(user) {
  if (!user) return;
  if (!user.isActive) return;

  console.log(user.name);
}

이렇게 줄일 수 있다.

더 쉬운 예로

if(){

} else { return; }

이 구문을

if(){

} return;

이렇게 끝낼 수 있다.

---

협업의 관점에서 좋은 코드란 무엇일까

단순히 코드의 길이가 짧아서 Arrow Function이나 Early Return같은 문법을 사용하는 것은 아니다.

근본적인 이유는 코드를 더 읽기 쉽게 만들기 위해서이다.

개발은 혼자 하는 작업이 아닌 대부분의 여러 사람과 함께 하는 협업이기에 다른 사람이 이해할 수 있어야 한다.

중요하게 생각하는 포인트를 정리해보자면

• 의도가 쉽게 드러나는 코드
• 불필요하게 복잡하지 않은 코드
• 일관성이 있는 코드 (어떤 곳에서는 Arrow Function을, 어떤 곳에서는 전통적인 함수 표현식은 지양하자)

내 지식을 뽐내려고 하는 것이 아닌, 타인을 쉽게 이해시킬 수 있는 코드를 작성해보면 좋겠다.