React 게시글은 대부분 인프런의 '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지' 강의를 기반으로 내용을 정리했습니다.
조건문 업그레이드
기존에 사용하던 조건문을 배열 내장 함수를 이용해 조금 더 간략하고 멋지게 써보자.
일단 기존에 사용하던 방식대로 조건문을 작성해보자.
// 주어진 음식이 한식인지 아닌지 판별
function isKoreanFood(food)
{
if(food === '불고기' || food === '비빔밥' || food === '떡볶이') {
return true;
}
return false;
};
const food1 = isKoreanFood("불고기");
console.log(food1); // true
const food2 = isKoreanFood("파스타");
console.log(food2); // false위의 코드는 입력받은 음식이 한식인지 아닌지를 판별하는 아주 간단한 프로그램이다. 기존 사용하던 방식대로 if문의 조건 안에는 비교 연산자를 사용해서 비교하는데, 만약 한식으로 정한 음식이 3개가 아니라 10개라면? 100개라면? if문의 길이는 끝도 없이 늘어날 것이고 if와 비슷한 switch문 역시 제 역할을 하지 못한다.
이러한 조건은 배열의 내장 함수를 이용하면 보다 간단하게 줄여서 표현할 수 있다.
function isKoreanFood(food) {
if(["불고기", "떡볶이", "비빔밥"].includes(food)) {
return true;
}
return false;
};
const food1 = isKoreanFood("떡볶이");
const food2 = isKoreanFood("파스타");
console.log(food1); // true
console.log(food2); // false여기에서는 includes() 메서드를 사용했다. includes() 메서드는 매개변수 값이 배열에 존재하는지 검색하여 Boolean 타입으로 결과를 return 해주는 메서드이다. 떡볶이가 매개변수로 주어졌을 경우엔 includes() 메서드에서 true 값을 반환해 결국 return true를 반환하게 된다.
이번에는 위의 코드와는 좀 다르게 입력한 값에 따라 결과가 다 다르게 나오는 프로그램을 작성해보자.
// 한식? 일식? 중식? 양식?
// 각 대표 음식 return
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("")); // 굶기이 코드의 경우도 겨우 4개 나라의 음식만 판별할 수 있다(굶기 제외). 만약 추가되면 될수록 당연히 코드의 길이도 길어지고 가독성도 떨어지게 된다. 이 문제점들을 해결하기 위해 객체 프로퍼티에 접근하는 괄호 표기법을 이용해서 해결해보자.
const meal = {
한식 : "불고기",
중식 : "멘보샤",
일식 : "초밥",
양식 : "스테이크",
인도식 : "카레"
};
const getMeal = (mealType) => {
return meal[mealType] || "굶기";
};
console.log(getMeal("한식")); //불고기
console.log(getMeal("")); //굶기meal이란 객체를 하나 생성해 각 조건(key)과 값을 저장한다. 그리고 getMeal() 메서드를 생성해 return 값으로 meal[mealType] || "굶기"를 준다. 만약 입력받은 값이 meal 객체 안에 key로 존재한다면 값을 돌려주고 아니면 undefined를 리턴한다. 값이 있을 경우엔 바로 전에 포스팅한 단락 회로 평가에 의해 meal[mealType]이 반환되고, 아니면 굶기가 반환된다.
