빈 문자열과 null의 차이점

2024년 11월 6일 ・ 읽는 시간 6분

JavaScript를 사용하다 보면 빈 문자열("")과 null을 어떻게 다루어야 할지 고민되는 경우가 많습니다. 이 두 값은 모두 "비어 있음" 또는 "없음"을 표현하는 것처럼 보이지만, 실제로는 서로 다른 의미를 지니고 있어요. 이번 글에서는 ""과 null이 무엇인지, 그리고 그 차이점은 무엇인지 알아볼게요.

먼저 빈 문자열과 null이 각각 어떤 의미를 갖는지 살펴보겠습니다.

빈 문자열은 ""와 같이 텍스트가 없는 문자열을 의미해요. 빈 문자열은 string 타입에 속합니다. 문자열이 필요하지만 아직 값이 없거나, 아래와 같이 비어 있는 문자열을 나타내고 싶을 때 사용하면 좋아요.

반면 null은 객체가 존재하지 않음을 나타내는 값입니다. 정의한 변수가 아무 값도 참조하지 않는 상태임을 뜻해요. null은 object 타입에 속하는데요. 처음 JavaScript가 탄생할 때 발생한 설계 버그라고 해요. null은 "의도적으로 값이 없음"을 표현할 때 사용됩니다.

이와 같은 이유로 빈 문자열과 null은 다르게 동작하고, 올바른 용도에 사용해야 됩니다. 다음 표는 빈 문자열과 null의 차이점을 보여주고 있어요.

빈 문자열과 null의 사용 용도가 각각 다르다고 설명을 드렸는데요. 토스페이먼츠 결제 연동 예시로 더 자세히 살펴볼게요.

웹 애플리케이션에서 사용자가 아무것도 입력하지 않았다면 빈 문자열 ""로 처리할 수 있지만, 데이터가 빈 값임을 표현하고 싶다면 null을 사용해야 의미가 명확해요. 그런 이유로 토스페이먼츠 SDK의 구매자 전화번호 파라미터(customerMobilePhone)는 빈 문자열로 설정할 수 없어요.

아래 예시 코드에서는 구매자로부터 입력받은 전화번호를 토스페이먼츠 결제 요청의 customerMobilePhone 파라미터로 설정하려고 합니다. 구매자가 입력한 phoneNumber 값을 그대로 넣으면 어떻게 될까요? 만약 구매자가 올바르게 번호를 입력했다면, 문제없이 결제가 진행됩니다. 하지만 구매자가 번호를 입력하지 않으면 phoneNumber은 빈 문자열이기 때문에 토스페이먼츠 SDK에서 오류가 발생해요.

오류를 방지하려면 아래와 같이 조건 연산자를 사용해서 파라미터로 설정할 때 빈 문자열을 null로 변환해주세요. 한 줄의 코드만 수정하면 오류가 더 이상 발생하지 않아요. 실제로 작동하는 아래 코드로 직접 실험해보고, 운영 중인 서비스에 빈 문자열 대신 null을 사용해야 되는 상황에 적용해보세요.