많은 개발자가 어려움을 겪고있는 JavaScript 개발의 한 측면은 선택적 값을 처리하는 것입니다. null, undefined 일 수 있거나 런타임에 초기화되지 않은 값으로 인해 발생하는 오류를 최소화하는 가장 좋은 전략은 무엇입니까?

일부 언어에는 이러한 상황을위한 기본 제공 어포던스가 있습니다. 일부 정적으로 형식화 된 언어에서는 null 및 undefined가 잘못된 값이라고 말하고 프로그래밍 언어가 컴파일 타임에 TypeError를 발생 시키도록 할 수 있습니다. 하지만 이러한 언어에서도 런타임에 null 입력이 프로그램으로 유입되는 것을 막을 수는 없습니다.

이 문제를 더 잘 처리하려면 이러한 값이 어디서 올 수 있는지 이해해야합니다. 가장 일반적인 소스는 다음과 같습니다.

• 사용자 입력
• 데이터베이스 / 네트워크 레코드
• 초기화되지 않은 상태
• 아무것도 반환하지 않음

사용자 입력을 처리 할 때 유효성 검사가 최우선 방어선입니다. 저는 종종 스키마 유효성 검사기에 의존하여 작업을 돕습니다. 예를 들어 react -jsonschema-form.

입력에서 레코드 수화

수화 기능을 통해 네트워크, 데이터베이스 또는 사용자 입력에서받은 입력을 항상 전달합니다. 예를 들어,

값을 사용하여 사용자 레코드 수화 :

const setUser = ({ name = "Anonymous", avatar = "anon.png" } = {}) => ({
type: setUser.type,
payload: {
name,
avatar
}
});
setUser.type = "userReducer/setUser";

때로는 현재 상태에 따라 다른 항목을 표시해야합니다. 데이터의. 모든 데이터가 초기화되기 전에 페이지를 표시 할 수 있다면 그러한 상황에 처할 수 있습니다. 예를 들어 사용자에게 잔액을 표시 할 때 데이터가로드되기 전에 실수로 $ 0 잔액을 표시 할 수 있습니다. 나는 이러한 사용자를 여러 번 화나게 보았다. 현재 상태에 따라 다른 출력을 생성하는 사용자 지정 데이터 유형을 만들 수 있습니다.

위 코드는 잘못된 상태를 표시하는 것을 불가능하게하는 상태 머신입니다. 잔액을 처음 만들면 uninitialized 상태로 설정됩니다. 상태가 uninitialized 일 때 잔액을 표시하려고하면 항상 자리 표시 자 값 ( “--“)이 표시됩니다.

변경하려면 .set 메소드 또는 setBalance 단축키를 호출하여 명시 적으로 값을 설정해야합니다. 우리는 createBalance 공장 아래에 정의했습니다.

상태 자체는 캡슐화되어 외부 간섭으로부터 보호하여 다른 함수가 그것을 잡고 설정할 수 없도록합니다. 유효하지 않은 상태로 변경됩니다.

참고 : 여기에 숫자 대신 문자열을 사용하는 이유가 궁금하다면 화폐 유형을 다음과 같이 표현하기 때문입니다. 반올림 오류를 방지하고 임의의 중요한 소수 정밀도를 가질 수있는 암호 화폐 거래의 값을 정확하게 나타 내기 위해 소수 정밀도가 많은 큰 숫자 문자열입니다.

Redux 또는 Redux 아키텍처를 사용하는 경우 Redu로 상태 머신을 선언 할 수 있습니다. x-DSM.

null 및 정의되지 않은 값 생성 방지

자신의 함수에서 null 또는 undefined 값입니다. 염두에 두는 JavaScript에 내장 된 작업을 수행하는 몇 가지 방법이 있습니다. 아래를 참조하세요.

Null 피하기

저는 자바 스크립트에서 null 값을 명시 적으로 생성하지 않았습니다. 본질적으로 “이 값이 존재하지 않습니다”를 의미하는 기본 값입니다.

2015 년부터 JavaScript는 문제의 인수 또는 속성에 대한 값을 제공하지 않을 때 채워지는 기본값을 지원했습니다. 이러한 기본값은 null 값에 적용되지 않습니다. 그것은 제 경험상 보통 버그입니다. 이러한 함정을 피하려면 자바 스크립트에서 null를 사용하지 마세요.

초기화되지 않았거나 빈 값에 대한 특별한 경우를 원한다면 상태 머신이 더 나은 방법입니다. 위를 참조하세요.

새로운 자바 스크립트 기능

null 또는 값. 둘 다이 글을 쓰는 시점에서 3 단계 제안이지만, “미래에서 읽는다면, 그것들을 사용할 수있을 것입니다.

이 글을 쓰는 현재, 선택적 체인은 3 단계 제안입니다. 다음과 같이 작동합니다.

const foo = {};
// console.log(foo.bar.baz); // throws error
console.log(foo.bar?.baz) // undefined

Nullish Coalescing Operator

또한 사양에 추가 될 3 단계 제안 인 “nullish 병합 연산자 ”는 기본적으로 “대체 값 연산자”를 나타내는 멋진 방법입니다. 왼쪽의 값이 undefined 또는 null이면 다음과 같이 평가됩니다. 오른쪽의 값입니다.다음과 같이 작동합니다.

Asynchronous Either with Promise

함수가 값을 반환하지 않을 경우 Either로 래핑하는 것이 좋습니다. 함수형 프로그래밍에서 Either 모나드는 성공 경로 또는 실패 경로의 두 가지 다른 코드 경로를 연결할 수있는 특수 추상 데이터 유형입니다. JavaScript에는 Promise라는 기본 제공 비동기 데이터 유형이 있습니다. 정의되지 않은 값에 대해 선언적 오류 분기를 수행하는 데 사용할 수 있습니다.

원하는 경우 동기 버전을 작성할 수 있지만 그다지 필요하지는 않았습니다. 연습으로 남겨 두겠습니다. 펑터와 모나드에 대한 좋은 접지가 있다면 프로세스가 더 쉬울 것입니다. 두렵게 들리더라도 걱정하지 마세요. 약속을 사용하십시오. 내장되어 있으며 대부분의 경우 잘 작동합니다.

Maybes 용 배열

배열은 다음과 같은 map 메소드를 구현합니다. 배열의 각 요소에 적용되는 함수. 배열이 비어 있으면 함수가 호출되지 않습니다. 즉, JavaScript의 배열은 Haskell과 같은 언어에서 Maybes의 역할을 채울 수 있습니다.

What is a Maybe?

A Maybe는 선택적 값을 캡슐화하는 특별한 추상 데이터 유형입니다. . 데이터 유형은 다음 두 가지 형식을 취합니다.

• Just — 값이 포함 된 Maybe
• Nothing — 값이없는 Maybe

아이디어의 요지는 다음과 같습니다.

이것은 개념을 보여주는 예일뿐입니다. flatMap 및 flat (예 : Just(Just(value)) 여러 개의 Maybe-returning 함수를 작성할 때). 그러나 JavaScript에는 이미 많은 기능을 즉시 구현하는 데이터 유형이 있으므로 일반적으로 대신 The Array에 도달합니다.

할 수있는 함수를 만들려면 결과를 생성하지 못할 수 있습니다 (특히 결과가 둘 이상일 수있는 경우), 배열을 반환하는 훌륭한 사용 사례가있을 수 있습니다.

map는 null 및 undefined 값을 피하는 데 매우 유용한 빈 목록에서 호출되지 않습니다. 그러나 배열이 null 및 undefined 값이 포함 된 경우 해당 값으로 함수를 호출하므로 실행중인 함수가

또는 undefined의 경우 위에서 설명한 것처럼 반환 된 배열에서 필터링해야합니다. 이렇게하면 길이를 변경하는 효과가있을 수 있습니다.

Haskell에는 maybe 함수가 있습니다 (예 : )는 값에 함수를 적용합니다. 그러나 값은 선택 사항이며 Maybe에 캡슐화됩니다. JavaScript의 Array 데이터 유형을 사용하여 기본적으로 동일한 작업을 수행 할 수 있습니다.

maybe는 대체 값을받습니다. , 어쩌면 배열 (하나의 값을 포함하거나 아무것도 포함하지 않는 배열)에 매핑 할 함수가 있고 배열의 내용에 함수를 적용한 결과를 반환하거나 배열이 다음과 같은 경우 대체 값을 반환합니다. 비어 있습니다.

편의를 위해 toMaybeArray 함수도 정의하고 maybe 함수를 커리하여 이 데모에서는 가장 분명합니다.

프로덕션 코드에서 이와 같은 작업을 수행하려면 더 쉽게하기 위해 단위 테스트 된 오픈 소스 라이브러리를 만들었습니다. Maybearray라고합니다. 다른 자바 스크립트 Maybe 라이브러리에 비해 Maybearray의 장점은 네이티브 자바 스크립트 배열을 사용하여 값을 표현하므로 값을 표시하기 위해 특별한 처리를하거나 특별한 작업을 수행 할 필요가 없다는 것입니다. 디버깅에서 Maybe 배열을 발견 할 때 “이 이상한 유형은 무엇입니까?!”라고 묻지 않아도됩니다. 그것은 단지 값의 배열이거나 빈 배열이고 당신은 그것들을 이전에 백만 번 본 적이 있습니다.

다음 단계

EricElliottJS.com에는 많은 것을 포함하여 더 많은 콘텐츠가 있습니다. 동영상, 연습 문제, 녹화 된 스크린 캐스트 및 빠른 팁을 제공합니다. 회원이 아니시라면 지금이 무엇을 놓치고 있는지 확인하세요!