[JavaScript] null과 undefined

null과 undefined

나는 아무런 생각이 '없다'

JavsScript 뿐만 아니라 다른 언어를 배울때도 느꼈지만 null과 undefined에 대한 차이가 무엇인지 추상적으로만 생각하고 넘겼었다.

그냥 쉽게 생각해서 둘다 '없음'을 나타내는 것이지 차이가 있겠냐라고 생각하고 더 이상 자세히 찾아보지 않으려고 했었다.(너무 찾아볼게 많았기에...)

최근에 '클린코드 자바스크립트'라는 강의를 통해 JavaScript에 대해 공부하던 중 'null과 undefined'에 대한 수업이 있어서 해당 내용을 정리하며 null과 undefined의 차이에 대해 알아보고자 한다.

null과 undefined는 무엇이 다른가?

Google에 null과 undefined 차이에 대해 찾아보니 이런 이미지가 제일 먼저 나타났다.

언제 올라온 이미지인지 모르겠지만 해당 이미지를 캡쳐할 당시만 해도 하트가 1500개가 넘게 찍혀있다.. 그만큼 적절한 비유라는 뜻일 것이다. (해당 이미지를 봤을 때 나도 모르게 어느정도 이해를 해버렸다)

undefined VS null 출처: www.google.com

undefined와 null은 JavaScript에서 한 마디로 진짜 '없음'을 나타내는 값이다.

두 값의 의미는 비슷하지만, JavaScript에서 각각 사용되는 목적과 장소가 다르며, 실제로 의미 또한 다르다.

 undefined  과 null의 비교

JavaScript는 값이 대입되지 않은 변수 혹은 속성을 사용하려고 하면 undefined를 반환한다.

let foo;
foo // undefined

const obj = {};
obj.prop; // undefined

 

null은 '객체가 없음'을 나타낸다.

실제로 typeof 연산을 해보면 아래와 같은 값을 반환한다.

typeof null // 'object'
typeof undefined // 'undefined'

'없음'을 나타내기 위해 undefined를 쓴다고 가정했을 때, 코드는 그 의미가 불분명해진다.

해당 예시에서 foo변수를 선언만 하는 경우와 bar 변수에 undefined를 할당하는 경우 모두 undefined로 나타나며, 객체에 

 

비록 undefined가 '없음'을 나타내는 값일지라도, 대입한 적 없는 변수 혹은 속성과, 명시적으로 '업음'을 나타내는 경우를 구분할 수 있어야 코드의 의미가 명확해질 것이다. 

프로그래머의 입장에서 명시적으로 부재를 나태고 싶다면 항상 null을 사용하는 것이 좋다.

null

!를 한번 붙이면 값을 뒤집을 수 있고 !! 두 번 붙이면 boolean으로 형변환이 발생

➡️ !!null이 false인 것을 확인

null === false 는 false지만

!null === true 는 true

undefined

숫자와의 조합

• null => math => 0
  

  null + 123     // 123

  null은 수학 연산에서는 0으로 취급됨null은 비어있는 값을 명시적으로 지정하는 방법이지만, 숫자적으로 표현하면 0에 가깝다.
• undefined
  숫자와 조합할 경우 Not A Number이 발생
  

  undefined + 10 // NaN

🔅 요약

• undefined, null ⇒ 값이 없거나 정의되지 않은 것을 명시적인 표현
• 숫자와의 표현
  • undefined: NaN, type: undefined
  • null: 0, type: object
• 많은 부분이 헷갈리 때문에 undefined와 null을 활용한 코드를 많이 작성하기 보다 하나의 팀에서 convention이 있을 경우 좋다.

---

참고

• https://helloworldjavascript.net/pages/160-null-undefined.html
• https://www.udemy.com/course/clean-code-js/