이 글은 벨로퍼트와 함께하는 모던 자바스크립트에서 많은 도움을 받아 작성했습니다.

Truthy? Falsy?

간단하게 Truthy는 True, Falsy는 False로 생각할 수 있습니다.

아래 예제를 통해서 이 포스팅에서 다루고자 하는 내용을 확인하겠습니다.

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

const person = {
  name: 'John'
};

위에서 person과 person을 매개변수로 받는 print함수를 만들었습니다.
그런데 아래와 같이 파라미터가 비어진 채로 print함수를 실행한다면 어떤 결과가 나올까요?

print();

다음과 같은 에러가 출력됩니다.

TypeError: Cannot read property 'name' of undefined

이 에러에 대해 처리하기 위해 우리는 아래와 같이 print()를 수정할 수 있습니다. 가독성을 위해 person도 함께 작성하겠습니다.

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

const person = {
  name: 'John'
};

if(person === undefined) 조건문을 추가해서 위의 TypeError가 발생하지 않도록 수정했습니다.

이번에는 아래와 같이 print함수의 파라미터로 null을 전달하면 어떤 결과가 나올까요?

const person = null;
print(person);

첫번째경우와 마찬가지로 TypeError가 출력됩니다.

TypeError: Cannot read property 'name' of null

이번 에러도 처리하기 위해서는 다음과 같이 조건문이 추가되어야 합니다.

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

const person = null;
print(person);

조건문이 if (person === undefined || person === null)로 변경되어서 에러가 발생하지 않는 것을 확인할 수 있습니다.

이제야 본론~

Truthy와 Falsy의 개념을 알면 위의 예제에 대해 간단하게 처리할 수 있습니다.

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

const person = null;
print(person);

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

위를 확인하기 위해 간단하게 콘솔에서 테스트를 하겠습니다.

정리!

!Falsy한 값은 총 5가지입니다.

• !undefined
• !null
• !0
• !''
• !NaN

위 5가지를 제외하고는 모두 Truthy입니다. 아래 예제를 테스트해서 확인할 수 있습니다.

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

플러스+

정리된 Truthy와 Falsy개념을 활용해서 아래와 같이 삼항연사자, !으로 간단하게 표현할 수 있습니다.

const value = { a: 1 }; //Truthy
const truthy = value ? true : false; //true
const truthy2 = !!value; //true