[11주차 주간 발표] const assertion과 RORO 패턴

 

 

const assertion

원래 상수가 아닌 것을 상수로 선언해 주는 기능이다.

const RGB = {
    red: 'FF0000',
    green: '00FF00',
    blue: '0000FF'
};

위 객체 내부의 요소들의 추론된 값을 보면 리터럴 타입이 아니라 원시 타입인 string으로 추론된 것을 볼 수 있다.

RGB라는 객체는 const로 선언했지만 객체 내부의 값들은 바꿀 수 있기 때문이다.

 

const assertion을 활용하면 객체 내부 요소의 타입을 리터럴 타입으로 지정할 수 있다. 닫는 중괄호 뒤에 as const를 적어주면 된다.

const RGB = {
    red: 'FF0000',
    green: '00FF00',
    blue: '0000FF'
} as const;

위 사진과 같이 리터럴 타입으로 추론된 것을 확인할 수 있다.

 

사용하지 않는 코드를 제거하는 것을 TreeShaking이라고 하는데, enum은 js 파일로 컴파일되면서 번들러가 TreeShaking을 못하는 문제가 발생할 수 있다. 그래서 enum 대신에 as const를 사용하는 것이 더 좋다.

 

 

RORO 패턴

js 패턴으로, 객체로 받아서 객체로 반환한다는 의미이다.

 

명명된 인수

어떤 함수를 호출할 때 아래와 같이 여러 파라미터를 전달하면 각 파라미터가 무엇을 의미하는지 알기 힘들다.

func(2000, true, 20, 50);

그렇기 때문에 명명된 인수를 사용한다.

함수의 파라미터를 중괄호로 감싸서 받고, 함수를 호출할 때는 객체를 파라미터로 전달한다.

function func({id, completed, width, height}) {
    console.log(`id: ${id}, completed: ${completed}, width: ${width}, height: ${height}`);
}

func({
    id: 2000,
    completed: true,
    width: 20,
    height: 50
});

구조분해할당으로 동작하며, 파라미터의 순서를 신경 쓰지 않아도 되고, 새 파라미터를 쉽게 추가할 수 있다.

 

더 명료한 인수 기본 값

위에서 만든 함수를 호출할 때 파라미터를 아무것도 넣지 않으면 구조분해할 수 없다는 에러가 발생한다.

어떤 객체에서 존재하지 않는 키에 대해 값을 받으면 undefined로 에러가 발생하지 않지만, 이 경우에는 구조분해할 대상 자체가 undefined이기 때문에 에러가 발생한다.

따라서 아래 코드처럼 빈 객체를 기본 값으로 설정하면 에러가 발생하지 않는다.

function func({id, completed, width, height} = {}) {
    // ...
}

각 파라미터의 기본 값도 설정할 수 있다. 파라미터 이름 뒤에 = 기본 값을 적어주면 된다.

function func({
    id = 0, 
    completed = false, 
    width = 0, 
    height = 0
} = {}) {
    console.log(`id: ${id}, completed: ${completed}, width: ${width}, height: ${height}`);
}

 

더 많은 반환 값

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

그리고 반환된 객체는 구조분해를 사용하여 바로 데이터에 접근할 수 있다.

function func({id = 0} = {}) {
    return {
        name: 'lee',
        contact: '010-1111-1111',
        birth: '990403'
    }
};

const { name, contact, birth } = func({id: 2000});

 

함수 합성의 용이성

다음과 같이 함수 A, B, C를 선언한다.

function A(param) {
    return param + 1;
}

function B(param) {
    return param + 2;
}

function C(param) {
    return param + 3;
}

함수 A, B, C를 차례로 합성한 결과 값을 받으려면 아래와 같은 코드를 실행해야 한다. 

const result = C(B(A(0)));

 

js에서는 다음과 같이 함수를 합성하는 함수를 reduce 메서드를 이용하여 만들 수 있다.

fns에 합성할 함수들이 들어있고, 첫 번째 함수에는 초기값인 param을 넣어서 실행한다. 해당 함수 실행 결과(리턴 값)가 result에 저장되어 다음 함수의 파라미터로 들어가는 것이 반복되는 방식으로 동작한다.

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

함수  A, B, C를 차례로 합성한 결과 값은 아래 코드로 받을 수 있다.

const getResult = pipe(A, B, C);
const result = getResult(0);