[JavaScript] Null값 처리하는 방법, Null 연산자 - Nullish Coalescing Operator

 

JavaScript에서 '값이 없는' 경우에 대한 처리로 종종 오류를 보았던 적이 있습니다.

대게 null, undefined, '' 등을 일일이 비교하는 코드를 보자니 유지보수나, 개발과정에서 적잖이 신경쓰이게 되었습니다.

이번 포스팅에서는 Null과 관련된 false값을 갖는 경우와 Null처리 방법에 대해 설명합니다.

1. 공백값으로 False 처리되는 경우

boolean 결과값을 알려줄 "estimate" 함수를 통해 0, '', null, undefined의 결과값을 알아봅니다.

JavaScript에서는 위 네 가지 모두 false값을 갖습니다.

estimate(0);
estimate('');
estimate(null);
estimate(undefined);

function estimate(args)
{
	if(args)
	{
		console.log("true");
	}
	else{
		console.log("false");
	}
}

2. OR 연산자를 통한 Null처리 방법

위에서 알아본 내용을 토대로, false값을 갖는 공백값에 대해서 OR연산자를 통해 공백처리를 해봅니다.

let f_number = 0;
let f_string1 = '';
let f_string2 = null;
let f_string3 = undefined;

console.log("============ OR ==============");
console.log(f_number || '12345');
console.log(f_string1 || 'default1');
console.log(f_string2 || 'default2');
console.log(f_string3 || 'default3');

* 출력결과

3. Nullish Coalescing ('??')

사실 위에서 설명한 내용들은 공백값인 경우에 대한 처리방법은 아닙니다.

실제로 숫자의 경우 '0', 문자열의 경우 ''의 값이 올 수 있기 때문이죠.

물음표 두개를 사용하는 Nullish Coalescing 연산자는 오로지 null, undefined 처럼 값이 정의되지 않는 항목에 대해서만 동작합니다.

아래는 위에서 다룬 네 가지 값을 동일하게 적용한 결과입니다.

숫자 '0'과 문자열 ''이 모두 출력된 것을 확인할 수 있습니다.

console.log("============ Nullish Coalescing ==============");
console.log(f_number ?? '12345');
console.log(f_string1 ?? 'default1');
console.log(f_string2 ?? 'default2');
console.log(f_string3 ?? 'default3');

* 출력결과