천진난만 코딩 스토리
2. JavaScript 응용 - Truthy & Falsy, 삼항연산자, 단락회로 평가 본문
인프런/한입 크기로 잘라 먹는 리액트
2. JavaScript 응용 - Truthy & Falsy, 삼항연산자, 단락회로 평가
Wisdom_1104 2023. 2. 5. 23:511 ) Truthy & Falsy
let a = "string";
let b = Infinity;
let c = "0";
let d = 13;
let e = [];
trueCheck(a);
trueCheck(b);
trueCheck(c);
trueCheck(d);
trueCheck(e);
//결과
TRUE
비어있지 않은 값과 0을 제외한 숫자는 True.
let a = undefined;
let b = "";
let c = 0;
let d = null;
let e = NaN;
trueCheck(a);
trueCheck(b);
trueCheck(c);
trueCheck(d);
trueCheck(e);
//결과
FALSE
비어있는 값이거나 0인 값은 Flase.
2 ) Falsy 연산자 응용
const getName = (person) => {
if (!person) {
return "객체가 아닙니다.";
}
return person.name;
};
let person;
const name = getName(person);
console.log(name);
//결과
객체가 아닙니다.
falsy 연산자인 ' ! '을 사용하여
false NOT=> True 라는 거을 활용함.
person가 undefined이기 때문에 "객체가 아닙니다."를 출력.
const getName = (person) => {
if (!person) {
return "객체가 아닙니다.";
}
return person.name;
};
let person = {name: "Olaf"};
const name = getName(person);
console.log(name);
//결과
Olaf
let person = {name: "Olaf"}; 를 하면
person이 undefined 나 unll이 아니기에 Olaf 를 출력.
3 ) 삼항 연산자
const a = 5;
let text = '';
if (a < 10) {
text = '크다';
} else {
text = '작다';
}
console.log(text);
// 출력
작다
if 조건문으로 작성하면 코드가 길어짐.
이 코드를 삼항 연산자를 사용하면 짧게 줄일 수 있음.
const a = 5;
let text = a < 10 ? '크다' : '작다';
console.log(text);
// 출력
작다
let text = a < 10 ? '크다' : '작다'; 는
text라는 변수인 a가 10보다 작으면 '크다'를 아니라면 '작다'를 말함.
조건 ? 참일 경우 : 거짓일 경우 ;의 순서대로 작성하면 됨.
4 ) 단락회로 평가
const getName = (person) => {
const name = person && person.name;
return name || "객체가 아닙니다.";
};
let person = { name: "Olaf" };
const name = getName(person);
console.log(name);
//결과
Olaf
&&는 and 연산자이므로 두 개 모두 참이어야 참이고,
||는 or 연산자이므로 둘 중 하나만 참이어도 참임.
그렇기에
const name = person && person.name; 에서
person의 값이 Olaf가 되고,
return name || "객체가 아닙니다."; 에서
name에 person.name인 Olaf가 저장되어 있기에 "참"임.
그렇기에 Olaf를 출력.
만약,
const name = person && person.name; 에서
person의 값이 unll이면,
name에 unll이 저장되는데 unll이면 false여서
뒤의 true인 "객체가 아닙니다." 가 return 됨.
'인프런 > 한입 크기로 잘라 먹는 리액트' 카테고리의 다른 글
2. JavaScript 응용 - 배열/객체의 비 구조화 할당, 변수 값의 변경 (0) | 2023.02.06 |
---|---|
2. JavaScript 응용 - 조건문 다듬기 (0) | 2023.02.06 |
1. JavaScript 기본 - 배열 내장 함수 (2) (0) | 2023.01.28 |
1. JavaScript 기본 - 배열 내장 함수 (1) (0) | 2023.01.28 |