es6 옵셔널 체이닝 에 대해 ?. 샘플 OCP

디자인 패턴의 OCP 를 공부하다 기록해 놓습니다.

아래와 같은 코드가 있습니다.

const aa = 't';
if(aa == 't') console.log('ooo');
else consolelog('xxx');
  

아주 단순한 코드죠
위 코드를 라우팅 테이블과 라우터로 변경해봅니다.

const resultProcess = {
      table: {
          "true": () => { console.log('ooo'); },
          "false": () => { console.log('xxx'); },
      },
      router(input) {
          return this.table[input == 't']?.(input);
      }
  };

  resultProcess.router('t');
  
 OCP 를 흉내내기 위해서 아주 간단한 코드로 작성했습니다.

이 코드에서 this.table[input == 't']?.(input);는 JavaScript의 새로운 옵셔널 체이닝 (optional chaining) 및

옵셔널 콜 (optional call) 문법을 사용한 것입니다.

이 문법은 객체의 속성 또는 메서드에 접근할 때 속성이나 메서드 자체 또는 부모 객체가 존재하지 않을 경우 에러를 발생시키지 않고 대신 undefined를 반환합니다.

구체적으로, 이 줄의 코드를 해석하면 다음과 같습니다:

input == 't'를 평가하여 true 또는 false 중 하나의 값이 생성됩니다.

this.table[input == 't']를 사용하여 input이 't'와 일치하면 "true" 속성에 접근하고, 

그렇지 않으면 "false" 속성에 접근합니다.

그 다음, 옵셔널 체이닝 연산자 ?.를 사용하여 해당 속성의 값인 함수를 호출합니다.

함수 호출 시 input을 전달합니다. 함수는 "ooo" 또는 "xxx"를 출력할 것입니다.

따라서 resultProcess.router('tx');를 호출하면 input이 'tx'이므로 this.table['tx' == 't']가 되어 this.table['false']가 됩니다. 

그리고 이것은 함수를 호출하게 되므로 "xxx"가 출력됩니다.