> 웹 프론트엔드 > JS 튜토리얼 > JavaScript 코드 향상: Switch 문 대신 개체 사용

JavaScript 코드 향상: Switch 문 대신 개체 사용

Mary-Kate Olsen
풀어 주다: 2025-01-14 16:29:44
원래의
639명이 탐색했습니다.

Enhancing JavaScript Code: Using Objects Instead of Switch Statements

소개

작성하기엔 짧고 다소 특이한 주제인데, 작업하면서 웹에서 많이 접한 적이 없어서 여기에 글을 남깁니다. 나는 이 방법을 정기적으로 사용하기 때문에 이 방법에 대한 사람들의 의견을 듣고 싶습니다. 나는 스위치 문 안에 여러 사례를 작성하는 것을 좋아하지 않기 때문에 객체를 사용하는 것이 더 깔끔한 대안이라는 것을 알았습니다. 더 빠르지는 않을지 모르지만 코드가 더 깔끔해 보입니다.

데모

결제 상태가 다른 주문을 처리하고 결제 여부에 따라 처리 방식을 다르게 적용하고 싶습니다.

이것부터 시작해 보세요.

const orders = [{
  "id": 1,
  "product": "shoes",
  "paymentStatus": "Paid"
},{
  "id": 2,
  "product": "pants",
  "paymentStatus": "Pending"
},{
  "id": 3,
  "product": "tie",
  "paymentStatus": "UnPaid"
}];


const handlePaymentStatus =(order) =>{
  return order.paymentStatus
}

for (const order of orders) {
 handlePaymentStatus(order)
}
로그인 후 복사

order.paidStatus를 기반으로 특정 처리를 적용하려고 합니다. 간단한 해결책은 다음과 같은 스위치 문을 사용하는 것입니다.

let orders = [{
  "id": 1,
  "product": "shoes",
  "paymentStatus": "Paid"
},{
  "id": 2,
  "product": "pants",
  "paymentStatus": "Pending"
},{
  "id": 3,
  "product": "tie",
  "paymentStatus": "Unpaid"
}];


const handlePaymentStatus =(order) =>{
switch (order.paymentStatus) {
  case 'Paid':
    console.log("it's all good");
    break;
  case 'Unpaid':
    console.log("need to be paid");
    break;
  default:
    console.log(`We'll wait`);
}
}

for (const order of orders) {
 handlePaymentStatus(order)
}
로그인 후 복사

두 가지 옵션과 기본값이 있으므로 간단한 경우이지만 여러 결제 방법이 있다고 상상해 보세요. 명확성을 위해 다음과 같이 유지하겠습니다.

let orders = [{
  "id": 1,
  "product": "shoes",
  "paymentStatus": "Paid"
},{
  "id": 3,
  "product": "tie",
  "paymentStatus": "Unpaid"
},{
  "id": 2,
  "product": "pants",
  "paymentStatus": "Pending"
},];

const paymentStatusHandlers = {
  'Paid': () =>  console.log("it's all good"),
  'Unpaid': () => console.log("needs to be paid"),
}

for (const order of orders) {
 paymentStatusHandlers[order.paymentStatus] 
    ? paymentStatusHandlers[order.paymentStatus]()
    : console.log("We'll wait")
}
로그인 후 복사

결론

switch 문 대신 개체를 사용하면 특히 여러 사례를 처리할 때 코드를 더 읽기 쉽고 유지 관리하기 쉽게 만들 수 있습니다. 개인 취향의 문제이지만 대안으로 고려해 볼 만합니다.

그 밖에 구체적으로 변경하거나 추가하고 싶은 사항이 있으면 알려 주시기 바랍니다.

위 내용은 JavaScript 코드 향상: Switch 문 대신 개체 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿