null, undefined, 0 데이터 불러오면 다 똑같이 없다는 뜻 아니에요?

이번에 서비스를 기획하면서 가장 많이 본건 그래프입니다.

오늘은 그 그래프와 관련해서 궁금한 점이 생겨 공부한 내용을 가져와봤습니다.

매출액 관련해서 누적 막대그래프를 쓰기 위해 위 그래프를 가져왔습니다. 막대의 전체 길이는 수익을 의미하고 색깔은 플랫폼을 의미합니다. 여기서 비율을 나타내는 데에 한 가지 고민이 생겼습니다.

 

여기서 만약 2022.05.10에 날짜에 파란색에 해당하는 플랫폼의 수익이 없을 경우 

 

1. 0%로 나타낼 것인지
2. 아예 표기를 하지 않을 것인지

 

개발팀에서 해당 고민을 전달 드렸을 때, 데이터를 0으로 줄 것인지 null로 줄 것인지 undefined로 줄 것인지 확인을 해봐야 된다고 하셨습니다. 

“3개 다 데이터가 없는 거 아닌가??” 라는 의문을 품고 이 세 가지의 차이점에 대해 알아보았습니다.

0 vs null vs undefined

0, null, undefined를 나타낸 모형

 

• 0은 말 그대로 숫자 0을 의미합니다. 0이라는 숫자가 존재하죠.
• null은 0값이라는 숫자조차도 없다는 뜻을 나타냅니다. 비어있는, 값의 부재라고 생각하시면 될 것 같습니다. 변수에 값이 없다는 것을 의도적으로 나타낼 때 null을 사용합니다.

** tmi상식 : null은 독일어로 0이라는 값을 의미합니다.

• undefined는 아무 값도 할당받지 않은 상태를 의미합니다. null은 존재하지 않는 값이 할당되어 있다고 생각하면 undefined는 개발자가 의도적으로 어떠한 값이든 할당하지 않은 것을 말합니다.

 

null과 undefined에 대한 비교 예시를 보여드리겠습니다.

let labbit; // undefined labbit = null; // null

 

• undefined는 변수가 선언되고 값을 할당하지 않았기 때문에 아무것도 하지 않은 상태
• labbit 변수를 null로 할당했고, 이는 labbit의 값이 비어있는 상태

위 도형의 형태를 더 쉽게 이해하시도록 아래 실생활 예

시를 가져와봤습니다.

 

참조 : https://twitter.com/ddprrt/status/1074955395528040448

 

• 휴지 거치대에 휴지가 없는 것 →  0
• 휴지 거치대에 휴지 조차도 없는 것 →  null
• 휴지 거치대조차 없는 것 → undefined

앞서 고민했던 내용을 다시 살펴보면,

2022.05.06 막대와 같이 초록색과 노란색 항목의 값이 0일 경우,

 null과 undefined는 숫자 값이 아니기 때문에 왼쪽 막대와 같이 표현하기 위해서는  0을 사용해야 합니다.

 

여기서 한 가지 TMI 지식!

 

원래 0과 null은 type이 달라서 연산이 안되지만 java script에서는 0+null이라는 연산이 가능하다는 걸 알고 계셨나요? 

 but, 이 부분도 독립적으로 사용할 때 가능하고, 위 막대의 경우 다른 막대에는 숫자 값을 사용하고 어느 한 막대에만 0+null을 사용하는 일은 불가능하다고 생각해주시면 됩니다.

그래프나 차트를 전달드릴 때 해당 그래프는 어떤 값으로 데이터를 불러올지 개발자분들께서 작업하시지만 보다 나은 커뮤니케이션을 위해 위와 같은 개발 지식 정도는 알고 있으면 도움되실 것 같아서 가져와봤습니다.

 

오늘도 읽어주셔서 감사합니다:)

 

블로그 구독자 문의 주소 : info@weirdsector.co.kr

그로스 해킹 파트너, LABBIT 바로가기

LABBIT을 운영하는 Team 위어드섹터 만나러 가기

브랜드의 성장박스 Data Nugget