자바스크립트의 Switch 문 – 어떻게 리팩토링합니까?

Switch 문은 완벽하게 훌륭하고 C, C++, and Java 와 같은 다른 전통적인 언어에서 주로 사용됩니다.

왜 Switch 문인가?

switch 문은 다른 조건에 따라 다른 작업을 실행합니다. 물론 위의 문제를 if-else 래더로 해결할 수 있지만 프로그램이 너무 서투르게 됩니다. 또한 if-else 래더는 확인할 최대값이 3 conditions인 경우에만 권장됩니다.
Javascript 스위치 문이 있지만 python 관심이 있다면 부가 정보로 python doesn’t have the switch statement but it achieves the same with the dictionary mapping .
dictionary mapping는 파이썬에서 영감을 받아 자바스크립트에서 객체 생성과 유사하기 때문에 switch 문을 여러 객체로 대체할 수 있는데 이는 나쁜 생각이 아닙니다. 이렇게 하면 코드simple and maintainable가 장기적으로 유지됩니다.

코딩 경력에서 직면했을 가장 많이 발생하는 예를 살펴 보겠습니다.

실시예 1

일요일과 같은 문자열로 오늘 요일을 반환하는 코드를 작성하십시오.

switch 문을 사용하여

let day = new Date().getDay(); 
switch (day) {
  case 0:
    day = "Sunday";
    break;
  case 1:
    day = "Monday";
    break;
  case 2:
     day = "Tuesday";
    break;
  case 3:
    day = "Wednesday";
    break;
  case 4:
    day = "Thursday";
    break;
  case 5:
    day = "Friday";
    break;
  case 6:
    day = "Saturday";
}
console.log(day); // for 30/01/2022 it will return Sunday

console.log에서 출력 확인

스위치 없이, 즉 리팩토링된 코드

const day = new Date().getDay();
const dayMapper = {
    0: "Sunday",
    1: "Monday",
    2: "Tuesday",
    3: "Wednesday",
    4: "Thursday",
    5: "Friday",
    6: "Saturday"
};
if (dayMapper.hasOwnProperty(day)) {
  console.log(dayMapper[day]); // Sunday
} else {
  console.log("Something went wrong");
}

console.log에서 출력 확인

이것은 가장 기본적인 예입니다. 하나 더 일반적이지만 복잡한 예를 보겠습니다.

UseCase: 페이지에 대해 GA event를 보내야 한다고 가정합니다. 예를 들어 홈 페이지의 경우 이벤트 레이블을 페이지 이름 + 현재 레이아웃 이름으로 보낼 것입니다.

catch는 페이지 이름이 DOM의 데이터 속성에서 오는 것입니다.

예를 들어 더 설명하겠습니다 -

데이터 속성에서 찾은 페이지 이름에 대해 다음( Page name_Layout name )을 반환해야 합니다.

homePage -> Home_index
productPage -> Product_pdp
blogPage -> Blog_blog

실시예 2

data 속성에 저장된 페이지 이름이 있는 HTML가 다음과 같이 작성되었다고 가정합니다.

HTML for homepage:
<div id="my-div" data-page-name="homepage"></div>

switch 문을 사용하여

let pageName = document.querySelector('#my-div').dataset.pageName;
let page;
let layout;
let ans;
switch (pageName) {
  case "homepage":
    page = "Home";
    layout = "index";
    break;
  case "productpage":
    page = "Product";
    layout = "pdp";
    break;
  case "blogpage":
    page = "Blog";
    layout = "blog";
    break;
}
ans = page + '_' + layout;
console.log(ans);

console.log에서 출력 확인

스위치 없이, 즉 리팩토링된 코드

let pageName = document.querySelector('#my-div').dataset.pageName;
let dataPageMapper = {
  homepage: 'Home',
  productpage: 'Product',
  blogpage: 'Blog' 
};
let pageLayoutMapper = {
  home: 'index',
  product: 'pdp',
  blog: 'blog' 
};
let page = dataPageMapper.hasOwnProperty(pageName) && dataPageMapper[pageName];
let layout = pageLayoutMapper[page.toLowerCase()];
let ans = page + '_' + layout;
console.log(ans);

console.log에서 출력 확인

결론

위의 방법은 더 깨끗한 방법입니다. 앞으로 더 많은 페이지를 사용할 수 있게 된다면 매퍼 개체에 항목을 만들기만 하면 됩니다.

그러나 switch statement 를 사용하면 명령문이 긴 사다리가 될 것이며 break 명령문을 추가하는 것을 잊으면 유명한 스위치 함정에 빠지게 됩니다.

코드에서 스위치를 처리하는 방법과 같은 생각을 알려주십시오.

내 기사가 마음에 들면 할 수 있습니다 buy me a coffee

내 웹 사이트에서 내 다른 기사도 확인하십시오 https://weekendtutorial.com

편집하다

Example 1에서 -

배열도 객체이기 때문에 코드를 더 최적화할 수 있습니다.

const dayNum = new Date().getDay();
const days = [
    "Sunday",
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday"
];
console.log(days[dayNum]); // Sunday

Example 2에서 -

우리는 다음과 같은 클럽 개체를 가질 수 있습니다.

let pageName = document.querySelector('#my-div').dataset.pageName;
let dataPageMapper = {
  homepage: {
     page: 'Home',
     layout: 'index'
  },
  productpage: {
     page: 'Product',
     layout: 'pdp'
  },
  blogpage: {
     page: 'Blog',
     layout: 'blog'
  } 
};

let pageObj = dataPageMapper.hasOwnProperty(pageName) && dataPageMapper[pageName];

let ans = pageObj.page + '_' + pageObject.layout;
console.log(ans);

위도 괜찮지만, 물체를 곤두박질 치는 것이 가장 실현 가능하지 않은 경우의 가능성을 고려하여 실제 예를 취했습니다.

물론, 객체가 다른 파일이나 장소에서 온 경우, 우리는 그것들을 클럽으로 묶어서 다른 객체를 생성할 수 있지만 그것은 또 다른 문제, 즉 다른 문제를 야기할 것입니다. code duplicacy 피해야 합니다.