타입스크립트에서의 `truthy`와 `falsy`
이 기사에서는 타입스크립트의 truthy와 falsy에 대해 설명합니다.
YouTube Video
타입스크립트에서의 truthy와 falsy
타입스크립트의 truthy와 falsy 개념은 프로그램의 조건문에서 매우 중요한 역할을 합니다. 여기에서 우리는 이 개념들을 자세히 설명하고 실제로 어떻게 사용되는지 살펴보겠습니다. 또한, truthy와 falsy 값이 어떻게 처리되는지 이해하기 위해 구체적인 타입스크립트 코드 예제를 제공합니다.
truthy와 falsy란 무엇인가요?
JavaScript와 TypeScript에서는, 모든 값이 조건식에서 true(true) 또는 false(false)로 평가됩니다. 이 값들은 논리적으로 truthy 또는 falsy로 분류됩니다.
- **
truthy**는 조건식에서true로 평가되는 값을 나타냅니다. - **
falsy**는 조건식에서false로 평가되는 값을 나타냅니다.
TypeScript에서, 다음의 값들은 falsy로 간주됩니다:.
- 숫자
0 ""(빈 문자열)
그 외의 모든 값들은 truthy로 간주됩니다.
truthy와 falsy의 구체적인 예시
1// Examples of falsy values
2console.log("0 is", Boolean(0) ? "truthy" : "falsy");
3console.log('"" is', Boolean("") ? "truthy" : "falsy");
4console.log("null is", Boolean(null) ? "truthy" : "falsy");
5console.log("undefined is", Boolean(undefined) ? "truthy" : "falsy");
6console.log("NaN is", Boolean(NaN) ? "truthy" : "falsy");
7
8// Examples of truthy values
9console.log("1 is", Boolean(1) ? "truthy" : "falsy");
10console.log('"hello" is', Boolean("hello") ? "truthy" : "falsy");
11console.log("[] is", Boolean([]) ? "truthy" : "falsy");
12console.log('" " (space) is', Boolean(" ") ? "truthy" : "falsy");truthy와 falsy를 사용한 조건문
truthy와 falsy 개념은 조건문과 반복문에서 자주 사용됩니다. 예를 들어, if 문이나 while 루프에서 이러한 값을 직접 사용하여 간단한 조건 평가를 수행할 수 있습니다.
1// Checking if the length of the array is 0
2let items: string[] = [];
3
4if (items.length) {
5 console.log("The array is not empty");
6} else {
7 console.log("The array is empty");
8}
9
10// Checking if the input value is empty
11let input = "";
12
13if (input) {
14 console.log("Input has value");
15} else {
16 console.log("Input is empty"); // This will be executed
17}?? (널 병합 연산자) 및 || (논리 OR)을 사용한 falsy 값 처리
TypeScript에서는 falsy 값을 다룰 때 유용한 여러 연산자가 있습니다. 특히 Nullish 병합 연산자 (??)와 논리 OR 연산자 (||)가 자주 사용됩니다.
|| (논리적 OR)
논리 OR 연산자는 falsy 값을 기본값으로 대체하는 데 사용됩니다. 그러나, falsy로 간주되는 모든 값(null 및 undefined뿐만 아니라 0과 빈 문자열 "")도 포함됩니다.
1let username = "";
2let displayName = username || "Guest";
3// Since username is empty, "Guest" is assigned
4
5console.log(displayName); // "Guest"
??（Nullish Coalescing）
널 병합 연산자는 기본값을 null 또는 undefined에만 적용하며, 0이나 빈 문자열 ""과 같은 다른 falsy 값은 그대로 처리합니다.
1let username2 = "";
2let displayName2 = username2 ?? "Guest";
3// The empty string is retained
4// since username2 is not null or undefined
5
6console.log(displayName2); // ""
truthy와 falsy와 관련된 함정
truthy와 falsy를 이해할 때 유의해야 할 주요 사항은 의도하지 않은 값들이 falsy로 처리될 수 있다는 점입니다. 예를 들어, 0과 빈 문자열 ""은 유효한 값이지만, 조건문에서는 falsy로 간주되어 잘못된 평가가 이루어질 수 있습니다.
1let score = 0;
2
3if (score) {
4 console.log("You have a score!"); // This will not be executed
5} else {
6 console.log("No score available"); // This will be executed
7}이와 같은 경우, 엄격한 비교 연산자를 사용하면 0과 false와 같은 값을 정확히 구분할 수 있습니다.
1let score = 0;
2
3if (score === 0) {
4 console.log("Score is zero"); // Correctly evaluated
5}falsy 및 NaN과 관련된 함정
NaN은 비교 연산자를 사용할 때 자신을 포함하여 어떤 값과도 같지 않기 때문에 특별한 처리가 필요합니다.
1console.log("NaN === NaN:", NaN === NaN); // false
따라서 NaN을 정확히 감지하려면 Number.isNaN()을 사용하는 것이 더 안전합니다.
1// Bad Example
2let value = parseInt("0");
3if (!value) {
4 console.log("Value is NaN(Incorrect)"); // Incorrectly treats 0 as NaN
5}
6
7// Good Example
8let value2 = parseInt("hello");
9if (Number.isNaN(value2)) {
10 console.log("Value is NaN(Correct)"); // Correctly identifies NaN
11}이처럼, NaN은 자신과도 같지 않기 때문에, NaN과의 비교는 항상 false를 반환합니다. Number.isNaN()을 사용하면 더 신뢰성 있는 검사를 수행할 수 있습니다.
결론
TypeScript에서 truthy와 falsy 개념은 매우 편리하지만, 특히 0과 빈 문자열을 사용할 때 주의가 필요합니다. 이 값을 조건 검사에 사용할 때, 느슨한 비교 (==) 대신 엄격한 비교 (===) 또는 Nullish 병합 연산자 (??)를 사용하면 예기치 않은 동작을 피할 수 있습니다.
위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.