자바스크립트 패턴 - RORO

[ 객체를 받아서 객체로 반환: Receive an Object, Return an Object ]

---

이 패턴의 장점은...

✔ Named parameters: 명명된 인수

✔ Cleaner default parameters: 더 명료한 인수 기본값

✔ Richer return values: 더 많은 정보 반환

✔ Easy function composition: 함수 합성의 용이함

---

Named parameters (명명된 인수)

주어진 역할(Role)에 있는 사용자(Users) 목록을 리턴하는 함수가 있다고 가정하고,

각 사용자의 연락처 정보와 비활성 사용자를 포함하는 옵션도 제공해야한다고 해보자.

function findUsersByRole (
    role,
    withContactInfo,
    includeInactive
) {...}

이 함수 호출은 다음과 같이 한다.

findUsersByRole('admin', true, true);

true라는 파라미터가 모호해보인다. 이러한 코드는 이해하기 어렵고 작성하기 까다롭다.

 

하나의 객체를 받는 형태로 바꿔보겠다.

function findUsersByRole ({
    role,
    withContactInfo,
    includeInactive
}) {...}

함수 파라미터 주위에 중괄호를 두었다는 점을 제외하고는 거의 동일해보인다.

이는 3개의 파라미터를 각각 받는 대신 role, withContactInfo, includeInactive라는 속성(property)을 가진 단일 객체를 받게 된다.

이는 ES2015에서 지원하는 구조분해 할당(destructuring assignment) 기능으로 인해 작동한다.

 

이제 다음과 같이 함수를 호출할 수 있다.

function findUsersByRole ({
    role: 'admin',
    withContactInfo: true,
    includeInactive: true,
});

이제 모호하지 않고 이해하기도 쉬워졌다.

게다가 파라미터 몇 개를 생략하거나 재정렬을 할 수도 있고, 새 파라미터를 쉽게 추가 할 수도 있다.

 

Cleaner default parameters (더 명료한 인수 기본값)

파라미터를 하나도 전달하지 않고 호출하는 경우를 생각해보자.

findUsersByRole();

이 호출을 유효하게 하려면 빈 객체를 디폴트값으로 설정해주면 된다.

function findUsersByRole ({
    role,
    withContactInfo,
    includeInactive
} = {}) {...}

파라미터에 디폴트값을 설정하고 싶을 때는 파라미터 뒤에 = 디폴트값 을 추가하면 된다.

ex) ... withContactInfo = true, ...

function findUsersByRole ({
    role: 'admin',
    includeInactive: true
})

이렇게 써도 withContactInfo의 디폴트값은 보존된다. 

 

Richer return values(더 많은 정보 반환)

자바스크립트는 함수에서 한 가지 값만 반환할 수 있기 때문에 객체를 사용하면 더 많은 정보를 반환할 수 있다.

async saveUser({
  upsert = true,
  transaction,
  ...userInfo
}) {
  // save to the DB
  return {
    operation, // e.g 'INSERT'
    status, // e.g. 'Success'
    saved: userInfo
  }
}

 

Easy function composition(함수 합성의 용이함)

합성 함수란 두 개 이상의 함수를 합성하여 만들어 낸 함수이다.

compose(f, g) (x) = f(g(x))

자바스크립트에서는 다음과 같이 함수를 합성하는 함수(위에서 compose의 역할)를 다음과 같이 작성할 수 있다.

function pipe(...fns) {
	return param => fns.reduce((result, fn) => fn(result), param);
}

fns에는 합성할 함수 객체가 전달되고, reduce 메소드의 정의에 따라 전달된 함수는 왼쪽에서 오른쪽으로 순차적으로 실행되고 함수의 파라미터로는 바로 직전 함수의 결과가 전달되며, 마지막 함수가 반환한 값이 합성 함수의 반환값이 된다.

 

예를 들어 보겠다.

/* 1번 */
const saveUser = pipe(validate, normalize, persist);
saveUser(userInfo);

/* 2번 */
persist(normalize(validate(userInfo)));

1번에서 saveUser 함수에 전달된 userInfo 값은 순서대로 validate, normalize, persist를 거치게 된다.

합성 함수를 만들지 않았다면 2번과 같은 형태로 실행 되었을 것이다.

 

---

 

출처: usecode.pw/elegant-patterns-in-modern-java-script-roro/

모던 자바스크립트의 엘레강스한 패턴 - RORO

출처: taegon.kim/archives/8058

자바스크립트 디자인 패턴: RORO