한입 크기로 잘라 먹는 리액트(React.js) 강의 내용을 정리하며 JavaScript의 응용에 대해 알아보자.
📒 Truthy와 Falsy
✏️ 개념
let a = "string";
if (a) {
console.log("true");
} else {
console.log("false");
}
// 결과 : true 👉🏻 boolean이 아닌 값을 변수에 넣어도 true나 false의 결과가 출력된다.
✏️ 해당 되는 값의 종류
🏷️ true가 출력되는 값
: {}, 43, "0", "false", "infinity" 등
👉🏻 참 같은 값으로 truthy라고 불림
🏷️ false가 출력되는 값
: null, undefined, 0, -0, Nan, ""(빈 문자열)
👉🏻 코딩할 때 활용하기 좋은 거짓 같은 값으로 falsy라고 불림
✏️ 활용 예제
🏷️ person이 undefined인지 아닌지 확인 하는 조건문 예제
// 1번 코드
const getName = (person) => {
if (person === undefined || person === null){
return "객체가 아닙니다"
}
return person.name;
};
let person = null;
const name = getName(person);
console.log(name);// 2번 코드
const getName = (person) => {
if (!person) {
return "객체가 아닙니다"
}
return person.name;
};
let person = null;
const name = getName(person);
console.log(name);👉🏻 1번 코드와 동일하다.
👉🏻 매번 모든 값을 작성할 수 없어서 !person을 사용하여 효율적으로 작성 가능하다.
📒 삼항 연산자
✏️ 개념 및 예제
let a = 3;
a >= 0 ? console.log("양수") : console.log("음수");
let a = [];
a.length === 0 ? console.log("빈 배열") : console.log("빈 배열이 아님");
👉🏻 배열 값 길이를 체크하는 함수를 적용하여 사용 가능하다.
✏️ 중첩 삼항 연산자
let score = 40;
score >= 90
? console.log("A+")
: score >= 50
? console.log("B+")
: console.log("F");
👉🏻 삼항 연산자 확장이다.
👉🏻 코드의 가독성이 떨어져 if문 사용을 권장한다.
📒 단락 회로 평가
✏️ 개념
🏷️ 연산자 순서를 이용하여 효율적으로 코드를 작성하는 방법이다.
console.log(true || false);
👉🏻 연산자를 중심으로 앞의 값으로 결정이 되면 뒤의 값은 보지 않고도 평가 되는 것을 말한다.
👉🏻 '||'은 하나라도 true면 무조건 true이기 때문에 뒤 값이 false, true 둘 다 관계없다.
✏️ 함수를 포함한 프로그램 적용
const getName = (person) => {
return person && person.name;
};
let person;
const name = getName(person);
console.log(name);
👉🏻 undefined 출력될 경우를 확인하기 위해 아래 코드와 같이 수정 가능하다.
const getName = (person) => {
const name = person && person.name; // null
return name || "객체가 아닙니다.";
};
let person;
const name = getName(person);
console.log(name);
📒 조건문 업그레이드
✏️ 한식 확인 함수
function isKoreanFood(food) {
if(food === "불고기" || food === "비빔밥" || food == "떡볶이") {
return true;
}
return false;
}
const food1 = isKoreanFood("불고기");
const food2 = isKoreanFood("파스타");
console.log(food1);
console.log(food2);
// 출력 : true
false👉🏻 음식명은 모두 문자열이라서 아래 코드로 업그레이드 가능하다.
function isKoreanFood(food) {
if(["불고기", "떡볶이", "비빔밥"].includes(food)) {
return true;
}
return false;
}
const food1 = isKoreanFood("불고기");
const food2 = isKoreanFood("파스타");
console.log(food1);
console.log(food2);
// 출력 : true
false✏️ 다른 값을 반환하는 함수
const getMeal = (mealType) => {
if (mealType === "한식") return "불고기";
if (mealType === "양식") return "파스타";
if (mealType === "중식") return "자장면";
if (mealType === "일식") return "초밥";
return "굶어라 그냥"
};
console.log(getMeal("한식"));
console.log(getMeal("일식"));
console.log(getMeal());
// 출력 : 불고기
초밥
굶기👉🏻 식사 유형이 굉장히 많아지면 작성하기 번거로워서 property에 접근하는 함수로 수정 가능하다.
const meal = {
한식 : "불고기",
중식 : "탕수육",
일식 : "초밥",
양식 : "파스타",
인도식 : "카레"
};
const getMeal = (mealType) => {
return meal[mealType] || "굶기";
};
console.log(getMeal("한식"));
console.log(getMeal());
// 출력 : 불고기
굶기👉🏻 key를 이용하여 value를 가져와서 효율적으로 작성 가능하다.
0개의 댓글
