안녕하세요 동료 개발자 여러분! ? 오늘은 깔끔하고 유지 관리가 가능한 JavaScript 작성의 중요한 측면인 함수 인수 관리

너무 많은 인수의 문제

이런 함수를 본 적이 있나요?

function createMenu(title, body, buttonText, cancellable, theme, fontSize, callback) {
  // ...a whole lot of logic here
}

당신이 알고 있다면 인수의 순서를 기억하려고 노력하거나 더 나쁜 것은 누군가가 불가피하게 인수를 혼동할 때 디버깅하는 어려움을 알고 있을 것입니다. ?

두 가지 인수 규칙

다음은 황금률입니다. 함수를 2개 이하의 인수로 제한하세요.
왜? 몇 가지 설득력 있는 이유는 다음과 같습니다.

• 향상된 테스트 가능성: 인수가 적다는 것은 모든 가능성을 포괄하는 테스트 케이스 수가 적다는 것을 의미합니다.
• 가독성 향상: 함수의 목적을 한눈에 파악하기가 더 쉽습니다.
• 인지 부하 감소: 이 기능을 사용하는 개발자의 정신적 매개 변수 저글링이 줄어듭니다.

하지만 더 많은 매개변수가 필요하면 어떻게 해야 할까요?

좋은 질문입니다! 이것이 객체 구조 분해의 마법이 시작되는 곳입니다. 이것을 확인하세요:

function createMenu({ title, body, buttonText, cancellable, theme = 'light', fontSize = 16, callback = () => {} }) {
  // Your implementation here
}

// Usage
createMenu({
  title: "Settings",
  body: "Adjust your preferences",
  buttonText: "Save",
  cancellable: true
});

이 접근 방식의 이점

• 명명된 매개변수 시뮬레이션: 임의의 순서로 인수를 제공할 수 있습니다. 자체 문서화: 함수 서명은 예상되는 속성이 무엇인지 명확하게 보여줍니다. 기본값: 선택적 매개변수에 대한 기본값을 쉽게 설정합니다. 부작용 방지: 복제 기본 값을 파괴하여 우발적인 돌연변이를 방지하는 데 도움이 됩니다. 린터 친화적: 도구는 사용하지 않는 속성에 대해 경고할 수 있습니다.

전문가 팁: TypeScript Boost

TypeScript를 사용하는 경우 한 단계 더 발전할 수 있습니다.

interface MenuOptions {
  title: string;
  body: string;
  buttonText: string;
  cancellable: boolean;
  theme?: 'light' | 'dark';
  fontSize?: number;
  callback?: () => void;
}

function createMenu(options: MenuOptions) {
  // Implementation
}

이것은 유형 안전성과 자동 완성을 추가하여 코드를 더욱 강력하게 만듭니다!

마무리

이 패턴을 채택하면 기능이 더 유연해지고, 사용하기 쉽고, 유지 관리가 더 간단해집니다. 이는 코드 품질에 큰 영향을 미칠 수 있는 작은 변화입니다.

이 접근 방식에 대해 어떻게 생각하시나요? 함수 인수 관리에 대한 다른 팁이 있나요? 댓글로 토론해 보세요!

즐거운 코딩하세요! ?