== 과 === 의 차이
먼저 문자와 변수의 비교 실험
var a = "1";
var b = 1;
console.log(a==b);
결과:true
console.log(a===b);
결과 :false
== 연산자
숫자와 문자열을 비교할 때, 문자열을 숫자로 변환한다. JavaScript는 문자열의 숫자 리터럴을 Number형의 숫자로 변환하려고 한다. 처음에 그 문자열의 숫자 리터럴부터 수학적인 값을 이끌어 낸다. 그 다음 가장 가까운 Number형의 수로 반올림한다.
즉, == 는 문자열을 숫자와 비교하는 경우 문자열을 숫자로 변환하여 비교한다.
=== 연산자
피연산자끼리 형을 변환하지 않고 (위에서 표시한 것 처럼) 엄밀하게 비교한다. 이 경우 문자열은 숫자로 변환되지 않으므로, false가 리턴되었다.
형 변환에 대해서
바로 앞에서 == 연산자에서는 형변환이 이루어지는 경우가 있다고 설명했었다. 데이터의 형태는 여러 가지 있지만, 어떻게 변환될까?
Boolean형
피연산자의 한 쪽이 Boolean형인 경우, 논리 피연산자가 true인 경우 1로, false라면 +0으로 변환된다.
console.log(true==1); // true
console.log(true===1); // false
console.log(false== 0); // true
console.log(false=== 0); //false
오브젝트
오브젝트를 숫자 또는 문자열과 비교하는 경우, JavaScript는 그 오브젝트의 기본값을 리턴한다. 연산자는 그 오브젝트를 그 오브젝트의 valueOf나 toString이라는 메소드를 이용해 primitive한 값, 혹은 String, 또는 Number의 값으로 변환한다. 이러한 변환을 시도 후 실패했을 때에는 런타임 에러가 발상한다.
console.log("foo" == new String("foo")); //true
console.log("foo" === new String("foo")); //false
위 코드에서는 원시(primitive) 자료형과 String형의 비교하고 있으므로, String형이 primitive형으로 변환됐다. 따라서 아래의 코드는 false이다.
console.log(new String("foo")==new String("foo"));
다른 오브젝트(라기보다는 인스턴스) 사이의 비교가 되므로, false가 된다.
따라서 이러한 장난을 치면 어떻게 될까?
var s = new String("foo");
console.log("foo"==s);//결과:true
//valueOf메소드를 다시 작성
s.valueOf=function(){return "boo";}
console.log("foo"==s); //결과:false
console.log("boo"==s); //결과:true
String형과 primitive형의 문자열을 비교한 경우, 역시 valueOf를 호출하여 문자열과 비교한다.
또한, undefined와 null의 비교하면 아래와 같이 된다.
console.log(null == undefined);
결과:true
console.log(null === undefined);
결과:false
결론
== 연산자는 문자열과 값을 비교할 경우 문자열을 값으로 변환후 가장 가까운 숫자로 반올림하여 비교하고, === 연산자는 값과 자료형을 모두 비교하기 때문에 === 연산자를 사용하는 편이 예상치 못한 오류를 방지할 수 있다.
참고자료
developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Identity
'IT > 언어' 카테고리의 다른 글
[python] Google 스타일의 Python Docstring 입문 (0) | 2020.10.21 |
---|---|
[JavaScript] JavaScript의 작성법 (0) | 2020.10.06 |
[python] python의 Comprehension (0) | 2020.08.26 |
[python] python 인스턴스 변수와 클래스 변수 (0) | 2020.08.23 |
[python] python의 변수 사용 범위 정리 (2) (0) | 2020.08.21 |