(JS) Truthy and Falsy & if

예제로 살펴보기

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

const person = {
  name: 'hodoo'
};

print(person);

//output TypeError: Cannot read property 'name' of undefined

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

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

const person = null;
print(person);

print에 null 값이 파라미터로 전달되면 다음과 같은 에러가 발생할 것이다.

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);

이렇게 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로 전환된다.
!person은 person이라는 변수가 없다면 으로 이해하면 된다.

Falsy한 값

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

위 값은 모두 true가 된다.

• undefined
• null
• 0
• '빈 문자열'
• NAN (Not A Number)

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;

이를 더 쉽게 표현할 수 있는데, 바로

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

로 표현해볼 수 있다. !value는 false가 되고, 여기에 !false는 true가 되어서, 결과는 true가 된다.