Javascript - Null 병합 연산자 (null, undefined 검사 후 삼항 연산자 사용 개선)

개발 상황

개발을 하다보면 뭔가 메서드의 결과가 null 또는 undefined인지에 따라 값을 반환해야 하는 경우가 많습니다.

 

저의 경우에는 order라는 컬럼을 기준으로 Category가 정렬되기 때문에, Category를 생성할 때 Max order에 +1한 값을 order로 설정해줬어야 했어요!

const maxOrder = categoryRepository.max("order");
category.order = maxOrder + 1;

categoryRepository.create(category)

 

하지만, 저 방식은 category가 이미 1개 이상 있을때만 안전하고, 카테고리가 없다면 max가 null을 반환하기 때문에 null + 1이 연산 되면서, 에러가 발생합니다!

 

If문

그래서 if문으로 풀어내기엔, 코드가 복잡해진다는 생각을 받았습니다. 요약된 코드까지 같이 봤을 때 전혀 직관적이지 않았어요!

const maxOrder = categoryRepository.max("order");
if(maxOrder !== null && maxOrder !== undefined) {
    category.order = maxOrder + 1;
} else {
    category.order = 1
}

categoryRepository.create(category)

 

삼항연산자

클린코드에서 if문은 삼항연산자로 풀어낼 수 있다면 좋다고 하는데, 지금 상황에서는 차라리 if문이 나을정도로 좋지 못한 것 같습니다.

const maxOrder = categoryRepository.max("order");
category.order = (maxOrder !== null && maxOrder !== undefined) ? maxOrder + 1 : 1;

categoryRepository.create(category)

 

그래서 maxOrder가 null이 아니라 0 또는 order를 가지게 한다면 category.order를 세팅하기 쉽겠다고 생각을 했습니다. category.order에 maxOrder + 1만 대입하면 되니까요!

 

Null 병합 연산자(Nullish coalescing operator)

Null 병합 연산자를 사용하면 간단하게 null 또는 undefined인지 검사를 하고, 반환까지 받을 수 있습니다.

아래의 경우에는 categoryRepository.max("order")의 반환 값이 존재하는 변수면 바로 반환하고, null 또는 undefined라면 ?? 오른쪽에 있는 0을 반환합니다.

 

사실 연산자가 (??)이 익숙하지 않아서 엄청나게 직관적이진 않다고 느끼지만, 익숙해지면 좋을 것 같습니다.

const maxOrder = categoryRepository.max("order") ?? 0;
category.order = maxOrder + 1

categoryRepository.create(category)

 

 

 

감사합니다.