js에서 원시값(primitive)이란?

---

js에서 원시 값(primitive)이란 객체가 아니면서 메서드도 가지지 않는 데이터다.
이 원시값들은 불변하여 변형할 수 없다는 특징을 갖고 있다.
원시 값에는 7종류가 존재한다.

• string
• number(en-US)
• bigint (en-US)
• boolean
• undefined -> 알아볼 것
• symbol
• null -> 알아볼 것

null과 undefined란?

---

쉽게 표현하자면,

null : 어떤 값이 의도적으로 비어있음을 표현 (비어있다는 값(상태)을 나타냄, ex. 0)
undefined : 값을 할당받지 않은 경우 (아예 값 자체가 없음)

about null

• 변수가 아무런 값도 가리키지 않는 것을 나타냄
• 코드상에서의 null의 구현

// 존재하지만 값이나 자료형이 존재하지 않는(= null) foo
let foo = null;
foo; //null

about undefined

• 어떤 값이 할당 되기 전의 상태, 진짜 뭐가 없음
• 예제 1

// 정의되지 않고 초기화된 적도 없는 foo
foo; //ReferenceError: foo is not defined

let x; // 정의는 됐으나 값이 없음(= undefined)
if (x === undefined) {
   // 이 문이 실행됨
}
else {
   // 이 문이 실행되지 않음
}

• 예제 2

// x를 선언한 적 없음
// typeof를 사용할 경우 선언한 적 없는 변수로 비교해도 오류를 발생시키지 않음 -> 선호되는 방법
if (typeof x === 'undefined') { // 오류 없이 true로 평가
   // 이 문이 실행됨
}
if(x === undefined) { // ReferenceError
}

• 주의할 점!
  undefined는 예약어가 아니기 때문에 전역범위 외에서 함수 or 변수의 이름으로 사용가능하다 => 디버깅시 혼돈을 야기할 수 있으므로 되도록 피해야 함

null과 undefined의 차이

null과 undefined를 우선 직접 비교해보자!

• js에서는 비교 연산자가 2개 존재한다
  • == : 동등 연산자, 피연산자들의 값 만 비교함 (타입이 다를 시 형변환을 하여 비교)
  • === : 일치 연산자, 피연산자들의 값과 타입 둘 다 비교함 (형변환 x -> 값이 같아도 타입이 다르면 false)
  • 대표적인 예시

    1 == '1' // true -> 타입이 다르므로 형변환을 하여 비교, 값이 같으므로 true 반환
    1 === '1' // false -> 타입이 다르므로 (int === string) false 반환

※ js에서의 비교 연산은 다른 언어와 다르게 좀 이상한(?) 부분이 있으나 이 글에서는 다루지 않음 ※

typeof null          // "object" (not "null" for legacy reason)
typeof undefined     // "undefined" -> type 자체가 undefined 타입
null === undefined   // false
null  == undefined   // true
null === null        // true
null == null         // true
undefined === undefined // true
undefined == undefined // true
!null                // true
isNaN(1 + null)      // false, isNaN: 숫자가 아닌지(NaN, Not A Number)지 판별하는 함수
isNaN(1 + undefined) // true

위의 결과가 실제로 궁금한 사람들은 개발자도구(F12) -> console 탭에 들어가서 따라하셔도 좋습니다.

결론

• null : 값이 없는 상태를 나타냄 (null이라는 값이 할당 됨)
• undefined : 진짜 아무것도 없음 (아직 값이 할당되기 전)
  - 함수의 return 값이 명시적으로 표현되지 않는 경우에 undefined를 return 함