JS 익명 함수를 사용하는 방법

이번에는 JS 익명함수 사용법과 JS익명함수 사용시 주의사항에 대해 알려드리겠습니다. 실제 사례를 살펴보겠습니다.

익명 함수의 기본 형식은 (function(){...})();

입니다. 첫 번째 괄호는 함수 본문을 포함하고 다음 괄호는 익명 함수에 매개변수를 전달하고 즉시 실행합니다

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

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

익명 함수가 무엇인지 모르신다면 다음 인용문을 참고하세요:

익명 함수는 런타임에 동적으로 선언되는 함수입니다. 일반 함수와 달리 함수 이름이 없기 때문에 익명 함수라고 합니다. — 헬렌 에머슨, Helenphant.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줄의 코드가 있는 것처럼 보입니다. 큰 코드 블록을 처리하면 어떻게 되나요? 만 줄의 코드처럼요? 줄 번호의 범위가 너무 크면 어떻게 해야 합니까? 코드를 접은 뒤 코드map 파일이 있다면 줄번호 렌더링은 전혀 쓸모가 없는 걸까요?

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

가독성

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

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

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를 반환하고, 이 promiseobject/method를 사용하여 다양한 가능한 응답을 처리합니다.

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

익명 함수를 모두 없애면 어떻게 될까요?

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只是指向了发生所有事情的函数。

关于更具有可读性，我没有什么再能说服你的了。但是也许你还没被说服的话，我可以试一下最后的论据。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

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