[JavaScript] truthy,falsy 이해하기

JavacScript의 truthy, falsy 이해하기

 

Truthy, Falsy  vs True, False

 

☝ Truthy? 그게 뭔데?

 

true, false는 들어봤어도 truthy, falsy는 잘 모를수도 있다. 우선 이 둘의 차이점을 알아보자.

 

 

• True와 False: 불리언 타입의 값으로 각각 참과 거짓을 나타낸다.
• Truthy와 Falsy: 조건문이나 논리 연산에서 각각 true 또는 false로 평가되는 다양한 타입의 값을 의미한다.

 

 

평가 방식:

• True와 False는 불리언 표현식의 결과로 직접 사용된다.
• Truthy와 Falsy는 조건문이나 논리 연산에서 평가될 때 true 또는 false로 해석된다.

 

 

Truthy, Falsy 알아보기

 

☝ Truthy, Falsy 개념을 알면 뭐가 좋지?

 

JavaScript에서 모든 값은 truthy 또는 falsy로 평가된다.

JavaScript는 *동적 타입의 언어로, 값이 조건문에서 어떻게 평가되는지 이해하는 것이 매우 중요하다.

 => JavaScript에서 truthy와 falsy 값의 개념을 이해하는 것은 조건문을 효과적으로 작성하고 예기치 않은 버그를 방지할 수 있다!

 

 

✨여기서 잠깐!

* 동적 타입의 언어란 무엇일까?

• 프로그램 실행 시점(runtime)에 변수의 타입을 결정하고 검사하는 언어
• 이러한 언어에서는 변수에 저장되는 값에 따라 그 타입이 자동으로 결정되며, 변수의 타입을 명시적으로 선언할 필요가 없다.
• 장점 : 유연성을 제공, 단점 : 타입 관련 오류를 잡아내기 어려울 수 있다.
• 대표적 언어 : JavaScript, Python, Ruby, PHP

 

☝ truthy,falsy에는 어떤 타입이 있을까?

 

Falsy 값

 

Falsy 값은 논리 연산자나 조건문에서 false로 평가되는 값

JavaScript에서 다음 여덟 가지 값은 falsy로 평가된다

Falsy 값

1. false : 불리언 값 false.
2. 0 : 숫자형 값 0.
3. -0 : 음수형 0.
4. 0n : BigInt 타입의 0.
5. "" : 빈 문자열.
6. null : 존재하지 않는 값.
7. undefined : 값이 할당되지 않은 변수.
8. NaN : 숫자가 아님(Not-a-Number).

 

이 값들은 조건문에서 `false`로 평가된다.

 

예시 코드

if (false) {
  console.log("이 코드는 실행되지 않습니다.");
}

if (0) {
  console.log("이 코드는 실행되지 않습니다.");
}

if ("") {
  console.log("이 코드는 실행되지 않습니다.");
}

if (null) {
  console.log("이 코드는 실행되지 않습니다.");
}

if (undefined) {
  console.log("이 코드는 실행되지 않습니다.");
}

if (NaN) {
  console.log("이 코드는 실행되지 않습니다.");
}

위의 코드에서 모든 조건문은 falsy 값을 가지기 때문에 실행되지 않는다.

 

Truthy 값

 

falsy 값 외의 모든 값은 truthy로 평가된다.

 

Truthy 값 예시

1. `true`
2. 모든 숫자(0과 -0 제외)
3. 모든 문자열(빈 문자열 제외)
4. 객체
5. 배열
6. 함수

 

 

예시 코드

if (true) {
  console.log("이 코드는 실행됩니다.");
}

if (1) {
  console.log("이 코드는 실행됩니다.");
}

if ("hello") {
  console.log("이 코드는 실행됩니다.");
}

if ({}) {
  console.log("이 코드는 실행됩니다.");
}

if ([]) {
  console.log("이 코드는 실행됩니다.");
}

if (function() {}) {
  console.log("이 코드는 실행됩니다.");
}

위의 코드에서 모든 조건문은 truthy 값을 가지기 때문에 실행된다.

 

 

☝ 조건문에서 활용해보자

 

let myVar;

if (myVar) {
  console.log("myVar는 truthy 값입니다.");
} else {
  console.log("myVar는 falsy 값입니다.");
}

 

위 같은 코드가 있다면 어떤 log값이 실행될까?

myVar는 변수 선언은 되었지만 초기화되지 않았다. 초기화되지 않은 변수는 JavaScript에서 undefined 값을 가지게 된다. 따라서 myVar는 undefined이다.

 

=> undefined는 falsy 값으로 평가되어 "myVar는 falsy 값입니다."가 출력된다.

 

 

😀 느낀점

Java를 학습하다가 JavaScript로 오니, 동적 언어의 특징으로 인해 코드가 헷갈리는 경우가 있었다.

타입에 대한 명확한 이해가 없어서 예기치 않은 버그가 발생하기도 하였다. 😥

 

truthy와 falsy 을 알면 조건문을 효과적으로 설계할 수 있고, 불필요한 타입 변환을 피할 수 있다.

이러한 개념을 잘 활용하여 JavaScript에서 더 효율적이고 신뢰성 있는 코드를 작성해보자!