널(null) 병합 연산자로 리팩토링

코드

export class InstantSearch {
    constructor(configuration) {
        this.DEFAULT_DELAY_TIME = 500;

        (...)

        this.delayTime = (configuration.delayTime === null || configuration.delayTime === undefined) ? this.DEFAULT_DELAY_TIME = 500 : configuration.delayTime;
    }

부모 컴포넌트에서 객체를 통해 state 값을 전달 받아 해당 객체 내 프로퍼티 값으로 시간 값이 설정되어 있지 않다면 생성자 함수 내 인스턴스의 기본 시간을 변수에 할당해주는 과정을 삼항 연산자를 통해 구현하였다.

(참고로 delayTime은 Input Value 이벤트 처리를 위한 변수이다)

 

물론 삼항 연산자를 통해 위와 같이 코드를 작성하여도 로직에는 문제는 없으나, 우연치 않게 다른 분께서 널(null) 병합 연산자에 대해서 정리한 블로그 내용을 보고, 해당 문법을 사용한다면 코드를 더욱 명확하고 깔끔하게 작성할 수 있을 것 같아 리팩토링 해보았다.

 

Nullish coalescing operator

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator

Nullish coalescing operator - JavaScript | MDN

The nullish coalescing operator (??) is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand.

 

null 병합 연산자는 ES2020에 추가된 최신 문법이다.

리터럴 ??를 사용하면 짧은 문법으로 여러 피연산자 중 그 값이 확정되어 있는 변수를 찾을 수 있다.

 

아래 예시를 살펴보자.

a ?? b
a !== null  &&  a !== undefined
=> a
else
=> b

 

즉, 앞에 있는 변수(left)가 null도 아니고 undefined도 아닐 경우에 a의 값을 할당, 그 외에는 b의 값을 할당하도록 동작한다.

굉장히 간단한 식으로 값의 할당을 할 수 있지만 연산자 우선 순위가 5로 꽤 낮기 때문에 복잡한 연산식에서 유의하며 사용해야 할 것 같다.

 

리팩토링

export class InstantSearch {
    constructor(configuration) {
        this.DEFAULT_DELAY_TIME = 500;

        (...)

        // this.delayTime = (configuration.delayTime === null || configuration.delayTime === undefined) ? this.DEFAULT_DELAY_TIME = 500 : configuration.delayTime;
        this.delayTime = configuration.delayTime ?? this.DEFAULT_DELAY_TIME;
    }