Truthy and Falsy

자바스크립트 문법은 아니지만 알아둬야 하는 개념이다.

Truth : true같은거 Falsy: false같은거 라고 생각하면 된다. 예를 들어 다음과 같은 함수가 있다고 가정해보자.

function print(person) {
  console.log(person.name);
}

const person = {
  name: 'John'
};

print(person);

만약에 이러한 상황에서, print함수가 다음과 같이 파라미터가 비어진 채로 실행됬다고 가정해보자.

function print(person) {
  console.log(person.name);
}

const person = {
  name: 'John'
};

print();

이 코드는 다음과 같은 에러를 생성해낸다.

TypeError: Cannot read property 'name' of undefined

이러한 상황에서, 만약에 print 함수에서 만약에 object가 주어지지 않았다면, 문제가 있다고 콘솔에 출력해야 한다면 다음과 같이 구현할수 있다.

function print(person) {
  if (person === undefined) {
    return;
  }
  console.log(person.name);
}

const person = {
  name: 'John'
};

print();

그런데 만약에 다음과 같이 print에 null값이 파라미터로 전달되면 어떨까?

function print(person) {
  if (person === undefined) {
    console.log('person이 없네요');
    return;
  }
  console.log(person.name);
}

const person = null;
print(person);

그러면 또 오류가 발생하게 된다.

TypeError: Cannot read property 'name' of null

그러면 또 print함수에 조건을 추가해줘야 한다.

function print(person) {
  if (person === undefined || person === null) {
    console.log('person이 없네요');
    return;
  }
  console.log(person.name);
}

const person = null;
print(person);

이와 같이 person이 undefined이거나, null인 상황을 대비하려면 위와같이 코드를 작성해야하는데 여기서 위 코드는 다음과 같이 축약해서 작성할수 있다.

function print(person) {
  if (!person) {
    console.log('person이 없네요');
    return;
  }
  console.log(person.name);
}

const person = null;
print(person);

이게 작동한 이유는 undefined와 null은 Falsy한 값이다. Falsy 한 값 앞에 느낌표를 붙여주면 true로 전환된다.

다음 코드를 입력해보자.

console.log(!undefined);
console.log(!null);

Falsy 한 값은 이 외에도 몇개 더 있다.

console.log(!undefined);
console.log(!null);
console.log(!0);
console.log(!'');
console.log(!NaN);

이 값은 모두 true 가 된다.

여기서NaN이란 값은 생소한데, 이값은 Not A Number라는 의미이다. 보통 NaN은 문자열을 숫자로 변환 하는 자바스크립트 기본 함수 parseInt 라는 함수를 사용하게 될떄 볼수 있다.

const num = parseInt('15', 10); // 10진수 15를 숫자로 변환하겠다는 의미
console.log(num); // 10
const notnum = parseInt('야호~', 10);
console.log(notnum); // NaN

다시 본론으로 돌아와서, Falsy한 값은 아까 나열한 다섯가지 이다.

그리고 그 외의 값은 모두! Truthy한 값이다.

다음 코드를 작성해보자

console.log(!3);
console.log(!'hello');
console.log(!['array?']);
console.log(![]);
console.log(!{ value: 1 });

아까와 반대로 보두 false가 된다

Truthy 한값과 Falsy한 값은 if문에서도 사용 가능하다.

const value = { a: 1 };
if (value) {
  console.log('value 가 Truthy 하네요.');
}

value가 Truthy한 값이기 때문에, 콘솔에 메세지가 출력될 것이다. 반면 value가 null, undefined, 0, '',NaN중 하나라면 나타나지 않을 것이다.

그래서 이렇게 Truthy 한 값과 Falsy한 값을 잘 알아 놓으면 조건문을 작성할때 편할 것이다.

추가적으로 알아두면 좋은 팁!

 

만약에 특정 값이 Truthy한 값이라면 true 그렇지 않다면 false로 값을 표현하는 것울 구현해 보겠다.

const value = { a: 1 };

const truthy = value ? true : false;

 

우리가 이전에 배운 삼항연산자를 사용하면 쉽게 value 값의 존재 유무에 따라 쉽게 true 및 false 로 전환이 가능하다. 그런데 더 쉽게 표현할수도 있다.

const value = { a: 1 };
const truthy = !!value;

!value 는 false 가 되고, 여기에 !false 는 true 가 되어서, 결과는 true 가 된다.