JavaScript 응용 #2 조건문, 비 구조화 할당, Spread 연산자

#4 조건문 업그레이드

< 예시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

 

< 해결: 내장함수 includes 이용 >

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] || "굶기";
};

console.log(getMeal("한식")); //불고기
console.log(getMeal("중식")); //멘보샤
console.log(getMeal()); //굶기

 

---

#5 비 구조화 할당

: 배열과 객체를 효율적으로 사용하는 방법

 

< 배열의 비 구조화 할당 >

: 순서대로 배열의 요소를 할당

let arr = ["one", "two", "three"];

//반복 구조 발생
let one = arr[0];
let two = arr[1];
let three = arr[2];

//배열의 기본 변수 비 구조화 할당
let [one, two, three] = arr;

//배열의 선언 분리 비 구조화 할당
let [one, two, three] = ["one", "two", "three"];

//기본값 할당
let [one, two, three, four = "four"] = ["one", "two", "three"];

 

< swap에서의 활용 >

let a = 10;
let b = 20;
let tmp = 0;

tmp = a;
a = b;
b = tmp;

//비 구조화 할당 이용
[a, b] = [b, a];

 

< 객체의 비 구조화 할당 >

: 키 값을 통해 접근

let object = {
  one: "one",
  two: "two",
  three: "three",
  name: "이정환"
};

//반복 구조 발생
let one = object.one;
let two = object.two;
let three = object.three;
let name = object.name;

//비 구조화 할당
let { name, one, two, three } = object;

//변수명 변화 가능
let { name: myName, one, two, three } = object;

//기본값 할당 가능
let { name: myName, one, two, three, four = "four" } = object;

 

---

#6 Spread 연산자

: 배열과 객체를 한 줄로 펼치는 방법

 

< 객체 >

//반복 구조 발생
const cookie = {
  base: "cookie",
  madeIn: "Korea"
};

const cookie1 = {
  base: "cookie",
  madeIn: "Korea",
  toping: "choco"
};

const cookie2 = {
  base: "cookie",
  madeIn: "Korea",
  toping: "blueberry"
};

const cookie3 = {
  base: "cookie",
  madeIn: "Korea",
  toping: "strawberry"
};

 

< 해결 >

const cookie = {
  base: "cookie",
  madeIn: "Korea"
};

const cookie1 = {
  ...cookie,
  toping: "choco"
};

const cookie2 = {
  ...cookie,
  toping: "blueberry"
};

const cookie3 = {
  ...cookie,
  toping: "strawberry"
};

console.log(cookie1); // { base: "cookie", madeIn: "Korea", toping: "choco" };

 

< 배열 >

const noTopingCookie = ["촉촉한 쿠키", "안촉촉한 쿠키"];
const TopingCookie = ["바나나 쿠키", "초코 쿠키"];

const allCookie = [...noTopingCookie, "딸기 쿠키", ...TopingCookie];
console.log(allCookie); //["촉촉한 쿠키", "안촉촉한 쿠키", "딸기 쿠키", "바나나 쿠키", "초코 쿠키"]

 

---

이정환님의 인프런 강의 "한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지"를 참고하여 작성하였습니다.