> 웹 프론트엔드 > JS 튜토리얼 > # 일반 검증을 재사용 가능한 함수로 대체

# 일반 검증을 재사용 가능한 함수로 대체

王林
풀어 주다: 2024-09-03 14:35:08
원래의
741명이 탐색했습니다.

# Replace Generic Validation with Reusable Functions

JavaScript 및 TypeScript 개발자는 동일한 조건을 반복적으로 작성하는 경우가 많습니다. 웹 개발자라면 아마도 다음과 같은 코드를 접했을 것입니다.

const handleSaveTextKeydown = (event: KeyboardEvent) => {
   if (event.key === 'Enter') {
    //... save text
   }
}
로그인 후 복사

이 경우 event.key는 문자열 유형이며, 예를 들어 'Enter'에 실수로 공백이 포함되어 버그가 발생하기 쉽습니다.

이 조건을 함수로 캡슐화해 보는 것은 어떨까요?

const handleSaveTextKeydown = (event: KeyboardEvent) => {
   if (checkIsEnterKey(event.key)) {
    //... save text
   }
}
로그인 후 복사

이렇게 하면 Enter 키에 대한 모든 검사가 일관되고 신뢰할 수 있게 됩니다.

이제 다음 검증을 고려해보세요.

type Value = null | object;

const value = {} as Value;

if (typeof value === 'object') {
  value; // value type is null | object
}
로그인 후 복사

TypeScript가 똑똑하더라도 조건 내부의 값은 Value 유형으로 유지됩니다. 이는 typeof null이 '객체'를 반환하기 때문입니다.

따라서 다음과 같이 작성해야 합니다.

if (value !== null && typeof value === 'object') {
  value; // value type is object
}
로그인 후 복사

많은 개발자는 이를 함수로 캡슐화하지 않고 대신 이러한 상황이 발생할 때마다 반복적으로 작성합니다.

살면서 같은 조건을 몇 번이나 썼나요?

같은 실수를 몇 번이나 저질렀나요?

앞으로 같은 조건을 몇 번이나 더 쓰게 될까요?

나라면 이렇게 하겠다.

if (checkIsObject(value)) {
  value; // value type is object
}
로그인 후 복사

함수에 일반 조건을 캡슐화하면 많은 이점이 있습니다.

다음 예를 고려해보세요.

const array = [0, 1, 2, 3, 4, 5, null, undefined];
로그인 후 복사

null 값만 제외하는 배열을 만들어 보겠습니다.

간결함을 우선시하여 다음과 같이 작성할 수도 있습니다.

const numbers = array.filter(Boolean);
로그인 후 복사

안타깝게도 이는 이상적이지 않습니다. 0도 false로 평가되어 제외됩니다. 따라서 다음과 같이 작성해야 합니다.

const numbers = array.filter(item => item !== null && item !== undefined);
로그인 후 복사

보기 흉하고 재사용이 불가능한 코드처럼 느껴지지 않나요?

더 우아한 코드를 작성할 수 있습니다:

const numbers = array.filter(checkIsNullish);
로그인 후 복사

일반 조건을 반복적으로 작성하지 마세요. 실수만 낳고 코드 가독성도 떨어지게 됩니다.

제가 만든 checker라는 라이브러리를 소개하겠습니다.

이 유틸리티 함수 라이브러리는 일반적인 웹 개발 및 하위 수준 개발에서 일반적으로 사용되는 조건을 함수로 나타냅니다. 모든 함수는 입력을 받아 부울 값을 반환합니다.

이 기사를 작성하는 시점에는 문자열, 숫자, 부울, null 값과 같은 데이터 유형을 처리하는 다양한 함수를 제공합니다. 모든 기능은 테스트되고 문서화되었으며 사용하기 쉽습니다.

실제 사례를 살펴보겠습니다.

이 라이브러리에서 제공하는 패키지는 모두 JSR에 게시되어 있습니다. NPM, PNPM, Yarn, Bun, Deno 프로젝트에 쉽게 설치할 수 있습니다.

여기에서는 NPM의 예로 @checker/string 패키지를 살펴보겠습니다.

  1. 패키지 설치

프로젝트 디렉터리에서 다음 명령을 실행하세요.

  npx jsr add @checker/string
로그인 후 복사
  1. 기능 사용
  import { checkIsNotEmptyString, checkIsIndexFound } from "@checker/string";

  const value = "Hello";

  const formatted = value.trim();

  if (checkIsNotEmptyString(formatted)) {
    // formatted !== ''
    // When formatted is not an empty string
  }

  const index = value.indexOf("el");

  if (checkIsIndexFound(index)) {
    // index !== -1
    // When "el" is found in value
  }
로그인 후 복사

저는 부울 값을 반전시키기 위해 !SOME_CONDITION과 같은 논리 부정 연산자를 사용하는 것을 좋아하지 않습니다. 이는 암시적이기 때문에 단순히 부울 값을 추가하거나 생략하여 반전시키는 것은 많은 위험한 상황을 초래할 수 있습니다.

따라서 모든 함수에는 해당 checkIsNot~ 함수가 정의되어 있습니다.

함수에 일반 조건을 캡슐화합니다. 이렇게 하면 코드를 더 쉽게 읽을 수 있고 버그를 더 쉽게 발견할 수 있습니다.

읽어주셔서 감사합니다.

위 내용은 # 일반 검증을 재사용 가능한 함수로 대체의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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