[TIL] RORO 기법과 IIFE

함수 객체 구조분해할당 기본값

function showMenu({ title = "Menu", width = 100, height = 200 }) {
  alert( `${title} ${width} ${height}` );
}

showMenu(); // Menu 100 200

참고로 이렇게 함수 매개변수를 구조 분해할 땐, 모든 인수에 기본값을 할당해 주려면 빈 객체를 명시적으로 전달해야 함

showMenu({}); // 모든 인수에 기본값이 할당됩니다.

showMenu(); // 에러가 발생할 수 있습니다.

이 문제를 예방하려면 빈 객체 {}를 인수 전체의 기본값으로 만들면 된다.

function showMenu({ title = "Menu", width = 100, height = 200 } = {}) {
  alert( `${title} ${width} ${height}` );
}

showMenu(); // Menu 100 200

이렇게 인수 객체의 기본값을 빈 객체 {}로 설정하면 어떤 경우든 분해할 것이 생겨서 함수에 인수를 하나도 전달하지 않아도 에러가 발생하지 않는다.

디자인패턴 : RORO기법?

• 객체를 받아서, 객체를 반환(RORO): Receive an object, return an object (RORO)
• 함수의 파라미터를 단일 객체로 받아서 리턴값으로 객체를 반환한다.
  (꼭 객체를 반환하지 않아도 된다.)
• 장점1 : 네임드 파라미터(Named Parameters)

	findUsersByRole('admin', true, true); //true가 어떻게 사용될지 모호하다.

    findUsersByRole({ 
      withContactInfo: true, // 모호하지 않고 읽고 이해하기가 훨씬 쉽다.
      role: 'admin',
      includeInactive: true,
    });

참고
파라미터 객체의 속성 중 하나가 복잡한 타입 (예 : array 또는 object) 인 경우 destructuring은 얕은(shallow) 복사를 하므로 원본이 변경 될 수 있다.

• 장점2 : 더 명확한 디폴트 파라미터(Cleaner default parameters)
  • 파라미터 뒤에 = {}를 추가함으로써 함수({})가 아닌 함수() 처럼 빈객체를 인자없이 호출해도 에러가 나지 않으며 객체의 프로퍼티가 생략되었을 시 미리 지정한 디폴트값이 들어간다.

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

• 장점3 : 더 풍부한 리턴 값(Richer Return Values)
  • 자바스크립트 함수는 단일(single) 값만 리턴 할 수 있다. 그 값이 object라면 더 많은 정보를 포함 할 수 있다.
• 장점4 : 쉬운 함수 컴포지션(Easy function composition)
  • RORO기법에 관한 포스트를 읽는중 함수 컴포지션에 용이하다는 글을 보아서 함수컴포지션에 대해 알아보았다.
  • 합성 함수란 두 개 이상의 함수를 합성하여 만들어 낸 함수이며 해당 포스트에서는 예제를 아래 코드로 들었다.

function pipe(...fns) {
  return param => fns.reduce(
    (result, fn) => fn(result),
    param
  );
}
function saveUser(userInfo) { // userInfo는 객체이다.
  return pipe(validate, normalize, persist)(userInfo);
  //validate, normalize, persist는 RORO기법으로 객체를 받고 객체를 리턴한다.
}

위 함수는 리듀서를 사용하여 여러함수를 입력받아 하나씩 차례로 실행하고 그 리턴값을 다음 함수의 인자로 넘겨주게 된다. 그러면 결과는 아래와같게 된다.

persist( normalize( validate( userInfo ) ) );
// validate는 userInfo를 받아서 처리 후 normalize에게 반환하고 ... 반복

즉시실행함수(IIFE)

• 즉시실행함수 (IIFE, Immediately Invoked Function Expression)는 정의되자마자 즉시 실행되는 함수

(function () {
    console.log("IIFE");
})();

// 화살표 함수로도 사용 가능하다
(() => {
    console.log("IIFE");
})();

즉시실행함수를 왜 사용할까?

1. 필요없는 전역 변수의 생성을 줄일 수 있다.
함수를 생성하면 그 함수는 전역 변수로써 남아있게 되고, 많은 변수의 생성은 전역 스코프를 오염시킬 수 있다. 즉시실행함수를 선언하면 내부 변수가 전역으로 저장되지 않기 때문에 전역 스코프의 오염을 줄일 수 있다.

2. Private한 변수를 만들 수 있다.
즉시실행함수는 외부에서 접근 할 수 없는 자체적인 스코프를 가지게된다. 이는 클로저의 사용 목적과도 비슷하며 내부 변수를 외부로부터 private하게 보호 할 수 있다는 장점이 있다.

참고포스트
자바스크립트 디자인 패턴: RORO 🔽
https://taegon.kim/archives/8058
모던 자바스크립트의 엘레강스한 패턴 - RORO 🔽
https://usecode.pw/elegant-patterns-in-modern-java-script-roro/
JavaScript - 즉시실행함수(IIFE) 🔽
https://jongminfire.dev/java-script-%EC%A6%89%EC%8B%9C%EC%8B%A4%ED%96%89%ED%95%A8%EC%88%98-iife