TypeScript에서 `==` 와 `===` 의 차이점 및 적절한 사용법

==과 ===는 자바스크립트와 타입스크립트에서 가장 자주 사용되는 비교 연산자 중 하나로, 그 차이를 명확하게 이해하는 것이 중요합니다. 이 두 연산자는 비교하는 값이 같은지를 확인하지만, 비교하는 방식에서 중요한 차이가 있습니다.

1. 느슨한 동등 연산자 (==)

==는 느슨한 동등 연산자로, 비교하는 두 값의 타입이 다를 경우 타입 변환을 통해 같은지를 확인합니다. 즉, 타입이 다르더라도 값이 같다고 판단될 수 있습니다.

예제 1: 타입 변환과 느슨한 동등 비교

console.log(1 == '1'); // true

이 예제에서 1은 숫자이고 '1'은 문자열이지만, == 연산자는 문자열을 숫자로 변환한 후 비교합니다. 변환된 값은 둘 다 숫자 1이기 때문에 true를 반환합니다.

예제 2: 불리언 타입과 숫자 비교

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

true는 숫자 1로 변환되고, false는 숫자 0으로 변환되기 때문에, == 연산자는 두 값이 같다고 판단합니다.

2. 엄격한 동등 연산자 (===)

===는 엄격한 동등 연산자로, 타입 변환 없이 두 값이 타입과 값이 모두 같아야 true를 반환합니다. 즉, 두 값이 타입부터 동일해야 합니다.

예제 3: 타입이 다른 경우

console.log(1 === '1'); // false

이 예제에서는 === 연산자를 사용했기 때문에, 두 값의 타입이 다르므로 타입 변환이 일어나지 않고, false를 반환합니다.

예제 4: 같은 타입, 같은 값 비교

console.log(1 === 1); // true 
console.log('hello' === 'hello'); // true

타입과 값이 모두 같은 경우에는 true를 반환합니다. ===는 항상 정확한 비교를 원할 때 사용하는 것이 좋습니다.

3. 느슨한 비교와 엄격한 비교의 차이점

예제 5: null과 undefined

console.log(null == undefined); // true 
console.log(null === undefined); // false

null과 undefined는 타입이 다르지만, ==는 두 값을 동일하게 취급합니다. 반면, ===는 타입까지 비교하기 때문에 false를 반환합니다.

4. 적절한 사용 사례

느슨한 비교가 적절한 경우

== 연산자는 타입 변환을 기대할 때 사용할 수 있습니다. 예를 들어, 폼 데이터나 API에서 받은 값이 여러 타입일 수 있지만 특정 값과 동등한지를 확인해야 할 때 유용합니다.

function isPositive(input: any): boolean { return input == 1; } 

console.log(isPositive(1)); // true 
console.log(isPositive('1')); // true 
console.log(isPositive(true)); // true

이 예제에서는 input이 숫자, 문자열 또는 불리언 타입이라도 1과 동등한 값이면 true를 반환합니다. 이는 폼에서 사용자가 입력한 값이 반드시 특정 타입일 필요가 없는 경우 유용합니다.

엄격한 비교가 적절한 경우

=== 연산자는 타입과 값의 정확한 일치를 요구하는 비교에서 사용해야 합니다. 특히, 타입스크립트처럼 명시적인 타입 시스템을 사용하는 경우, 엄격한 비교를 사용하는 것이 버그를 줄이고 코드의 명확성을 높일 수 있습니다.

function isExactPositive(input: number): boolean { return input === 1; } 

console.log(isExactPositive(1)); // true 
console.log(isExactPositive('1')); // TypeScript Error

이 예제는 엄격하게 input이 숫자 1일 때만 true를 반환합니다. 타입스크립트에서 ===를 사용하면 타입 에러를 명확히 확인할 수 있어 더 안전한 코드를 작성할 수 있습니다.

5. 타입스크립트에서 ==와 ===를 사용할 때 고려 사항

타입스크립트는 자바스크립트의 상위 집합이므로, 기본적으로 자바스크립트와 동일한 비교 연산자 동작을 따릅니다. 그러나 타입스크립트는 타입 안정성을 강화하는 언어이기 때문에, 엄격한 동등 비교(===)를 사용하는 것이 권장됩니다.

예제 6: 타입스크립트에서의 비교 연산

let value: number = 5; 

console.log(value == '5'); // true (타입 변환이 일어남) 
console.log(value === '5'); // false (타입이 다름) 
let anotherValue: string = '10'; 
console.log(anotherValue == 10); // true (타입 변환으로 인해 값이 같음) 
console.log(anotherValue === 10); // false (타입이 다름)

타입스크립트를 사용하면 이런 상황에서 타입 경고를 받을 수 있습니다. 즉, 타입스크립트는 잘못된 비교가 발생할 가능성을 줄여줍니다.

타입 추론과 엄격한 비교의 장점

타입스크립트에서 타입을 명확하게 선언하면, 예상치 못한 타입 변환으로 인해 발생하는 버그를 방지할 수 있습니다. 엄격한 동등 비교를 사용함으로써 타입 일관성을 유지할 수 있으며, 이는 코드 유지보수성을 크게 향상시킵니다.

6. 정리: 언제 ==와 ===를 사용해야 할까?

• ==: 느슨한 동등 비교는 서로 다른 타입의 값을 비교할 때 유용하지만, 예기치 않은 타입 변환으로 인해 버그가 발생할 수 있습니다. 명확한 이유가 있는 경우에만 사용하는 것이 좋습니다.
• ===: 엄격한 동등 비교는 타입과 값 모두를 비교하므로 예측 가능한 결과를 제공합니다. 타입스크립트와 같이 타입 안전성을 보장하려는 환경에서는 ===를 기본으로 사용하는 것이 좋습니다.

==를 사용할 때 주의할 점

• 예상치 못한 타입 변환이 발생할 수 있으므로 결과가 명확히 예상되지 않는 상황에서는 사용하지 않는 것이 좋습니다.
• 특히 null, undefined, false, 0, ''(빈 문자열) 등의 비교에서 혼동이 발생할 수 있습니다.

===의 권장 사용

• 타입과 값이 모두 동일한지 정확히 확인해야 할 때는 ===를 사용하는 것이 안전합니다.
• 타입스크립트처럼 명확한 타입 시스템을 사용하는 경우, ===는 타입 안전성을 확보하는 데 도움이 됩니다.

결론

==과 ===의 차이를 이해하고 적절히 사용하는 것은 자바스크립트 및 타입스크립트 개발에서 매우 중요합니다. ==는 느슨한 비교로 때때로 유용할 수 있지만, 대부분의 경우 예상치 못한 타입 변환을 피하기 위해 ===를 사용하는 것이 좋습니다. 특히 타입스크립트 환경에서는 엄격한 동등 비교가 더 안전하고, 코드의 예측 가능성을 높여줍니다.