[React #8] Truthy / Falsy / 삼항연산자 / && / ||

 

01. Truthy

  • true가 아니어도 참으로 평가하는 값
  • ex) 빈 배열, 빈 중괄호(객체 리터럴), 숫자, Infinity
let a = []; if (a) { ​​console.log("TRUE"); } else { ​​console.log("FALSE"); } // TRUE

 

 

 

02. Falsy

  • false가 아니어도 거짓으로 평가되는 값
  • ex) null, undefined, 숫자 0, NaN, 빈 문자열("")
let a = ""; if (a) { ​​console.log("TRUE"); } else { ​​console.log("FALSE"); } // FALSE

 

 

💡활용 : 객체를 매개변수로 받아 받은 객체에서 특정한 프로퍼티를 반환하는 함수일 때 예외 처리

const getName = (person) => { ​​if (!person) { ​​​​// false NOT => true ​​​​return "객체가 아닙니다."; ​​} ​​return person.name; }; let person = null; const name = getName(person); console.log(name); // 객체가 아닙니다. J;
  • 조건문을 통해 전달받은 파라미터가 객체인지 아니면 undefined이나 null이 아닌지 판단
  • undefined나 null은 객체가 아니기 때문에 내부 프로퍼티에 접근할 수 없음

 

 

 

03. 삼항연산자

  • 기본 형식 :  조건식 ? 참일 때 실행할 값 : 거짓일 때 실행할 값;
let a = -3; a >= 3 ? console.log("양수") : console.log("음수"); // 음수

 

  • 값을 변수에 대입하여 사용
let a = [a]; const arrayStatus = ​​a.length > 0 ? "비어있지 않은 배열입니다." : "빈 배열입니다."; console.log(arrayStatus); // 비어있지 않은 배열입니다.

 

 

💡활용 : 삼항연산자 중첩

// 학점 계산 프로그램 // 90점 이상 A+, 50점 이상 B+, 나머지 F let score = 90; // 방법 1 : 중첩 삼항연산자 score >= 90 ​​? console.log("A+") ​​: // 90점 미만일 경우 실행할 값 ​​score >= 50 ​​? console.log("B+") ​​: console.log("F"); // 방법 2 : if문 if (score >= 90) { ​​console.log("A+"); } else if (score >= 50) { ​​console.log("B+"); } else { ​​console.log("F"); } // 방법 3 : switch문 switch (true) { ​​case score >= 90: ​​​​console.log("A+"); ​​​​break; ​​case score >= 50: ​​​​console.log("B+"); ​​​​break; ​​default: ​​​​console.log("F"); }
  • 삼항연산자의 중첩은 가독성이 많이 떨어지므로 if 중첩문을 이용하는 게 더 좋음
  • swtich문은 엄격한 동등 비교(===)를 사용하여 값을 비교

 

 

 

04. 단락 회로 평가

  • 왼쪽에서 오른쪽으로 연산하게 되는 논리연산자의 연산 순서를 이용하는 문법
  • 피연산자 중에 뒤에 위치한 피연산자를 확인할 필요 없이 그냥 연산을 끝내버리는 것을 의미함
console.log(false && true); // false console.log(true || false); // true
  • false && true : &&연산자는 둘 다 true일 경우 반환하므로 앞이 false가 오면 뒤에 오는 피연산자를 볼 필요가 없음
  • true || false : ||연산자는 둘 중 하나라고 true일 경우 반환하는데 앞에 있는 값이 true라면 뒤에 오는 피연산자를 보지 않고 바로 true를 반환함

 

 

💡 활용

const getName = (person) => { ​​const name = person && person.name; ​​return name || "Unknown"; }; let person; console.log(getName(person)); // Unknown let personA = { name: "peazh" }; console.log(getName(personA)); // peazh
  • person의 값이 undefined이나 null일 경우
    - &&연산자 : person이 falsy한 값이기 때문에 person.name에 아예 접근하지 않고 person을 name에 저장함
    - ||연산자 : name이 falsy하기 때문에 뒤에 있는 값인 "Unknown"이 리턴됨
  • person의 값이 있을 경우
    - &&연산자 : person은 truthy한 값이고 person.name도 truthy하기 때문에 person.name을 반환한 값 peazh를 name에 저장함
    - ||연산자 : name 값 자체가 truthy하기 때문에 뒤에 있는 값을 보지 않고 그대로 name을 반환함

 

 

 

05. 조건문 활용

 

 Q1. 주어진 문자열이 한식 종류에 해당하는지 검사하는 함수

function isKoreanFood(food) { ​​if (["불고기", "떡볶이", "비빔밥"].includes(food)) { ​​​​return true; ​​} else { ​​​​return false; ​​} } const food1 = isKoreanFood("불고기"); const food2 = isKoreanFood("파스타"); console.log(food1); // true console.log(food2); // false
  • 배열 안에 그 값을 가지고 있는지 확인하는 includes 사용

 

 Q2. 한식, 일식, 중식인지에 따라서 대표 메뉴를 리턴해주는 함수

const meal = { ​​한식: "불고기", ​​중식: "멘보샤", ​​일식: "초밥", ​​양식: "스테이크", ​​인도식: "카레", }; const getMeal = (mealType) => { ​​return meal[mealType] || "굶기"; }; console.log(getMeal("인도식")); // 카레 console.log(getMeal()); // 굶기
  • meal을 객체로 만들고 || 연산자를 이용해서 값이 있는 경우와 없는 경우를 분기 처리함

 

 

참고자료

이정환 Winterlood, '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지'

댓글