[Javascript] Truthy와 Falsy

 

 

 

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

Truthy란 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() 함수에 파라미터가 주어지지 않았을 경우를 고려해 문제가 있다고 콘솔에 출력해야 한다면 다음과 같이 구현할 수 있다.

function print(person) {
  if (person === undefined) {
    console.log('person이 없네요...');
    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로 전환된다.

 

 

Falsy한 값은 이 외에도 몇 개 더 있다. 아래의 값들은 모두 느낌표를 붙여 true가 된다.

 

 

Falsy한 값은 지금 나열한 5가지이다. 그리고 그 외의 값은 모두 Truthy한 값이다. 아래와 같이 코드를 작성하면 이번에는 아까와는 다르게 모든 값이 false가 된다(!true이니 실행 결과는 false).

 

 

 

 

 

Truthy한 값과 Falsy한 값은 if문에서도 사용할 수 있다.

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

 

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

 

그래서 이렇게 Truthy한 값과 Falsy한 값을 잘 알아두면 조건문을 작성할 때 편리해 진다.

 

 

 

그리고 추가적으로 유용한 팁 하나.

만약 어떤 값이 Truthy한 값이라면 true, 그렇지 않다면 false로 값을 표현하는 것을 구현해 보겠다.

const value = { a: 1 };

const isTruthy = value ? true : false; // true

 

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

 

const value = { a: 1 };

const isTruthy = !!value // true

 

!value는 false가 되고 여기에 다시 !false는 true가 되어서 결과는 true가 되는 원리로, Boolean으로의 형변환을 하는 것과 동일한 결과를 얻을 수 있다.