Geuni

같음에 대한 고찰

에러바운더리 컴포넌트 기록을 작성하면서 toss에서 만든 라이브러리인 slash의 ErrorBoundary 컴포넌트 내부 소스코드를 확인해봤다.

한 가지 의문이 생겼는데, null에 대한 값 비교를 !== 이 아닌 !=으로 하고 있는 것이 아닌가.

문득 머릿속에 !=은 뭐가 다르지? 라는 생각이 들었다.
무분별하게 ===, !==이 ==, !=에 비해 더 낫다고 생각하고 무지성으로 쓰고 있었던 것이다.

함부로 ===은 옳고, ==은 잘못된 코드라고 판단해버린 것만 같았다. 명확한 쓰임을 모른 채 말이다.

유사하다.

JS에서 같음은 서로 다르지 않음이라는 사전적 의미보다 좀 더 복잡합니다.
JS에서 같음을 비교할 때는 '정확하게' 일치하는지를 따지기도 하지만, 때로는 '아주 유사'하다거나 교환 가능한지와 같은 좀 더 넓은 관점에서 비교될 때도 있습니다.
그렇기 때문에 일치 비교와 동등 비교의 차이를 알고있어야 합니다.
"- You Don't Know JS 중 -

==과 ===의 가장 큰 차이점은 뭘까?
피연산자의 타입이 다른 경우 == 연산자는 비교 이전에 강제로 타입을 맞추는 작업을 수행한다고 한다.

즉, 두 연산자 모두 타입이 같은 값을 비교한다는 점에서 동일하지만, == 연산자는 강제 변환을 먼저 실행해 피연산자의 타입을 맞춘 이후에 === 연산자처럼 작동한다.

42 == "42"; // true
1 == true; // true

두 줄 모두 피연산자의 타입이 다르다.
따라서, ==는 숫자형이 아닌 값을 숫자로 바꾼 다음 비교한다.

'42' → 42
42 == 42 // true

error != null

위에서 ===과 ==의 가장 큰 차이는 강제 타입변환이라는 것을 알았다.
그럼 error != null을 사용하는 이유는 뭘까?

if (error != null) {
  // error가 null도 아니고 undefined도 아닌 경우에만 실행
  // 즉 실제 에러 객체가 있을 때만 실행됨.
}

if (error !== null && error !== undefined) {
  // 동일한 표현
}

쟁점은 error != null은 null만 비교하는 게 아니라, undefined까지 고려한다는 점이다.
즉, error !== null && error !== undefined와 동일한 의미이다.

결론

결국 장황한 코드를 단축하기 위해 != 를 사용했던 것 같다.

let error_1 = 1;
let error_2 = undefined;
let error_3 = null;

if (error_1 != null) {
  console.log("hi_1");
} else if (error_2 != null) {
  console.log("hi_2");
} else if (error_3 != null) {
  console.log("hi_3");
}

해당 코드를 실행했을 때, hi_1만 찍히는 것을 확인할 수 있다.

같음에 대한 고찰 | geuni