JS 익명 함수를 사용하지 않는 이유

이 글에서는 js 익명 함수를 사용하지 않는 세 가지 주요 이유를 주로 분석합니다. 익명 함수의 역할은 전역 변수의 오염과 함수 이름의 충돌을 방지하는 것입니다. js 익명 함수를 사용하는 세 가지 주요 이유는 이 글을 참조하세요. 모두에게 도움이 되기를 바랍니다.

익명 함수의 기본 형태는 (function(){...})();

앞 괄호는 함수 본문을 담고 있으며, 다음 괄호는 익명 함수에 매개변수를 전달하고 즉시 실행한다는 의미입니다.

익명 함수 전역 변수 오염과 함수 이름 충돌을 방지하는 것이 목적입니다

코드를 읽을 때 익명 함수에 주의해야 합니다. 때때로 그들은 람다라고 불리기도 하고, 때로는 익명 함수라고 불리기도 하는데, 어느 쪽이든 사용하기 어렵다고 생각합니다.

익명 함수가 무엇인지 모르는 경우 다음 인용문을 참조하세요.

익명 함수는 런타임 시 동적으로 선언되는 함수입니다. 일반 함수와 달리 함수 이름이 없기 때문에 익명 함수라고 합니다. — Helen Emerson, Helephant.com

익명 함수의 형식은 다음과 같습니다.

function () { ... code ... }
OR
(args) => { ... code .. }

오늘 저는 꼭 필요한 경우에만 익명 함수를 사용한다는 아이디어를 모든 사람에게 이해시키려고 노력합니다. 익명 기능은 선호되어서는 안 되며 이유가 알려진 경우에만 사용해야 합니다. 이 아이디어를 이해하면 코드가 더 깨끗해지고 유지 관리가 쉬워지며 버그 추적이 쉬워집니다. 익명 함수를 사용하지 말아야 하는 세 가지 이유부터 시작해 보겠습니다.

코드를 작성할 때 아무리 코드를 잘 입력하더라도 항상 오류가 발생합니다. 이러한 오류는 감지하기 쉬운 경우도 있지만 그렇지 않은 경우도 있습니다.

오류의 출처를 알면 오류를 쉽게 잡을 수 있습니다. 오류를 찾기 위해 스택 추적이라는 도구를 사용합니다. 스택 추적에 대해 모른다면 Google의 훌륭한 소개가 있습니다.

지금 매우 간단한 프로젝트가 있다고 가정해 보겠습니다.

function start () {
 (function middle () {
 (function end () {
  console.lg('test');
 })()
 })()
}

위 코드에는 오타(console.log)라는 매우 어리석은 실수가 있습니다. 소규모 프로젝트에서는 이러한 철자 오류가 큰 문제가 되지 않습니다. 이것이 많은 모듈이 포함된 매우 큰 프로젝트의 작은 부분이라면 문제는 엄청납니다. 당신이 이런 어리석은 실수를 하지 않았다고 가정하면, 새로운 주니어 엔지니어는 휴가를 떠나기 전에 이를 코드 베이스에 커밋할 것입니다!

이제 추적해야 합니다. 신중하게 이름을 지정한 함수를 사용하여 다음과 같은 스택 추적을 얻습니다.

함수 이름을 지정해 주셔서 감사합니다, 주니어 개발자 여러분! 이제 버그를 쉽게 추적할 수 있습니다.

하지만... 이 문제를 해결하고 나니 또 다른 버그가 있다는 것을 알게 되었습니다. 이번에는 고위 개발자의 이야기였습니다. 이 사람은 람다에 대해 알고 있어요
우연히 버그를 발견했고 이를 추적하는 것이 우리의 임무입니다.

코드는 다음과 같습니다.

(function () {
 (function () {
 (function () {
  console.lg('test');
 })();
 })();
})();

놀랍지도 않게 이 개발자는 console.log 철자를 잊어버렸습니다! 이건 너무한 우연이군요! 그들 중 누구도 자신의 기능을 명명하지 않은 것은 부끄러운 일입니다.

그렇다면 콘솔은 무엇을 출력할까요?

글쎄, 적어도 줄 번호는 아직 남아있죠? 이 예에서는 약 7줄의 코드가 있는 것처럼 보입니다. 큰 코드 블록을 처리하면 어떻게 되나요? 만 줄의 코드처럼요? 줄 번호의 범위가 너무 크면 어떻게 해야 합니까? 코드를 접은 뒤 코드맵 파일이 있으면 줄번호 렌더링이 전혀 쓸모가 없나요?

이 질문에 대한 대답은 매우 간단하다고 생각합니다. 이런 것들에 대해 생각하면 하루 종일 꽤 비참해질 것입니다.

가독성

안녕하세요, 믿지 못하셨다고 들었습니다. 여전히 익명 함수에 연결되어 있으며 버그가 발생한 적이 없습니다. 글쎄요, 당신의 코드가 완벽하다고 생각한 것에 대해 사과해야겠습니다. 이것을 살펴보자!

다음 두 코드를 살펴보세요.

function initiate (arguments) {
 return new Promise((resolve, reject) => {
 try {
  if (arguments) {
   return resolve(true);
  }
  return resolve(false);
 } catch (e) {
  reject(e);
 }
 });
}
initiate(true)
 .then(res => {
  if (res) {
   doSomethingElse();
  } else {
   doSomething();
  }
 ).catch(e => {
   logError(e.message);
   restartApp();
   }
 );

이것은 매우 특이한 예이지만 제가 말하려는 내용을 이미 이해하셨으리라 믿습니다. 우리의 메소드는 promise를 반환하고, 이 promise 객체/메서드를 사용하여 다양한 가능한 응답을 처리합니다.

몇 가지 코드는 읽기 어렵지 않다고 생각할 수도 있지만, 더 나을 수도 있다고 생각합니다!

익명 함수를 모두 제거하면 어떻게 되나요?

function initiate (arguments) {
 return new Promise(checkForArguments);
}
function checkForArguments (resolve, reject) {
 try {
 if (arguments) {
  return resolve(true); 
 }
 return resolve(false);
 } catch (e) {
 reject(e);
 }
}
function evaluateRes (res) {
 if (res) {
 doSomethingElse();
 } else {
 doSomething();
 }
}
function handleError (e) {
 logError(e.message);
 restartApp();
}
initiate(true)
 .then(evaluateRes)
 .catch(handleError);

알겠습니다. 분명히 말씀드리자면 코드의 이 부분은 더 길지만 가독성이 더 높다고 생각합니다! 신중하게 명명된 함수는 이름을 보는 즉시 해당 함수가 무엇인지 알 수 있다는 점에서 익명 함수와 다릅니다. 이렇게 하면 코드를 평가할 때 장애물을 피할 수 있습니다.

이것은 관계를 명확하게 하는 데에도 도움이 됩니다. 메서드를 생성하고 이를 전달한 다음 논리를 실행하는 대신 두 번째 예에서는 인수가 then에 제공되고 catch는 모든 일이 발생하는 함수를 가리킵니다.

더 읽기 쉬운 방법에 대해 더 이상 말씀드릴 수 있는 것이 없습니다. 하지만 아직 확신하지 못하신다면 마지막으로 한 가지 주장을 해볼 수 있습니다.

관련 권장사항:

js에서 버튼 루프에 대한 익명 함수 설정 문제

일반적으로 사용되는 익명 함수

js 익명 함수 사용 및 매개변수 전달 예시에 대한 자세한 설명

위 내용은 JS 익명 함수를 사용하지 않는 이유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!