[JS] 자바스크립트 RORO 디자인 패턴 / 스택 트레이스 / 에러 전파

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 ...

 

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

const getSquare = function ({
  xPosition: x,
  yPosition: y,
  width: w,
  height: h,
} = {}) {
  /* ... */
};

 

파라미터를 전달받지 않았을 때의 기본값을 설정할 수도 있다.

const getSquare = function ({
  xPosition: x = 100, // xPosition(x)의 기본값을 100으로 설정
  yPosition: y = 200, // yPosition(y)의 기본값을 200으로 설정
  width: w,
  height: h,
} = {}) {
  /* ... */
};

 

더 많은 정보 반환

---

자바스크립트에서 함수는 한 가지 값만 반환할 수 있다. 하지만 반환값이 객체라면 구조분해할당을 통해 원하는 속성만 변수로 받아올 수 있다. 즉 RORO 패턴을 사용하여 객체를 반환하면 더 많은 정보에 접근할 수 있는 것.

const { position, size } = getSquare({
  /* ... */
});

 

🔍️ 참고로 제너레이터 함수는 여러 값을 순차적으로 반환할 수 있다.

 

함수 합성

---

2개 이상의 함수를 합쳐서 만든 함수를 합성 함수라고 부른다. 아래 예제에서 pipe 함수는 여러 함수들을 인자로 받은 후 reduce 메서드를 통해 각 함수들을 실행한 결과를 반환한다.

function pipe(...fns) {
  // fns -> [fn1, fn2, fn3, ...]
  return (param) =>
    fns.reduce(
      (result, fn) => fn(result), // 이전 함수의 실행 결과(result)가 현재 함수의 파라미터에 들어감
      param,
    );
}

 

아래 같은 합성 함수를 만든다고 가정해본다. saveUser 함수에 넘긴 userInfo 값은 pipe 함수의 파라미터로 넘긴 각 함수를 차례대로(validate ~) 거치게 된다.

const saveUser = pipe(validate, normalize, persist);
saveUser(userInfo);

 

합성 함수를 만들지 않았다면 아래처럼 실행된다.

persist(normalize(validate(userInfo)));

 

만약 모든 함수가 RORO 패턴을 적용해 객체를 인자로 받고 객체를 반환한다면, 각 함수는 인자에서 필요한 값만 사용하고, 나머지 값은 ...rest 패턴으로 그대로 반환할 수 있다.

function normalize({ email, username, ...rest }) {
  // normalize 로직(email과 username만 사용)

  return {
    email, // normalized email(email 인자에 normalize 로직을 수행한 결과)
    username, // normalized username(username 인자에 normalized 로직을 수행한 결과)
    ...rest, // 사용하지 않는 인자는 그대로 반환
  };
}

function validate({
  id,
  firstName,
  lastName,
  email = requiredParam(), // 필수
  username = requiredParam(), // 필수
  pass = requiredParam(), // 필수
  address,
  ...rest
}) {
  // 유효성 검사 로직
  return {
    id,
    firstName,
    lastName,
    email,
    username,
    pass,
    address,
    ...rest, // 사용하지 않은 파라미터
  };
}

function normalize({ email, username, ...rest }) {
  // email, username에 대한 normalize 로직
  return {
    email,
    username,
    ...rest, // 사용하지 않은 파라미터
  };
}

async function persist({
  upsert = true, // update and insert
  ...info
}) {
  // 데이터베이스에 userInfo 저장
  return {
    operation,
    status, // 처리 상태
    saved: info,
  };
}

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

const saveUser = pipe(validate, normalize, persist);
saveUser(userInfo);

 

필수 인자

---

아래 코드의 파라미터를 보면 requiredParam() 함수의 실행 결과를 기본값으로 사용했다. 이처럼 파라미터의 기본값은 리터럴 뿐만 아니라 함수 실행 결과도 사용할 수 있다.

function validate({
  id,
  firstName,
  lastName,
  email = requiredParam(),
  username = requiredParam(),
  pass = requiredParam(),
  address,
  ...rest
}) {
  return {
    /*...*/
  };
}

 

함수에 필요한 파라미터가 전달됐다면 기본값으로 지정해둔 requiredParam() 함수는 실행되지 않는다. 이런 특성을 이용해 requiredParam() 함수를 실행한다면 항상 에러를 발생하도록 해서, 필수 파라미터를 받지 않았을 때 에러를 표시할 수 있다.

function requiredParam(param) {
  const requiredParamError = new Error(
    `Required parameter, "${param}" is missing.`,
  );

  // preserve original stack trace
  // Error.captureStackTrace는 V8 엔진에서만 사용할 수 있는 비표준이므로 아래처럼 조건 추가
  if (Error.captureStackTrace) {
    Error.captureStackTrace(requiredParamError, requiredParam);
    // requiredParam 함수를 호출하기 전에 발생한 호출만 표시
  }

  throw requiredParamError;
}

 

아래처럼 사용한다.

function validate({
  // ... 생략
  email = requiredParam('email'),
} = {}) {
  /*...*/
}

// validate 함수 호출 시 필수 파라미터인 email을 누락했다면 아래 오류 출력
// Uncaught Error: Required parameter, "email" is missing.

 

번외 — 스택 트레이스(Stack Trace)

---

• throw문은 예외를 발생시킨다. 예외가 발생하면 함수 실행이 중지되고(throw 이후의 코드는 실행하지 않음) 제어흐름은 콜스택의 첫번째 catch 블록으로 전달된다. catch(e) 인자는 선택적이다.
• 에러(error) 객체는 아래 프로퍼티를 가진다
  • name : 에러 이름
  • message : 에러 상세 내용
  • stack(비표준 프로퍼티) : 에러 발생 원인이 어떤 파일 때문인지에 대한 기록(콜스택).

 

console.trace()

💡 스택 트레이스는 위 → 아래 순으로 읽는다.

 

console.trace() 메서드가 실행될 시점의 스택 트레이스를 콘솔에 출력한다. 아래 예시에선 c 함수를 실행하고 스택에서 제거 됐으므로 console.trace()를 실행하면 b, a만 출력한다.

function c() {
  console.log('c');
}

function b() {
  console.log('b');
  c();
  console.trace();
}

function a() {
  console.log('a');
  b();
}

a();
// b @VM3226:8 - console.trace 함수를 호출한 곳
// a @VM3226:13 - b 함수를 호출한 곳
// (익명) @VM3226:16 - a 함수를 호출한 곳

 

Error.captureStackTrace()

개념 이해

💡 에러는 호출자(caller) 방향으로 전파된다. 즉, 콜스택의 아래 방향으로 전파된다.

 

Error.captureStackTrace 함수는 현재 스택 트레이스를 캡처하고 대상 객체(첫번째 인자) 안에 stack 프로퍼티를 만들어 저장한다. 첫번째 인자는 객체, (선택)두번째 인자는 함수를 받는다.

 

두번째 인자에 아무것도 명시하지 않으면 현재 스택 트레이스를 모두 캡처한다. 두번째 인자에 함수를 명시하면, 해당 함수를 호출하기 전에 발생한 호출만 표시한다(해당 함수와 그 뒤에 쌓인 호출 스택을 모두 숨긴다).

 

예시) 두번째 인자를 명시하지 않았을 때

아래 예시에서 a 함수 호출 → b 함수 호출 후 a, b 가 스택에 쌓인다. b 함수 본문에서 c 함수를 실행하기 전에 Error.captureStackTrace 함수를 실행했기 때문에, 해당 시점의 스택 트레이스를 캡처하여 b, a를 출력한다.

const myObj = {};

function c() {}

function b() {
  // Here we will store the current stack trace into myObj
  Error.captureStackTrace(myObj);
  c();
}

function a() {
  b();
}

// First we will call these functions
a();

// Now let's see what is the stack trace stored into myObj.stack
console.log(myObj.stack);
// at b (<anonymous>:7:9) - Error.captureStackTrace 함수를 호출한 곳
// at a (<anonymous>:12:3) - b 함수를 호출한 곳
// at <anonymous>:16:1 - a 함수를 호출한 곳

 

예시) 두번째 인자를 명시했을 때

아래 예시에서 스택은 a → b → c → d 순으로 쌓인다. 하지만 Error.captureStackTrace에 함수 b를 전달했기 때문에 b와 b위에 쌓인 프레임(c, d)들을 모두 숨긴다. 따라서 콘솔에 찍히는 스택 트레이스는 a만 나온다.

const myObj = {};

function d() {
  // Here we will store the current stack trace into myObj
  // This time we will hide all the frames after `b` and `b` itself
  Error.captureStackTrace(myObj, b);
}

function c() {
  d();
}

function b() {
  c();
}

function a() {
  b();
}

// First we will call these functions
a();

// Now let's see what is the stack trace stored into myObj.stack
console.log(myObj.stack);
// at a (<anonymous>:18:3) - b 함수를 호출한 곳
// at <anonymous>:22:1 - a 함수를 호출한 곳

 

예시) 필수 인자 구분 함수에 적용

아래 코드의 requiredParam 함수는 RORO 패턴에서 필수 인자를 받지 않았을 때 에러를 출력하기 위해 사용했던 함수다. func 함수를 실행하면 호출 스택은 func → requiredParam 순으로 쌓인다.

 

Error.captureStackTrace 두번째 인자에 명시한 함수가 requiredParam이므로 requiredParam 함수와 그 이후에 쌓인 프레임(호출 스택)은 모두 숨긴다. 따라서 스택 트레이스는 func만 표시한다.

 

💡 Uncaught Error는 에러를 캐치하지 못했을 때(에러를 핸들링하는 곳이 없을 때) 발생한다

function requiredParam(param) {
  const requiredParamError = new Error(
    `Required parameter, "${param}" is missing.`,
  );

  // preserve original stack trace
  // Error.captureStackTrace는 V8 엔진에서만 사용할 수 있는 비표준이므로 아래처럼 조건 추가
  if (Error.captureStackTrace) {
    Error.captureStackTrace(requiredParamError, requiredParam);
    // requiredParam 함수를 호출하기 전에 발생한 호출만 표시
  }

  throw requiredParamError;
}

function func({ name = requiredParam('name'), age } = {}) {
  return { name, age };
}

func({ age: 30 });
// Uncaught Error: Required parameter, "name" is missing.
// at func (<anonymous>:13:24) - requiredParam 함수를 호출한 곳
// at <anonymous>:17:1 - func 함수를 호출한 곳

 

Error.captureStackTrace 두번째 인자에 아무것도 명시하지 않으면 스택 트레이스를 모두 출력한다.

func({ age: 30 });
// Uncaught Error: Required parameter, "name" is missing.
// at requiredParam (<anonymous>:7:11) - captureStackTrace 함수를 호출한 곳
// at func (<anonymous>:13:24) - requiredParam 함수를 호출한 곳
// at <anonymous>:17:1 - func 함수를 호출한 곳

 

에러 전파와 setTimeout

try/catch 예시

에러는 호출자(caller) 방향으로 전파된다(콜 스택의 아래 방향; 현재 실행 컨텍스트 직전의 실행 컨텍스트 방향). 아래 코드는 ➊baz 함수 호출 → ➋bar 함수 호출 → ➌foo 함수 호출 → ➍foo 함수에서 에러 throw… 순서로 실행되고, foo 함수에서 발생한 에러는 이전 실행 컨텍스트(➍ → ➊ 호출자 방향)방향으로 전파된다.

const foo = () => {
  throw Error('foo에서 발생한 에러'); // ⑷
};

const bar = () => {
  foo(); // ⑶
};

const baz = () => {
  bar(); // ⑵
};

try {
  baz(); // ⑴
} catch (err) {
  console.error(err);
}

// at foo (<anonymous>:2:9) - 에러를 throw 한 곳
// at bar (<anonymous>:6:3) - foo 함수를 호출한 곳
// at baz (<anonymous>:10:3) - bar 함수를 호출한 곳
// at <anonymous>:14:3 - baz 함수를 호출한 곳

 

foo 함수에서 throw한 에러는 bar baz에서 모두 catch하지 않기 때문에 호출자까지 전파된 후 전역에서 캐치된다. 만약 throw한 에러를 어디에서도 catch하지 않았다면 프로그램은 강제 종료된다.

 

에러 전파 방향. foo 함수에서 발생한 에러는 호출자 방향으로 전파된다

 

비동기 함수인 setTimeout과 프로미스 후속 처리 메서드(then 등)의 콜백 함수는 호출자가 없다. 이 둘은 태스크 큐(매크로태스크큐/마이크로태스크큐)에 들어가서 콜스택이 비어있을 때까지 대기한다. 콜스택이 비었다면 이벤트 루프에 의해 콜스택으로 푸시된 후 실행된다. 이때 콜백 함수의 실행 컨텍스트는 콜스택의 가장 하단에 위치하게 된다(콜스택이 비어진 후 푸시됐으므로). 즉 에러를 전파할 호출자가 존재하지 않는 것이다.

try {
  setTimeout(() => {
    throw new Error('에러 발생');
  }, 1000);
} catch (e) {
  console.error('에러 캐치', e);
}

// Uncaught Error: 에러 발생 (에러를 캐치하지 못했으므로 Uncaught 에러 발생)

 

💡 에러는 호출자 방향으로 전파되지만 `setTimeout`의 콜백 함수를 호출한 것은 `setTimeout` 함수가 아니기 때문에 콜백 함수가 발생 시킨 에러는 `catch` 블록에서 캐치되지 않는다. `setTimeout` 함수가 콜백 함수의 호출자가 되기 위해선 콜백 함수의 실행 컨텍스트 이전에 `setTimeout` 실행 컨텍스트가 있어야 한다. 하지만 `setTimeout`은 비동기 함수이므로 실행 즉시 종료돼서 콜스택에서 제거된다.

 

1. setTimeout 함수 호출 → setTimeout 함수의 실행 컨텍스트 생성 → 콜스택에 푸시된 후 실행
2. setTimeout은 비동기 함수이므로 콜백 함수 호출을 기다리지 않고 즉시 종료 → 콜스택에서 제거
3. 타이머(1초) 만료 → setTimeout의 콜백 함수는 태스크 큐로 들어간 후 콜스택이 비어있을 때까지 대기
4. 콜스택이 비었다면 이벤트 루프에 의해 콜스택으로 푸시
5. 콜백 함수 실행 → 에러 throw → 호출자가 없으므로 catch 블록에서 에러 캐치 못함

 

Promise 예시

프로미스의 콜백 함수와 후속 처리 메서드 내부엔 try/catch가 암묵적으로 감싸고 있다. reject를 호출하거나 에러를 throw 하면 .catch 후속 처리 메서드에서 에러를 처리할 수 있다.

new Promise((resolve, reject) => {
  throw new Error('에러 발생');
}).catch((e) => console.error('에러 캐치', e));

// 에러 캐치 성공. reject를 호출하지 않고도 .catch 메서드에서 에러를 캐치할 수 있다
// at <anonymous>:2:9 - 에러를 throw한 곳
// at new Promise (<anonymous>) - Promise의 콜백 함수를 호출한 곳
// at <anonymous>:1:1 - Promise 생성자를 호출한 곳

 

하지만 아래 코드는 프로미스가 에러를 처리할 수 없다. 위와 마찬가지로 setTimeout의 콜백 함수가 콜스택에 들어간 시점엔 호출자가 없기 때문이다(콜백 함수의 실행 컨텍스트가 콜스택의 가장 하단에 위치).

new Promise((resolve, reject) => {
  setTimeout(() => {
    throw new Error('에러 발생');
  }, 1000);
}).catch((e) => console.error('에러 캐치', e));

// Uncaught Error: 에러 발생 (에러를 캐치하지 못했으므로 Uncaught 에러 발생)
// setTimeout의 타이머를 0으로 설정해도 결과는 동일하다

 

프로미스 콜백 함수의 2번째 인자인 reject를 사용하면 이 문제를 해결할 수 있다. 에러는 호출자 방향으로 전파되므로 reject 함수의 실행 컨텍스트까지 전파된 후 catch 블록으로 넘어간다.

new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(new Error('에러 발생'));
  }, 1000);
}).catch((e) => console.error('에러 캐치', e));

// 에러 캐치 성공
// at <anonymous>:3:12 - reject 함수를 호출한 곳

 

레퍼런스

---

• tinyblog
• 자바스크립트 디자인 패턴: RORO
• 자바스크립트 에러와 스택 트레이스 심화
• Elegant patterns in modern JavaScript: RORO
• 프라미스와 에러 핸들링
• Promise | PoiemaWeb  

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요