JavaScript에서 익명 함수를 작성하지 마십시오.

기본적으로 "익명"은 우리가 제대로 알고 있습니다. 마치 그들이 누구인지에 대한 정확한 정보를 모르는 사람처럼요? 그들은 어디에 있습니까? 등등. 이 기사에서는 JavaScript에서 "익명" 용어의 관계를 설명하려고 합니다.

대부분 우리는 매일매일 JavaSript를 사용하여 "함수"를 작성하는 것과 분리할 수 없습니다. 합계를 계산 a + b + c하거나 부작용과 같은 것을 처리합니다. 기본적으로 "이봐, 함수를 이렇게 작성해야 한다" 는 정확한 패턴은 없지만 JavaScript는 우리가 따를 수 있는 다음과 같은 유형을 제공했습니다.

1. 선언으로서의 기능
2. 표현으로서의 기능
3. 생성자로서의 기능

(function () {
  throw new Error("here");
})();

코드가 크고 실행해야 하는 1001개의 함수가 있고 900번째 함수에 원치 않는 오류가 있다고 상상해 보십시오. 함수를 익명으로 작성했기 때문에 함수 이름이 무엇인지, 오류가 발생한 위치를 알 수 없기 때문입니다. 이다.

이는 디버깅하기 어려울 것입니다. 익명 함수는 과거에 우리가 직접 작성했을 때에도 개발 중에 적이 될 수 있다고 말한 것입니다.

대부분 우리는 이 기능이 무엇을 의미하는지 에 대한 질문을 가질 것입니다. 그 기능이 실행되었을 때? 그 기능을 저장소에 배치하는 위치는 어디입니까? 아마도 이 질문은 우리가 혼자(프리랜서) 구축한다면 거의 나오지 않을 것입니다. 하지만 우리가 큰 팀에서 왔다고 가정해 봅시다. 그런 다음 다른 구성원이 해당 문제를 해결하려고 하면 오류의 근본 원인을 찾는 데 많은 시간이 걸립니다.

하지만 함수 이름을 다음과 같이 지정하면 이야기가 달라집니다.

(function thisIsOurFunction() {
  throw new Error("oops");
})();

thisIsOurfunction앞서 이미지에서 우리는 오류 가 우리가 그 오류를 고칠 수 있는 곳을 나타내는 우리의 함수 이름도 출력하는 것을 볼 수 있습니다.

React, Vue, Angular 또는 Svelte에만 적용되나요? 아니요, 이것은 프로덕션에 문제가 있는지 확인하기 위해 코드에 적용해야 하는 불가지론적 접근 방식입니다. 해당 버그를 수정하려는 다른 구성원에 대해서도 쉽게 추적할 수 있습니다.

프로젝트/리포지토리가 ESLint 구성과 함께 제공되는 경우 이 플러그인 eslint-plugin-import/no-anonymous 를 설치하면 코드를 작성하는 동안 이를 쉽게 감지할 수 있습니다.