자바스크립트: '==' 와 '===' 는 다르다!

filoscoder·2019년 9월 26일
23
post-thumbnail

🤨 무엇이 다른가?

저는 자바 언어를 먼저 배운 입장에서 자바스크립트에 깊게 노출되지 않았기 때문에 충격을 받았다. 비록 자바스크립트의 어떤 기능, 사건 처리, 그리고 어떤 jQuery 속임수에 상당히 익숙했지만, 자바스크립트에 대한 미묘한 세부 사항들을 알지 못했다. 다시 마음을 잡고 웹 개발의 기본을 공부하기로 마음 먹은 저는 '==' 와 '===' 연산자의 차이를 알지 못한다고 스스로 말하면서 올바른 생각을 했다.

정답부터 말하자면, '=='와 '===' 연산자의 주된 차이점은, 예를 들어, 숫자를 숫자 리터럴과 비교하면, '=='는 그것을 허용하지만, '===' 두 변수의 형식은 동일하지 않은 경우, 값뿐만 아니라 두 변수의 유형도 확인하므로, 허용하지 않는 것이다. 즉, '==='는 'false'으로 반환하고, '=='는 'true'로 반환다.

두 연산자의 차이를 훨씬 더 잘 이해하기 위해 두 가지 예를 볼 것이다.

🤓 '=='와 '==='의 차이점

자바스크립트는 엄격한 비교유형변환 비교를 모두 지원하므로, 어떤 연산자가 어떤 비교조건에 사용되는지가 중요하다. 위에 말했듯이, ===는 변수 유형을 고려하는 반면, ==는 변수 값을 기반으로 유형을 수정한다. 다음은 자바스크립트 프로그래밍 언어에서 "==" 연산자와 "===" 연산자 사이의 두 가지 차이점들이다.


  • ☝ '==' 연산자를 이용하여 서로 다른 유형의 두 변수의 [값] 비교
  • ✌ '==='는 엄격한 비교를 하는 것으로 알려져 있다 ([값 & 자료형] -> true).

🧐 #간단한 예제

🔍 숫자와 불리언 비교

✔ 0값은 false와 동일하므로 -> true 출력

0 == false // true 

✔ 두 피연산자의 유형이 다르기 때문에 ->false

0 === false // expected output: false 
console.log(typeof 0); 	// expected output: "number"
console.log(typeof false); // expected output: "boolean"
🔍 숫자와 문자열 비교

✔ 자동 유형변화 비교

2 == "2" // expected output: true

✔ 두 피연산자의 유형이 다르기 때문에 ->false

2 === "2" // expected output: false 
console.log(typeof 2);	// expected output: "number"
console.log(typeof "2");  // expected output: "string"

* 서로 호환되지 않는 두 변수를 비교하면 컴파일 오류* 를 일으키는 자바 평등 연산자(Java Equality 연산자)와 많이 비슷하다.

🤔 #궁굼한 케이스들

🔍 1) null 와 undefined 비교했을 때 어떤 결과가 나올 것인가?

✔ 자동 유형변화 비교

null == undefined // expected output: true

✔ 두 피연산자의 유형이 다르기 때문에 ->false

null == undefined // expected output: false 
console.log(typeof null);	// expected output: "object"
console.log(typeof undefined);  // expected output: "undefined"

🔍 2) '!=' 와 '!==' 비교연산자의 차이는?

예상대로, 유형 변환 비교와 엄격한 비교의 [값]과 [자료형]의 다름을 boolean 형식으로 반환한다.

✔ 값이 다르지 않음으로 (자료형 비교 안함)

2 != "2" // expected output: false

✔ 두 피연산자의 유형이 다른 것이 맞기 때문에 -> true

2 !== "2" // expected output: true 
console.log(typeof 2);	// expected output: "number"
console.log(typeof "2");  // expected output: "string"

🔍 3) 비교 연산자를 이용하여, 'NaN'을 비교하면?

NaN (Not a Number)은, 어떤 것과도 같지 않다는 것을 기억해야 한다.

🏆 #권장사항

🕺 변수를 비교하거나 어떤 비교를 위해 항상 '===' 연산자를 사용 할 것을 권장한다.

💃 가능한 '==' 연산자를 사용하지 않도록 하고, 대신 직접 자료형을 변환하여(casting) 보다 코드 가독성을 높이도록 한다.

profile
Keep thinking code should be altruistic

7개의 댓글

comment-user-thumbnail
2021년 12월 27일

너무 내용이 좋네요. 덕분에 쉽고 명확하게 ==와 ===의 차이를 배워갑니다.
근데 예제들에서 위는 ==, 아래는 ===의 예시를 들어주시는것 같은데 위아래다 == 입니다.

1개의 답글
comment-user-thumbnail
2022년 2월 10일

==와 ===의 차이점을 쉽게 알 수 있던 내용이였습니다. 하지만 공부를 하면서 안풀리는 의문점이 있는데

const mango1 = { name: "mango" };
const mango2 = { name: "mango" };
const mango3 = mango1;
console.log(mango1 == mango2); // false
console.log(mango1 === mango2); // false
console.log(mango1 === mango3); // true

이 코드가 왜 이런식으로 나오는지 이해가 안가네용
== 값이 같으면 true, === 값과 타입이 같아야 true 라고 위에 되어 있는데 왜 console.log에 찍힌 부분이 왜 저렇게 나오는지 잘 이해가 안가네용... 아신다면 답변 부탁드립니당

1개의 답글
comment-user-thumbnail
2022년 11월 18일

쉽고 확실하게 이해하고 갑니다. 혹시 그림 제 개발일지 정리에 이미지 사용해도 괜찮을까요?

1개의 답글