JavaScript 응용1 복습
Udemy - 한입크기로 잘라 먹는 리액트
Falsy Truthy 단락회로평가 삼항연산자 조건문업그레이드
💬 함수,객체,배열 응용하여 다루기연습
💬 이 강의 나만 보기 아깝다(널리널리 알려지기를..) 입문자레벨 눈높이에 맞춰 이해하기 쉽게 설명해준다 강의력 👍 자바스크립트에 막막했는데 내가 💩멍청이는 아니구나를 알게해준 강의….. 강사가 OKKY에서 한 리액트 세미나도 어제 추가로 들어봤는데 나중에 리액트 포스팅때도 올릴 생각
JavaScript 응용1
📌 Truthy & Falsy
✔️ 핵심 Point
Truthy참 같은 값Falsy거짓 같은 값
// 📝 자료형
let a = ""; // 빈 문자열
if (a) {
console.log("TRUE");
} else {
console.log("FALSE");
}
// FALSE (거짓으로 인식)// 📝 문자형
let a = "string";
if (a) {
console.log("TRUE");
} else {
console.log("FALSE");
}
// TRUE (참으로 인식)// 자바스크립트의 조건식은 Boolean 값을 넣지 않아도 참이나 거짓으로 인식되는 속성이 있음
let a = []; // TRUE
let a = undefined; // FALSE📝 참이 아니어도 TRUE로 인식하는 값
// true, {} (객체 리터럴), [] (배열 리터럴), 42, "false"(문자열), Infinity
// 참 같은 값 = Truthy📝 거짓이 아니어도 FALSE로 인식하는 값
// null, undefined, 아무것도 할당하지 않은 경우(let a;), 0, -0, NaN, ""(빈 문자열)
// 거짓 같은 값 = Falsy
// 활용
// 객체를 매개변수를 받아서 받은 객체에서 특정한 프로퍼티를 반환하는 함수 포함
const getName = (person) => {
return person.name;
};
let person = { name: "이정환" };
const name = getName(person);
console.log(name); // 이정환// 📝 조건문을 통해서 전달받은 파라미터가 객체인지 또는 undefined거나 null은 아닌지 판단
// undefined일 때
const getName = (person) => {
if (person === undefined) { // 예외처리
return "객체가 아닙니다";
}
return person.name; // 프로퍼티 접근에 도달 -> 하지 못함
};
let person;
const name = getName(person);
console.log(name); // 객체가 아닙니다.
// null일 때
const getName = (person) => {
if (person === undefined || person === null) { // 둘다 예외처리
return "객체가 아닙니다";
}
return person.name; // 프로퍼티 접근에 도달 -> 하지 못함
};
let person = null;
const name = getName(person);
console.log(name); // 객체가 아닙니다.
// 그런데 모든 프로젝트에서 예외처리를 걸어줄 수 없을 수 있음
// 이럴 때 Falsy 속성을 사용
const getName = (person) => {
if (!person) { // false NOT => True (논리연산자 활용)
return "객체가 아닙니다";
}
return person.name;
};
let person = null;
// let person;
const name = getName(person);
console.log(name); // 객체가 아닙니다.📌 삼항연산자
✔️ 핵심 Point
- 조건문 한 줄로 끝내기 (파격적으로 줄여준다)
// 주어진 숫자가 양수인지 음수인지 간단한 조건식을 if문을 통해 작성
let a = 3;
if(a >= 0) {
console.log("양수");
} else {
console.log("음수");
}
// 양수
// 간단한 조건이지만 코드가 5줄로 길어짐
// 이것을 삼항연산자를 활용하면 1줄로 아주 짧게 표현 가능📝 삼항 연산자
조건식 ? 참일 때 수행할 식 : 거짓일 때 수행할 식;
let a = 3;
a >= 0 ? console.log("양수") : console.log("음수"); // 양수
// 주어진 배열이 비어있는지 확인 후 배열 상태 출력 (length)
let a = [];
if (a.length === 0) {
console.log("빈 배열");
} else {
console.log("안 빈 배열");
}
// 빈 배열
// 📝 삼항연산자로 바꿔주기
a.length === 0 ? console.log("빈 배열") : console.log("안 빈 배열");
// 빈 배열// 값을 참일 때와 거짓일 때를 구분하여 반환해보기
let a = [1, 23];
const arrayStatus = a.length === 0 ? "빈 배열" : "안 빈 배열"; // 삼항연산자를 상수에 대입연산자로 할당하여 반환
console.log(arrayStatus); // 안 빈 배열
📝 삼항 연산자 좀 더 스마트하게 쓰기
// Truthy와 Falsy 이용
// 주어진 값이 undefined이거나 null인지 판단
let a; (undefined)
const result = a ? true : false;
console.log(result); // false
let [];
console.log(result); // true
📝 삼항 연산자 중첩해서 쓰기
// TODO : 학점 계산 프로그램
// 90점 이상 A + , 50점 이상 B+, 둘다 아니면 F
let score = 100;
score >= 90
? console.log("A+")
: score >= 50 // 중첩 (그것도 아니면)
? console.log("B+");
: console.log("F");
// A+
let score = 60;
// B+
let score = 40;
// F
// 📝 단, 삼항 연산자를 중첩으로 쓰게 되면 코드의 가독성이 떨어지므로
// 가급적이면 if 조건문으로 작성하는 것을 권장
let score = 100;
if (score >= 90) {
console.log("A+");
} else if (score >= 50) {
console.log("B+");
} else {
console.log("F");
}
📌 단락회로 평가
✔️ 핵심 Point
- 단락 회로 평가는 논리연산자의 특성을 활용한 문법
// 📝 논리 연산자 복습
// 피연산자1 (AND, OR, NOT) 피연산자2
console.log(true && true); // (AND) true
console.log(true || false); // (OR) true
console.log(!true); // (NOT) false
// 📝 앞에 값이 맞으면 뒤에는 연산할 필요 없이 빨리 평가하는 것을 단락회로평가라고 함
console.log(false && true); // false
console.log(true || false); // true// 📝 truthy와 falsy를 활용하면 단락회로평가를 더 잘 활용 가능
// 주어진 객체에서 name이라는 프로퍼티를 받는 getName 함수 활용
const getName = (person) => {
if(!person) {
return "객체가 아닙니다";
}
return person.name; // person이 아닌게 아닐 경우에 person의 name 값 반환
}
let person;
const name = getName(person);
console.log(name); // 객체가 아닙니다
// 단락회로평가를 활용해 더 단축하여 코드 작성
const getName = (person) => {
return person && person.name; // undefined && undefined
}
let person;
// let person = null;
const name = getName(person);
console.log(name) // undefined
// console.log(name); // null
// Truthy한 값을 전달해 반환
const getName = (person) => {
return person && person.name; // 이정환이라는 값이 저장됨
return name || "객체가 아닙니다"; // 빈문자열이 아니라서 truthy (단락회로평가)
}
let person = { person:"이정환" };
const name = getName(person);
console.log(name); // 이정환
// Falsy한 값을 전달해 반환
const getName = (person) => {
return person && person.name; // 앞 person 피연산자가 falsy
return name || "객체가 아닙니다";
}
let person = null;
const name = getName(person);
console.log(name) // 객체가 아닙니다📌 조건문 업그레이드
📝 예제 1
- 주어진 문자열이 한식 종류에 해당하는지를 검사
- 여러가지 케이스 중 하나인 걸 비교할 때
function isKoreanFood(food) {
if(food === "불고기" || food === "비빔밥" || food === "떡볶이") {
return true;
}
return false;
}
const food1 = isKoreanFood("불고기");
const food2 = isKoreanFood("파스타");
console.log(food1); // true
console.log(food2); // false
// 그러나 존재하는 모든 한식들을 검사한다면 조건식이 굉장히 길어지게 됨
// 💡 바꿔서 생각해보기
// 여러가지 한식 종류는 대부분 다 문자열임.
// 이런 문자열로 이루어진 한식들 중에 입력받은 파라미터가 존재 여부로 검사한다면?
function isKoreanFood(food) {
if(["불고기", "떡볶이", "비빔밥"].includes(food)){ // 배열 메서드 활용
return true;
}
return false;
}
const food1 = isKoreanFood("불고기");
const food2 = isKoreanFood("파스타");
console.log(food1); // true
console.log(food2); // false
📝 예제 2
- 주어진 값에 따라서 다른 결과를 반환할 때
// 📝 한식인지, 양식인지, 중식인지, 일식인지를 받고 그에 대한 각각의 대표메뉴를 리턴해주기
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()); // 굵기
// 그런데 식사 유형이 존재하는 모든 국가를 포함해야한다면? 파키스탄식, 인도식, 등등 여러가지
// 💡 바꿔서 생각해보기
// 객체의 프로퍼티에 접근하는 괄호표기법을 이용하여 해결할 수 있음
// 음식의 유형과 대표메뉴를 갖는 객체
// 굉장히 많은 유형의 무언가를 리턴해야할 때 괄호표기법을 통해 효율적으로 해결 가능 (조건문을 복잡하게 쓰지 않고)
const meal = {
한식 : "불고기",
중식 : "멘보샤",
일식 : "초밥",
양식 : "스테이크",
인도식 : "카레"
};
const getMeal = (mealType) => {
return meal[mealType] || "굶기"; // meal이라는 객체에서 특정 key를 갖는 value 가져옴
};
console.log(getMeal("인도식")); // 카레
console.log(getMeal()); // 굶기
분량 나눠서.
필요한 내용을 공부하고 저장합니다.