if-else 사용을 최적화하면 더 나은 선택 구조가 필요합니다!

수평으로 배치된 피라미드와 같은 if-else 중첩을 본 적이 있는지 모르겠습니다.

if (true) {
}

if (true) {
}

if (true) {
  if (true) {
    if (true) {
    }
  } else {
  }
} else {
}

코드에 if-else가 너무 많으면 코드의 가독성이 급격히 떨어지고 나중에 코드를 유지하기가 매우 어려워집니다. 다음으로 이를 제거하는 방법에 대해 설명하겠습니다.

조건 연산자

더 간단한 if-else 문의 경우 조건 연산자로 쉽게 다시 작성할 수 있습니다.

// Bad 😥
if (true) {
  console.log("Congratutions!")
} else {
  console.warn("Oops, something went wrong!")
}

// Great 🥰
true 
  ? console.log("Congratutions")
  : console.warn("Oops, something went wrong!")

물론 이 시점에서 둘 사이의 차이는 그리 크지 않습니다.

논리 AND 연산자

특정 조건이 충족될 때 함수를 실행하려는 경우 논리 AND 연산자를 사용할 수 있습니다.

if (true) {
  alert(1)
}

// is equals to:

true && alert(1)

사용 조건이 매우 엄격하여 함수만 실행할 수 있고 "return"을 포함한 명령문을 사용할 수 없습니다. 이것은 코드를 더 논리적으로 보이게 만들지는 않지만 특정 경우에 유용할 수 있습니다.

조기 반환

및 에 의해 언급됨.

복잡성에 따라 조건을 정렬하고 매번 반환합니다.

function handleRequest(req) {
  if (req.code >= 500) {
    return "Server error";
  }
  if (req.code >= 404) {
    return "Cilent error";
  }
  return "Suceess";
}

테이블 구동 방식

다음과 같은 코드의 경우 대부분의 경우 스위치를 대신 사용합니다. 그러나 이것은 최선의 해결책이 아니며 "break;"를 추가하는 것을 잊어버리면 코드가 예상 이상으로 실행될 수 있으며 스위치가 그다지 우아하지 않습니다.

// Bad 😥
const weekday = (num) => {
  if (num === 1) {
    return "Monday"
  } else if (num === 2) {
    return "Tuesday"
  } else if (num === 3) {
    return "Wednesday"
  } else if (num === 4) {
    return "Thursday"
  } else if (num === 5) {
    return "Friday"
  } else if (num === 6) {
    return "Saturday"
  } else if (num === 7) {
    return "Sunday"
  } else {
    return "Unknown"
  }
}

console.log(weekday(1)) // Monday

이것은 테이블 기반 방법을 사용할 때입니다.

// Great 🥰
const weekday = (option) => {
    let obj = {
        1: "Monday",
        2: "Tuesday",
        3: "Wednesday",
        4: "Thursday",
        5: "Friday",
        6: "Saturday",
        0: "Sunday"
    }
    return obj[option] ?? "Unknown"
}

console.log(weekday(1)) // Monday

또는 ES6의 맵을 사용할 수 있습니다.

// Great 🥰
const weekday = (num) => {
  const map = new Map()
    .set(1, "Monday")
    .set(2, "Tuesday")
    .set(3, "Wednesday")
    .set(4, "Thursday")
    .set(5, "Friday")
    .set(6, "Saturday")
    .set(7, "Sunday");
  return map.has(num) ? map.get(num) : "Unknown";
};

console.log(weekday(1));

배열 포함 방법

이전 섹션에서는 일대일 선택 구조를 최적화하는 방법에 대해 논의했으며 여기서는 일대다 선택 구조를 우아하게 구현하는 방법에 대해 논의합니다.

예를 들어 다음 스크립트는 다음과 같습니다.

const getContinent = (option) => {
  if (option === "China" || option === "Japan") {
    return "Asia";
  }
  if (option === "Germany" || option === "France") {
    return "Europe";
  }
};

console.log(getContinent("China"));

아직 모든 국가를 추가하지 않았기 때문에 지금은 그렇게 나쁘지 않습니다. 이것은 확실히 최적화 가능하며 Array의 include 메소드를 사용하여 쉽게 피할 수 있습니다.

const getContinent = (option) => {
  const Asia = ["China", "Japan"];
  const Europe = ["Germany", "Franch"];
  if (Asia.includes(option)) return "Asia";
  if (Europe.includes(option)) return "Europe";
  return "Unknown";
};

console.log(getContinent("China")); // Asia

이 최적화 후에는 더 많은 국가가 추가되더라도 코드가 복잡해지지 않습니다. 그러나 더 나아질 수 있습니다.

const getContinent = (option) => {
  let [result, setResult] = ["unknown", (str) => (result = str)];
  const Asia = ["China", "Japan"];
  const Europe = ["Germany", "Franch"];
  Asia.includes(option) && setResult("Asia");
  Europe.includes(option) && setResult("Europe");
  return result;
};

console.log(getContinent("China"));

결론

이 기사에서 우리는 코드에서 if-else를 줄이는 방법을 배웠습니다. 이 게시물이 도움이 되었다고 생각되시면 네트워크에 공유해 주시고 댓글이 있으면 어쨌든 삭제해주세요🙂.