JavaScript 응용1 복습

Udemy - 한입크기로 잘라 먹는 리액트

💬 함수,객체,배열 응용하여 다루기연습
💬 이 강의 나만 보기 아깝다(널리널리 알려지기를..) 입문자레벨 눈높이에 맞춰 이해하기 쉽게 설명해준다 강의력 👍 자바스크립트에 막막했는데 내가 💩멍청이는 아니구나를 알게해준 강의….. 강사가 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()); // 굶기

분량 나눠서.