반응형
자바스크립트에서 사용되는 Truthy, Falsy를 알아보고 어떤 상황에서 사용되는지 예제를 통해 확인해보자.
먼저, 예제를 따라 하기 전에 메서드 하나를 만든다.
소스 코드
function trueCheck(input) {
if (input) {
console.log("TRUE");
} else {
console.log("FALSE");
}
}
인풋에 무언가를 넣었을때, True인지 False인지 구분하기 위한 메서드다.
1. True로 판정되는 Truthy
소스 코드
let truthy1 = "string";
let truthy2 = Infinity;
let truthy3 = "0";
let truthy4 = 13;
let truthy5 = [];
trueCheck(truthy1);
trueCheck(truthy2);
trueCheck(truthy3);
trueCheck(truthy4);
trueCheck(truthy5);
결과
2. False로 판정되는 Falsy
소스 코드
let falsy1 = undefined;
let falsy2 = "";
let falsy3 = 0;
let falsy4 = null;
let falsy5 = NaN;
trueCheck(falsy1);
trueCheck(falsy2);
trueCheck(falsy3);
trueCheck(falsy4);
trueCheck(falsy5);
결과
3. 간단한 사용 예제
소스 코드
let person = { name: "shoney" };
let personUndefined;
const getName2 = (person) => {
if (!person) {
return "객체가 아닙니다.";
}
return person.name;
};
console.log(getName2(person));
console.log(getName2(personUndefined));
결과
shoney
객체가 아닙니다.
사용 방법은 간단하다. if 문에다가 person만 넣어주면, 객체가 존재할 때와 존재하지 않을 때 조건을 다르게 진행할 수 있다는 장점을 가진다. (truthy, falsy는 삼항 연산자에서 바로 물음표가 나오기 때문에 헷갈리지 않도록 하자)
4. 살짝 응용 예제 (단락회로 평가)
위에서 사용한 예제를 단락회로 평가를 사용해서 구현하면 아래와 같게 소스코드가 된다.
소스 코드
const getName = (person) => {
const name = person && person.name;
return name || "객체가 아닙니다.";
};
let person = { name: "shoney" };
const name = getName(person);
console.log(name);
let person2;
const name2 = getName(person2);
console.log(name2);
결과
shoney
객체가 아닙니다.
확실하게 3에서 한 소스코드보다 간략해진다.
반응형
'Front-End > 자바스크립트' 카테고리의 다른 글
[자바스크립트] 동기, 비동기 처리 방법 (0) | 2022.06.19 |
---|---|
[자바스크립트] ... 연산자(Spread 연산자) 사용 예제 (0) | 2022.06.19 |
[자바스크립트] 배열 내장함수 사용 방법 및 예제(foreach, map, includes, indexOf, findIndex, find, filter, slice, concat, sort, join) (0) | 2022.06.18 |
[자바스크립트] 객체 생성 및 사용 방법 예제 (0) | 2022.06.16 |
[자바스크립트] 콜백함수(CallBack) 예제를 통해 가장 쉽게 이해하기 (0) | 2022.06.14 |