Javascript 동치비교

 

Javascript 에서는 다른 언어랑 다르게 비교 연산자로 '==' 뿐만 아니라 '===' 가 있어 다른 변수와 비교할 때마다 내가 짠 코드가 정확한 건지 아닌지 헷갈릴 때가 종종 있다. '==' 는 느슨한 비교 연산자고 '===' 는 엄격한 비교 연산자인데 사용할 때마다 결과가 달라 이번 포스트에서는 Javascript 비교 연산자를 깔끔히 정리해보려고 한다. 

 

string 비교 연산 

 

변수와 상수형 문자열 사이의 비교는 '==' 든  '==='를 사용하든 상관 없다. 아래 코드를 보면 두개의 비교 연산 모두 true로 리턴하게 된다.

 

const simple = "simple"
const is = simple === 'simple' ? 'is' : 'is not' // true, is='is'
const theBest = simple == 'simple' ? 'the best' : 'the worst' // true, theBest='the best'

console.log(simple + ' ' + is + ' ' + theBest)

-> simple is the best

 

그런데 문자열을 String 클래스로 선언을 하면 다르다. 아래 코드에서 엄격한 비교를 사용한 라인은 false가 리턴했고 느슨한 비교를 사용한 라인은 true를 리턴했다. == 를 사용한 경우 유형을 변환시켜서 비교하는 반면 ===를 사용하면 유형변환을 하지 않아 내부 값이 같더라도 타입이 다른 경우 false를 리턴하게 된다. 두번째 비교 연산에선 클래스로 선언된 simple2 가 string 타입으로 유형이 변환됐기 때문에 둘을 같은 것이라고 본 것이다.

 

const simple = "simple"
const simple2 = new String("simple")

const is = simple === simple2 ? "is" : "is not" // false, is = "is not"
const theBest = simple == simple2 ? "the best" : "the worst" // true, theBest = "the best"

console.log(simple + ' ' + is + ' ' + theBest)
-> simple is not the best

 

그러면 유형 변환만 믿고 언제든 느슨한 비교 연산을 사용해도 되는 걸까? 유형 변환은 클래스 간에서 뿐만 아니라 number 변수에서도 적용된다. 아래 코드에서 a와 b 모두 17이라는 값을 담고 있지만 a는 string의 형태고 b는 number의 형태다. 그런데 느슨한 동치 비교에선 둘이 같다고 본다. 일반 언어 컨셉에선 이해하기 어려운 개념일것이다. 느슨한 동치가 유용할 때도 있겠지만 실수하기에도 좋은 부분이기 때문에 코딩할 때 주의하는것이 필요할 것 같다.

 

const a = '17'
const b = 17

console.log(a == b) // true
console.log(a === b) // false