undefined와 null에 관하여

 

 

undefined와 null에 관하여

 

 

타입스크립트에 대한 내용을 서치하고 있는데 사람들이 undefined를 사용할지, null을 사용할지에 대한 내용으로 여러가지 포스팅이 올라와있는 것을 보게 되었습니다. 처음 봤을 때는 아니 이게 논란거리가 된다고?난 늘 이렇게 살아왔는데 라고 생각했습니다만 타입스크립트에서는 아예 null은 사용하지 말고 undefined를 사용하라는 컨벤션까지 있다고 하고 (물론 강제하는 것은 아니겠지만), [https://github.com/Microsoft/TypeScript/issues/8940] 여러 가지 글을 읽고 나니 제가 그동안의 제가 편향적으로 생각했던 것은 아닌가 싶어 블로그로 정리하게 되었습니다.

 

다른 블로그에 훨씬 더 잘 정리되어 있는 글이 많으므로 진정한 이해를 바라신다면 제 포스팅 말고 다음 포스팅으로 넘어가실 것을 추천합니다. 더 훌륭하신 분들이 꼼꼼히 써두셨고 제 포스팅은 좀 엉성하거든요.

 

https://blog.shiren.dev/2021-10-05/

null 떠나고 만난 undefined

 

https://anstrengung-jh.tistory.com/m/103

null과 undefined에 관한 고찰

 

 

그럼 잠시 undefined와 null에 대해 알아볼까요.

 

 

undefined

 

 

undefined는 값이 정의되지 않았을 때 자동으로 할당되는 값입니다.

 

값을 선언 한 후 초기화하지 않았을 때.

var a;

console.log(a); //- undefined

 

존재하지 않는 객체 속성에 접근했을 때.

 

var obj = {};

console.log(obj.property); // undefined

 

함수의 리턴값을 정해주지 않았을 때.

 

function myFunction() { }

console.log(myFunction()); //- undefined

 

기본적으로 undefined를 리턴합니다. 저는 평범한 자바스크립트 프로그래머답게 undefined는 브라우저가 정의한 빈 값이라는 의미로만 undefined를 사용하고 그 외에 유저가 빈 값을 설정해야 하는 값에는 null을 사용합니다.

 

 

null

 

 

그렇다면 null은 뭘까요? 앞서 말했듯 값이 비어있음을 의도적으로 나타낼 때, 값을 초기화할 때 주로 사용합니다.

 

var a = null;

console.log(a); //- null

 

갑자기 undefined와 null의 개념 설명이 나와 다소 뜬금없었습니다만, 제가 말씀드리고 싶은 것이 바로 이 개념입니다.

 

undefined가 정의되지 않은 빈 값이라면 그 의미에 맞게 사용해줘야 함이 타당하지 않은가요? 아직 존재하지 않는 것에 "너는 이제부터 없는 값이야." 라고 말한다면 그거야말로 undefined가 아닌 null에 더 가깝다고요. 아무튼 저는 여전히 이 생각이 여전하지만 null 대신 undefined만을 사용하고자 하는 의견에도 공감가는 부분이 아주 없는 것은 아니었습니다. 브라우저에서 없음을 나타내는 값인 undefined가 이미 있는데, 개발자가 null을 사용하는 경우 falsy 검사를 두 번이나 해주어야 하기 때문입니다. 이렇게 말하면 잘 체감이 오지 않는데 코드로 보면 명확하실 겁니다.

 

if (data !== undefined && data !== null) {
  ...
}

 

서버로 데이터 요청을 했는데 매번 이런 식으로 두 번 검사를 한다면 귀찮지 않겠습니까? 제가 작성한 코드에도 이런 부분이 꽤나 있었던 것 같습니다. 쓰임새가 다르니 두 번 하는 건 어찌 보면 당연한 일이지만, 그런 의견이 있다는 것을 알기 전까지 관점을 달리 생각해보지 못했다는 것이 조금 부끄러웠습니다.

 

undefined를 사용해야 하는 두 번째 이유로는 null과 관련한 자바스크립트의 유명한 오류 때문인데요. null의 타입은 null이 아니라 object인 그 오류입니다.

 

console.log(typeof null); //- object

 

자바스크립트 설계상의 오류라고 하는데, 이것을 수정할 경우 이미 세상에 나와버린 무수히 많은 프로그램에 영향이 가기 때문에 함부로 수정할 수 없다고 합니다. 이렇게 타입 검사에 버그가 있다 보니 되도록이면 사용하지 말자는 것이죠.

 

 

그래서 뭘 쓰면 좋은가요?

 

 

여러 블로그에서 자신만의 결론을 도출하듯 저도 저만의 결론을 도출하였는데요. 일단 양쪽 다 사용해보고 판단하자! 였습니다. 개념으로 알고 있는 것보다 코드를 작성하며 각각에 대한 장단을 직접 체득하는 것이 비교에 빠르기도 하고, 마침 또 진행하고 있는 사이드 프로젝트 주제가 두 개라서 각각 적용해볼 수 있을 거라고 생각했기 때문입니다. 어쨌든 기술이 빠르게 변화하는 업계에 있는 사람으로써 고정관념이 굳어지는 것은 경계해야 할 일이니, 이러한 주제를 알게 됨에 다행이라는 생각을 했습니다.