undefined & null

// ! 값을 반전
// !! boolean으로 형변환 시도

!null // true
!!null // false

null === false // false
!null === true // true

// null은 연산에 있어서 0으로 계산됨.
null + 123 // 123

let variable;
typeof variable // 'undefined'
// 선언은 했지만 값은 정의되지 않거나 할당되지 않은 상태

// undefined는 연산에 있어 Number type으로 취급되지 않는다.
undefined + 10 // NaN

!undefined // true
!!undefined // false

undefined == null // true
undefined === null // false
!undefined === !null // true ...?

undefined, null은 값이 없거나 정의되지 않은 상태를 의미합니다. null은 이 상태를 명시적으로 표현한 경우에 해당합니다. 즉, undefined는 값이 없는 상태를 javascript에서 정의한 것이고 null은 사용자가 직접 정의한 경우입니다.

typeof undefined는 'undefined'이고 typeof null은 'object' 입니다.

undefined와 null을 사용하기에 앞서 개발 환경에서 사전에 의견을 조율하는 것이 중요합니다. 저의 경우 주로 undefined는 직접 할당하지 않고 값을 조회할 경우에만 사용하고, null의 경우 값이 있어야 하는데 할당되기 전 초기값을 지정할 때 주로 사용하고 있습니다.

== & ===

동등연산자 ==를 사용하면 형변환(types casting)이 발생합니다.

'1' == 1 // true
1 == true // true

느슨한 체크가 이루어지며 이러한 성질을 활용해서 코드를 작성하는 경우도 더러 있습니다. 결과적으로 보자면 지양해야 하는것이 맞습니다.

다음 예시를 보겠습니다.

<input id="ticket-number" name="ticket" value="0" />

id가 ticket-number인 엘리먼트의 value값을 가져오는 예시입니다. value값은 "0"이며 이는 string 타입인 값입니다.

const ticketNumber = document.querySelector("#ticket-number");

ticketNumber.value == 0	// true
ticketNumber.value === 0 // false

==을 통해 true값을 얻을 수 있지만 이것은 의도한 바가 아닙니다. 왜냐하면 비교 대상인 값이 string 타입의 "0"이 아닌 number 타입의 0이기 때문에 숫자값을 비교한다는 의미를 가진 코드이기 때문입니다. 따라서 strict한 동등연산자===를 사용해서 값을 비교해야 합니다.

// 형변환을 통한 strict 동등연산자 비교
Number(ticketNumber.value) === 0 // true
// 혹은
ticketNumber.valueAsNumber === 0 // true

코드가 의도하는 바를 명확히 하고 이 동작의 의미를 해치지 않도록 strict 동등연산자를 활용하여 명시적인 형 변환을 통한 비교를 하도록 합니다.
==와 === 비교를 참고하시면 보다 더 도움이 될 것 같습니다.