How to use JS anonymous functions

This time I will bring you JSanonymous functionHow to use it, what are the precautions when using JS anonymous function, the following is a practical case, let’s take a look .

The basic form of an anonymous function is (function(){...})();

The first bracket contains the function body, and the following bracket is to pass parameters to the anonymous function and execute it immediately

The purpose of anonymous functions is to avoid global variable pollution and function name conflicts

Whenever you read code, you must be aware of anonymous functions. Sometimes they are called lambdas, sometimes anonymous functions, either way I think they are difficult to use.

If you don't know what an anonymous function is, here's a quote:

An anonymous function is a function that is declared dynamically at runtime. They are called anonymous functions because unlike ordinary functions, they do not have function names. — Helen Emerson, Helenphant.com

The anonymous function form is as follows:

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

Today I try to make you understand the idea of ​​using anonymous functions in general only when absolutely necessary. Anonymous functions should not be preferred and should be used only if the reasons are known. When you understand this idea, your code will become cleaner, easier to maintain, and easier to track bugs. Let’s start with three reasons to avoid using anonymous functions:

When you write code, no matter how good you are at typing code, you will always encounter errors. Sometimes these errors are easy to detect, sometimes not.

Errors can be easily caught if you know where they come from. To find errors, we use this tool called a stack trace. If you don't know about stack traces, Google has a great introduction.

Suppose there is a very simple project now:

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

There is a very stupid mistake in the above code, a typo (console.log). In a small project, this spelling error is not a big problem. If this is a small section of a very large project with many modules, the problem is huge. Assuming you didn't make this stupid mistake, the new junior engineer will commit it to the code base before he goes on vacation!

Now we have to get to the bottom of it. Using our carefully named function, we get a stack trace like this:

Thanks for naming your functions, junior developers! Now we can easily track down the bug.

But... once we fixed that, we discovered there was another bug. This time it was introduced by a more senior developer. This person knows about lambdas
As a result they stumble upon a bug and it's our job to track it down.

Here is the code:

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

Not surprisingly, this developer also forgot how to spell console.log! This is too much of a coincidence! It's a shame that none of them named their functions.

So what will the console output?

Well, we at least still have line numbers, right? In this example, it looks like we have about 7 lines of code. What happens if we deal with a large block of code? Like ten thousand lines of code? What should we do if the span of line numbers is so large? If there is a codemap file after the code is folded, then is the rendering of line numbers useless at all?

I think the answer to these questions is pretty simple. The answer is: thinking about these things will make your day pretty miserable.

Readability

## Hey, I heard that you still don’t believe it. You're still attached to your anonymous function, and the bug has never occurred. Well I have to apologize to you for thinking your code is perfect. Let's take a look at this!

Take a look at the following two pieces of code:

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();
   }
 );

This is a very unusual example, but I believe you understand what I'm going to say. Our method returns a promise, and we use this promise

Object/method to handle different possible responses.

You might think that these few pieces of code are not difficult to read, but I think they can be better!

What would happen if we got rid of all anonymous functions?

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中文网其它相关文章！

推荐阅读：

The above is the detailed content of How to use JS anonymous functions. For more information, please follow other related articles on the PHP Chinese website!