저장소가 아닌 박물관에 속한 코드

"아름다운 코드를 기념하면 안되는 이유"

우리 모두 본 적이 있습니다. 코드는 구조가 너무 복잡하고 깨끗해서 저장소가 아닌 박물관에 속합니다. 디버깅이 필요하다는 사실을 깨닫기 전까지 잠시 경외심을 갖고 쳐다보는 그런 종류의 코드입니다. 그렇다면 우리와 마찬가지로 누군가가 마치 차세대 미국 소설을 집필하는 것처럼 JavaScript를 작성하기로 결정한 이유가 무엇인지 궁금할 것입니다.

정리하자면 아름다운 코드는 유용할 때만 아름답습니다. 팀에 박사 학위가 필요한 경우 기능이 어떻게 작동하는지 알아내기 위해 Esoteric Syntax를 사용했습니다. 축하합니다. 누구도 유지하지 못할 걸작을 만드셨습니다.

지나치게 영리한 코드를 만들고 싶은 충동을 억제해야 하는 이유와 그 대신 무엇을 해야 할지 알려드립니다. 버클을 채우세요. 예시가 나옵니다.

과도하게 설계된 우아함의 매력

먼저 개발자가 이런 코드를 작성하는 이유를 살펴보겠습니다.

• 기분이 좋아요. 영리한 코드를 작성하면 지적 가려움증이 사라집니다. 유연한 순간, "내가 무엇을 할 수 있는지 살펴보는" 순간입니다.
• (일부) 사람들에게 감동을 줍니다. 같은 사람들이 그것을 유지하는 임무를 맡을 때까지. 그러면 좌절스러울 뿐입니다.
• 숙달된 모습을 보여줍니다. 아니면 적어도 그래야 합니다. 그러나 진정한 숙달은 복잡성을 만드는 것이 아닙니다. 간단하게 문제를 해결하는 것입니다.

예시 1: “WTF” 팩토리 함수

최근에 우연히 발견한 보석은 다음과 같습니다.

const createMultiplier = (x) => (y) => (z) => x * y * z;
const multiply = createMultiplier(2)(3);
console.log(multiply(4)); // Outputs 24

예뻐요? 확신하는. 하지만 여기서 무슨 일이 일어나고 있는지 알아내야 하는 후배 개발자에게 행운을 빕니다. 세 개의 숫자를 곱하는 세 가지 기능 계층? 축하합니다. 산술을 올림픽 종목으로 승화시키셨습니다.

이러지 마세요. 다음은 인간을 위해 작성된 동일한 기능입니다.

function multiplyThreeNumbers(x, y, z) {
  return x * y * z;
}
console.log(multiplyThreeNumbers(2, 3, 4)); // Outputs 24

읽을 수 있습니다. 단순한. 모두의 정신을 건강하게 유지합니다.

예 2: 셰익스피어의 약속 사슬

이제 셰익스피어가 대필한 것처럼 보이는 약속 체인에 대해 이야기해 보겠습니다.

fetch(url)
  .then((response) => response.json())
  .then((data) =>
    data.map((item) =>
      item.isActive
        ? { ...item, status: "active" }
        : { ...item, status: "inactive" }
    )
  )
  .then((updatedData) =>
    updatedData.reduce(
      (acc, curr) =>
        curr.status === "active"
          ? { ...acc, active: [...acc.active, curr] }
          : { ...acc, inactive: [...acc.inactive, curr] },
      { active: [], inactive: [] }
    )
  )
  .then((finalResult) => console.log(finalResult))
  .catch((error) => console.error(error));

이 코드는 작동합니다. 하지만 이는 이를 유지해야 하는 사람에 대한 범죄이기도 합니다. 러시아 인형처럼 데이터 변환의 모든 단계가 다음 단계에 중첩되어 있는 이유는 무엇인가요?

리팩토링해 보겠습니다.

async function processData(url) {
  try {
    const response = await fetch(url);
    const data = await response.json();

    const updatedData = data.map((item) => ({
      ...item,
      status: item.isActive ? "active" : "inactive",
    }));

    const finalResult = updatedData.reduce(
      (acc, curr) => {
        if (curr.status === "active") {
          acc.active.push(curr);
        } else {
          acc.inactive.push(curr);
        }
        return acc;
      },
      { active: [], inactive: [] }
    );

    console.log(finalResult);
  } catch (error) {
    console.error(error);
  }
}
processData(url);

로직을 단계적으로 나누면 코드를 읽을 수 있게 됩니다. 여전히 같은 일을 하고 있지만 이제는 각 단계에서 무슨 일이 일어나고 있는지 분명해졌습니다.

단순한 것이 더 나은 이유

소프트웨어와 관련하여 다음 황금률을 기억하세요. 코드는 개인 일기가 아닙니다. 의사소통 도구입니다. 팀에서 읽을 수 없으면 작업할 수 없습니다. 그리고 이를 활용하지 못하면 비즈니스는 앞으로 나아갈 수 없습니다.

단순함이 승리하는 이유는 다음과 같습니다.

1 더욱 빠른 온보딩: 주니어 개발자는 코드를 이해하기 위해 Rosetta Stone이 필요하지 않습니다.
2 더 쉬운 디버깅: 버그가 발생할 때(그리고 실제로 발생하게 될 경우) 명확한 논리를 통해 버그를 더 쉽게 찾아낼 수 있습니다.
3 행복한 팀: 멍청한 느낌을 좋아하는 사람은 없습니다. 지나치게 영리한 코드는 팀원을 소외시킵니다.

테이크아웃

힘든 밤에 잠을 자고 난 후 미래의 자신에게 설명하는 것처럼 코드를 작성하세요. 귀하의 작업을 읽어야 하는 다음 개발자에게 친절하게 대하십시오. 그 개발자는 귀하일 가능성이 높기 때문입니다.

아름다운 코드는 얼마나 화려해 보이는가가 아닙니다. 문제를 얼마나 효과적으로 해결하는지에 관한 것입니다. 그보다 적은 것은 허영심의 연습일 뿐입니다.

위 내용은 저장소가 아닌 박물관에 속한 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!