👉 Truthy and 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 함수에서 만약에 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);
👉🏻undefined 이거나, null 인 상황을 축약하는 방법
이렇게 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); //true
console.log(!null); //true
👉 Falsy값 종류들
Falsy 한 값 5개 있습니다.
console.log(!null); //true
console.log(!0); //true
console.log(!''); //true
console.log(!NaN); //true
이 값은 모두 true 가 됩니다.
Falsy 한 값은 위 나열한 다섯가지 입니다.!
그리고, 그 외의 모든 값은 Truthy 한 값입니다.
👉 Truthy값 종류들
console.log(!3); //false
console.log(!'hello'); //false
console.log(!['array']); //false
console.log(![]); //false
console.log(!{ }); //false
이번에는 아까와는 반대로 모든 값이 false 가 됩니다.
추가적으로, 알아두면 유용한 팁 하나를 드리겠습니다.
만약에, 특정 값이 Truthy 한 값이라면 true, 그렇지 않다면 false 로 값을 표현하는 것을 구현해보겠습니다.
const value = { a: 1 };
const truthy = value ? true : false;
이전에 배운 삼항연산자를 사용하면 쉽게 value 값의 존재에 따라 쉽게 true 및 false 로 전환이 가능합니다.
그런데, 이를 더 쉽게 할 수도 있습니다.
const value = { a: 1 };
const truthy = !!value;
console.log(truthy) //true
!value 는 false 가 되고, 여기에 !false 는 true 가 되어서, 결과는 true 가 됩니다.
