오류가 발생하기 전에 중지하기

오류가 발생하기 전에 중지하기: 안전 할당 연산자(?=) 및 Promise를 정상적으로 처리하기

JavaScript가 발전함에 따라 코딩을 더욱 효율적이고 오류 방지하기 위한 새로운 기능과 제안이 계속 등장하고 있습니다. 그러한 기능 중 하나가 언어에 제안된 추가 기능인 안전 할당 연산자(?=)입니다. 아직 공식 출시를 기다리고 있는 동안, 오늘 비슷한 기능을 구현하여 null 또는 정의되지 않은 값과 같은 일반적인 문제로부터 코드를 보호할 수 있습니다.

이 기사에서는 ?= 연산자를 살펴보고, 기존 JavaScript를 사용하여 자체 버전을 구축하고, 비동기 작업에서 Promise를 보다 원활하게 처리하는 실용적인 방법을 소개합니다.

안전 할당 연산자 이해(?=)

?= 연산자란 무엇입니까?

안전 할당 연산자(?=)를 사용하면 개발자는 대상이 null이거나 정의되지 않은 경우에만 변수에 값을 할당할 수 있습니다. "변수가 비어 있으면 이 값을 할당하십시오."라고 말하는 것이 더 간결합니다.

작동 방식은 다음과 같습니다.

let username = null;
username ?= "Shahar"; 
console.log(username); // Output: "Shahar"

이 경우 값이 null이므로 username 변수에 "Shahar"가 할당됩니다. 사용자 이름에 기존 값이 있는 경우 운영자는 단순히 할당을 전달합니다.

유용한 이유

?= 연산자는 안전한 할당을 보장하기 위해 명시적인 if 검사나 삼항 연산의 필요성을 줄여 코드를 단순화합니다. 그러나 이 연산자는 ECMAScript 내에서 아직 제안 단계에 있으므로 JavaScript 언어의 일부가 되기 전에 변경될 수 있습니다. 여기에서 개발 과정을 추적할 수 있습니다.

안전한 할당 기능 만들기

safeAssign 출시

?=가 공식화되기를 기다리는 동안 safeAssign이라는 사용자 정의 유틸리티 함수를 사용하여 오늘의 동작을 모방할 수 있습니다. 이 함수는 이미 현대 환경에서 널리 지원되는 nullish 병합 연산자(??)를 사용합니다.

safeAssign 기능은 다음과 같습니다.

function safeAssign(target, value) {
  return target ?? value;
}

실제 사례

어떻게 작동하는지 살펴보겠습니다.

let username = undefined;
username = safeAssign(username, "Shahar");
console.log(username); // Output: "Shahar"

이것은 사실상 ?= 연산자가 수행하는 작업입니다. 변수가 null이거나 정의되지 않은 경우 값을 할당합니다. 그렇지 않으면 그대로 둡니다.

safeAssign의 제한 사항

safeAssign은 ?=와 유사한 기능을 제공하지만 다음과 같은 제한 사항이 있습니다.

• 단순성: safeAssign은 유틸리티 함수이며 기본 ?= 연산자와 동일한 수준의 구문적 우아함을 제공할 수 없습니다. 사용자 정의 함수를 과도하게 사용하면 코드가 더 장황해질 수 있습니다.
• 성능: safeAssign이 성능에 미치는 영향은 소규모 애플리케이션에서는 미미하지만 ?=와 같은 기본 연산자는 엔진 최적화로 인해 대규모 시스템에서 더 빨라질 가능성이 높습니다.
• 브라우저 지원: safeAssign에 사용되는 nullish 병합 연산자(??)는 대부분의 최신 브라우저 및 환경에서 지원되지만 이전 환경에서는 폴리필 없이는 이를 지원하지 않을 수 있습니다.

다른 언어와의 빠른 비교

다른 많은 언어에서도 제안된 ?= 연산자와 유사한 기능을 제공합니다.

• C#에는 JavaScript의 ?= 제안과 유사하게 동작하는 null 병합 할당 연산자(??=)가 있습니다.
• Python은 안전한 할당을 위해 or 키워드를 사용합니다. 여기서 a = a 또는 값은 a가 거짓인 경우에만 값을 할당하는 일반적인 패턴입니다.

이러한 연산자를 사용하면 비어 있을 수 있는 값을 더 간단하게 처리하여 상용구 코드를 줄일 수 있습니다.

safeAwait를 사용하여 비동기 작업 처리

safeAwait 소개

JavaScript에서 비동기 작업을 수행할 때 약속이 거부되거나 예상치 못한 결과가 발생하기 쉽습니다. .catch()를 사용하여 모든 거부를 수동으로 처리하는 대신 Promise를 더 깨끗하고 안전한 구조로 래핑하는 safeAwait라는 사용자 정의 함수를 사용하여 프로세스를 간소화할 수 있습니다.

safeAwait 함수는 다음과 같습니다.

async function safeAwait(promise, errorHandler) {
  try {
    const data = await promise;
    return [null, data]; // Success: No error, return the data
  } catch (error) {
    if (errorHandler) errorHandler(error); // Optional error handler
    return [error, null]; // Error occurred, return error with null data
  }
}

예: 오류 처리를 통해 데이터 가져오기

safeAwait를 사용하여 API에서 데이터를 가져오고 잠재적인 오류를 처리해 보겠습니다.

async function getData() {
  const [error, response] = await safeAwait(
    fetch("https://api.example.com"),
    (err) => console.error("Request failed:", err)
  );

  if (error) return; // Exit if there's an error
  return response; // Return response if successful
}

이 예에서 safeAwait는 성공과 오류 사례를 모두 처리하므로 호출 함수가 더 예측 가능한 방식으로 결과를 처리할 수 있습니다.

safeAwait의 변형

다른 사용 사례에 맞게 safeAwait를 확장할 수도 있습니다. 예를 들어, 실패하기 전에 Promise를 한 번 재시도하는 버전은 다음과 같습니다.

async function safeAwaitWithRetry(promise, errorHandler, retries = 1) {
  let attempt = 0;
  while (attempt <= retries) {
    const [error, data] = await safeAwait(promise, errorHandler);
    if (!error) return [null, data];
    attempt++;
  }
  return [new Error("Max retries reached"), null];
}

이 변형은 수건을 던지기 전에 지정된 횟수까지 Promise를 재시도합니다.

Best Practices for Error Handling in JavaScript

When working with asynchronous code, proper error handling is crucial. Here are some best practices:

1. Always handle rejected promises: Unhandled promise rejections can lead to crashes or undefined behavior. Use try/catch or .catch() to ensure promises are properly handled.
2. Centralize error handling: Utility functions like safeAwait allow you to centralize error handling, making it easier to manage and debug your code.
3. Graceful degradation: Ensure that your application can recover from errors gracefully without crashing or leaving the user in an undefined state.
4. Use custom error messages: When throwing errors, provide meaningful error messages to help with debugging.

Before and After: Clean Code with safeAssign and safeAwait

Here’s a quick comparison of how these utilities can clean up your code.

Without safeAssign:

if (user === null || user === undefined) {
  user = "Shahar";
}

With safeAssign:

user = safeAssign(user, "Shahar");

Without safeAwait:

try {
  const response = await fetch("https://api.example.com");
} catch (error) {
  console.error("Request failed:", error);
}

With safeAwait:

const [error, response] = await safeAwait(fetch("https://api.example.com"), (err) => console.error("Request failed:", err));

Conclusion

In summary, while the Safe Assignment Operator (?=) is still a proposal, we can replicate its behavior today using the safeAssign function for nullish values and safeAwait for more complex asynchronous operations. Both utilities simplify your code, making it more readable and maintainable.

Key Takeaways:

• The ?= operator simplifies safe assignments but is still in the proposal stage.
• You can replicate ?= functionality with safeAssign using the nullish coalescing operator (??), which is widely supported.
• For asynchronous operations, safeAwait provides a cleaner way to handle promise rejections and errors.
• Keep an eye on ECMAScript proposals for future updates.

By leveraging these patterns, you can handle errors like a pro and keep your code clean, readable, and safe.

위 내용은 오류가 발생하기 전에 중지하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!