JavaScript에서 == 와 === 차이점

<== 와 === 은 자바스크립트에서 뭔가요?>

==와 ===는 비교를 통해 두 값의 동일성을 판단하는 데 사용됩니다. 두 연산자 모두 값이 같으면 true를, 그렇지 않으면 false를 반환합니다. ==와 ===는 동일성을 판단하는 기준이 달라 어느 연산을 사용할지 선택하는 것은 어떤 종류의 비교를 수행하려고 하는지에 달려있습니다.

 

<== 느슨한 동등 (이중 동호) / (loose equality) 사용법>

== 는 비교전 type coercion을 수행하기 때문에 느슨한 동등으로 불립니다. 

이 말은, 비교하는 두 피연산자의 데이터 타입이 서로 다를 경우, JavaScript 엔진이 자동으로 한 피연산자의 타입을 다른 피연산자의 타입과 동일하게 변환하여 비교를 가능하게 한다는 의미입니다.

 

< 타입 강제 변환(Type Coercion) 규칙은 다음과 같습니다>

• 하나의 피연산자가 문자열일 경우: 다른 피연산자가 문자열로 변환됩니다.
• 하나의 피연산자가 숫자일 경우: 다른 피연산자가 숫자로 변환됩니다.
• 하나의 피연산자가 불리언일 경우: 불리언 값이 숫자로 변환됩니다. (true는 1, false는 0)
  e.g console.log(true == 1); // true
• 하나의 피연산자가 객체이고 다른 하나가 기본형 값일 경우: 객체는 비교 전에 기본형 값으로 변환됩니다.
• 하나의 피연산자가 null 또는 undefined일 경우: 다른 피연산자도 null 또는 undefined여야 true를 반환합니다. 그렇지 않으면 false가 반환됩니다.

== 사용하면 string "10"을 숫자 (num)으로 변경한 후에 두개의 변수을 비교하여 true가 나오게 됩니다. 

 

<=== Triple equality 사용법>

=== (삼중 등호)는 엄격 동등 연산자 라고 하며, == (이중 등호)와 비슷하게 작동하지만 중요한 차이점이 있습니다. 피연산자의 타입을 변환하지 않고 그대로 비교합니다. 변수를 비교할 때, 먼저 타입이 다른지 확인합니다. 타입이 다르면 false를 반환합니다. 타입이 같으면 값을 비교합니다. 값이 같고 숫자가 아닌 경우 true를 반환합니다.

 

반대로 === 사용하면 변수를 변경하지 않고 비교하게 되어 false가 나오게 됩니다. 

 

<결론>

=	==	===
JavaScript에서 =는 변수에 값을 할당하는 데 사용됩니다	JavaScript에서 ==는 두 변수를 비교하는 데 사용되지만, 변수의 데이터 타입을 무시하고 비교합니다	===는 두 변수를 비교할 때 데이터 타입까지 고려하여 비교합니다
할당 연산자	비교 연산자	엄격 비교 연산자
할당된 값을 반환합니다	두 피연산자의 타입을 고려하지 않고 동등성을 확인합니다	두 피연산자의 타입까지 고려하여 동등성을 확인합니다
할당 연산자는 할당된 값 자체를 평가합니다	두 피연산자의 타입을 고려하지 않고 같으면 true를 반환합니다. 다르면 false를 반환합니다	두 변수의 값과 데이터 타입이 모두 같을 때만 true를 반환합니다. 그렇지 않으면 false를 반환합니다

 

참고 자료 :
https://www.shecodes.io/athena/47668-what-is-the-difference-between-and-in-javascript#:~:text=The%20main%20difference%20between%20the,variables%20without%20performing%20type%20conversion.&text=In%20the%20first%20console.

[JavaScript] - What is the difference between == and === in JavaScript?

https://www.geeksforgeeks.org/how-behaves-differently-from-in-javascript/

Difference Between == & === in JavaScript - GeeksforGeeks

https://www.freecodecamp.org/news/loose-vs-strict-equality-in-javascript/

How is == Different from === in JavaScript? Strict vs Loose Equality Explained

https://www.guru99.com/difference-equality-strict-operator-javascript.html

Difference Between =, ==, and === in JavaScript [Examples]