TL;DR

RORO 패턴은 Receive an Object, Return and Object의 약자다. 함수의 파라미터와 리턴값 모두 객체인걸 말한다. ES6부터 지원하는 구조분해할당 덕분에 자바스크립트에서도 RORO 패턴을 사용할 수 있다. 파라미터 정의 방식(RORO 패턴)만 살짝 바꿨지만 가독성은 매우 좋아진다.

RORO 패턴의 장점은 아래와 같다.

• 이름이 지정된 파라미터 (Named parameters)
• 명시적인 파라미터 기본값 (Cleaner default parameters)
• 더 많은 정보 반환 (Richer return values)
• 함수 합성 용이 (Easy function composition)

이름이 지정된 파라미터

파라미터에 {} 중괄호만 추가해주면 간단하게 RORO 패턴을 적용할 수 있다. 파라미터가 객체 형태이므로 함수 호출 시 파라미터 순서를 신경쓰지 않아도 된다.

// RORO 패턴 사용 전
const getSquare = function(xPosition, yPosition, width, height) { /*...*/ }

// RORO 패턴 사용 후
const getSquare = function({ xPosition, yPosition, width, height }) { /*...*/ }

// 함수 호출
getSquare({ xPosition: 60, yPosition: 80, width: 88, height: 188 });

아래처럼 구조분해할당 기능을 이용해 원하는 이름을 지정해서 사용할 수 있다.

const getSquare = function({ xPosition: x, yPosition: y, width: w, height: h }) { /*...*/ }
// getSquare 함수의 파라미터를 (왼쪽부터) x, y, w, h 변수명으로 사용

명시적인 파라미터 기본값

아래처럼 파라미터가 비어있는 상태로 호출하면 Cannot desctructure ... 에러가 발생한다. 구조분해를 실행할 대상(파라미터)가 undefined이기 때문이다.

getSquare() // Cannot desctructure ...

이땐 파라미터 기본값으로 {} 빈 객체를 설정해주면 된다.