[ES6] 16. js ==, === 차이점

[ES6] 16. js ==, === 차이점

 

==    은 값만 같아도 true,

===  은 자료형 타입까지 같아야 true,\

 

 

JavaScript에서 `==` 연산자와 `===` 연산자는 둘 다 값들 간의 등호 비교를 수행하지만, `===` 연산자는 비교 대상의 자료형까지 동일한지 확인합니다. 따라서, `===` 연산자는 엄격한(strict) 등호비교를 지원합니다.

아래는 각 연산자의 동작을 보여주는 코드입니다.

```javascript
console.log(5 == "5");    // true
console.log(5 === "5");   // false

console.log(0 == "");     // true
console.log(0 === "");    // false

console.log(false == ""); // true
console.log(false === ""); // false
```

위 코드에서 `==` 연산자는 두 피연산자의 다른 타입을 자동으로 변환하여 비교합니다. 따라서, `"5"` 문자열과 `5` 숫자는 같은 값으로 간주되므로 `5 == "5"`에서 true를 반환합니다.

반면, `===` 연산자는 값과 함께 데이터 타입도 엄격하게 비교합니다. `"5"` 문자열은 숫자형 값 `5`이 되도록 강제한 것이 아니므로, `5 === "5"` 비교에서는 false를 반환합니다. 

`===` 연산자는 자료형 일치 여부도 함께 판단하기 때문에 코드 작성시 이를 고려한 방법으로 진행해야합니다. 예를 들어, 함수에서 반환하는 값의 자료형이 중요한 경우에는 `===` 연산자를 사용하여 반환 값의 자료형까지 체크하도록 코드를 작성하면 좋습니다.

 

---

`alert("10" == 10);`는 `true`를 반환하고,

 `alert("10" === 10);`는 `false`를 반환합니다.

첫 번째 `alert` 문에서는 `==` 연산자가 비교하기 전에 `"10"` 문자열을 자동으로 숫자형으로 변환하여 값을 비교합니다. 따라서 `"10"`이라는 문자열은 `10`으로 변환되어 값이 같기 때문에 `true`를 반환합니다.

하지만 두 번째 `alert` 문에서는 `===` 연산자가 값 뿐만 아니라 데이터 타입도 엄격하게 비교하기 때문에, `"10"` 문자열과 `10` 숫자는 데이터 타입이 다르기 때문에 `false`를 반환합니다.

그래서 가능한 한 `===` 연산자를 사용하여 값과 데이터 타입의 일치 여부를 동시에 검사하는 것이 좋습니다. 이렇게 함으로써 의도하지 않은 형 변환이나 예측할 수 없는 결과를 방지할 수 있습니다.