React - JavaScript 응용하기 ( Truthy, Falsy)

안녕하세요.

Hynn 입니다.

 

이번 포스팅에서는 React 에서 JavaScript 를 추가로 응용하기 좋은 몇가지를 소개해드리려고 합니다.

몇가지 기능에 대한 소개를 드리는 첫번째 포스팅에서는 Truthy, Falsy 입니다.

 

일명 참같은 값, 거짓같은 값이라는 의미를 가진 이 두가지를 알아보도록 하겠습니다.

 

let a = '';

if (a) {
  console.log('a is true');
} else {
  console.log('a is false');
}

위의 값은 어떻게 결과가 출력될까요?

결과는 False 입니다.

문자열이 비어있는 것으로, false가 출력됩니다.

 

하지만, 이를 문자열을 넣거나, 빈 배열, 혹은 빈 객체를 넣게 되면 어떻게 될까요?

바로 true 로 출력됩니다. 

물론 undefined 나, null 을 넣게 되면 false 가 출력됩니다.

 

하지만 위의 코드상에서는 boolean 이 아닌 값들도 true, false 가 출력되는데 이 이유는 무엇일까요?

이를 알아보도록 하겠습니다.

 

1. Truthy 와 Falsy 에 대해 자세히 알아보기

 

JavaScript 에서는 "묵시"적으로 모든 값이 Truthy 혹은 Falsy 로 평가 됩니다.

즉, 명시된 값이더라도 ,묵시적인 값으로 모든 값은 True 혹은 false 와 같은 Boolean Context 에서 이를 true 혹은 false 로 간주하고 있기 때문입니다.

 

이를 우리는 조건문, 혹은 논리 연산자 등에서 활용할 수 이습니다.

이를 정의하면 아래와 같이 평가되는 기준이 존재합니다.

 

• Truthy 값
  • Truthy 값은 조건문에서 참으로 간주되는 값을 의미합니다. 일반적으로 대다수의 값이 Truthy 로 평가가 되는데, 주요 예시는 아래와 같습니다.
    • {}, [] 와 같은 객체와 배열 (빈 객체,배열 포함)
    • 문자열 중, 빈 문자열이 아닌 문자열
    • 0이 아닌 숫자 
    • Boolean타입의 데이터 중 True
    • 함수

반면에 Falsy 는 아래와 같은 항목에 대해서는 항상 Falsy 로 간주합니다.

즉 묵시적으로 False 라고 평가하는 것입니다.

 

• Falsy 
  • Boolean 타입의 데이터 중 false
  • 숫자 0, -0 
  • "" 와 같은 빈 문자열
  • null
  • undefined
  • NaN 

이를 우리는 Truthy, Falsy 라는 형태로 평가하는 항목입니다.