함수 인수 익히기: JavaScript에서는 적을수록 좋습니다-JS 튜토리얼-php.cn

함수 인수 익히기: JavaScript에서는 적을수록 좋습니다

Mary-Kate Olsen

풀어 주다： 2024-10-03 18:20:30

원래의

204명이 탐색했습니다.

Mastering Function Arguments: Less is More in JavaScript

안녕하세요 동료 개발자 여러분! ? 오늘은 깔끔하고 유지 관리가 가능한 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
}

로그인 후 복사

이렇게 하면 유형 안전성과 자동 완성 기능이 추가되어 코드가 더욱 강력해집니다!