The differences and applications of 6 variant functions in JavaScript

There are many unique variations of function calls in JavaScript, such as~function、-functionwait. These variations not only show the flexibility of the JavaScript language, but also make the code more concise in some scenarios. This article will use sample code and parsing to comprehensively analyze these special function calls and their differences in return values.

The basis of IIFE: Self-executing functions

Before we dive into the special call method, let’s review IIFE (Immediately Invoked Function Expression, execute function expressions immediately).

(function() {
    ("IIFE Basic Call");
    return 1;
})();
// Output：IIFE Basic calls

IIFE is a way to call functions immediately after definition, and is often used to create private scopes.

Special call method and return value analysis

Here are some special function call variants in JavaScript:

1. ~function

~It is a bitwise non-operator, but when used before a function, the function is converted into an expression and executed immediately.

let result = ~function() {
    ("Call ~function");
    return 1;
}();

(result); // Output -2

Analysis:

• The return value of the function is1。
• ~1equal-2, because bitwise non-reference will inverse the value.

2. -function

-It is the negative sign operator, the function and~similar.

let result = -function() {
    ("Call -function");
    return 1;
}();

(result); // Output -1

Analysis:

• The return value of the function is1。
• -1It is the negative number of the return value.

3. +function

+is a unary addition operator, usually used to explicitly convert values ​​to numbers.

let result = +function() {
    ("Call +function");
    return "123";
}();

(result); // Output 123

Analysis:

• The return value of the function is a string"123"。
• +"123"Convert to numbers123。

4. !function

!is a logical non-operator that inverses the return value.

let result = !function() {
    ("Call !function");
    return 0;
}();

(result); // Output true

Analysis:

• The return value of the function is0。
• !0The result istrue。

5. void function

voidOperators are used to ignore the return value of an expression.

let result = void function() {
    ("Call void function");
    return 1;
}();

(result); // Output undefined

Analysis:

• voidForced returnundefined, ignores the actual return value of the function.

6. functionBrackets before

Brackets are the most common way of calling IIFE, ensuring that functions are interpreted as expressions.

let result = (function() {
    ("Call (function)");
    return 42;
})();

(result); // Output 42

Analysis:

• In brackets explicitly tell the parser that this is an expression, execute and return42。

Comparison of different calling methods

See the differences in these calling methods with a comprehensive example:

let fn = function() {
    return 5;
};

(~fn()); // Output -6(-fn()); // Output -5(+fn()); // Output 5(!fn()); // Output false(void fn()); // Output undefined

Practical application scenarios

1. Modular development:Special calling methods are often used in building tools or libraries to create isolated scopes to avoid global variable contamination.
2. Simplified logic:When dealing with Boolean logic or code that needs to be executed immediately, use!functionor~functionThe code can be significantly simplified.
3. Specific conversion: +functionCommonly used to ensure that the return value is a number.

Summarize

These special function calls fully reflect the flexibility of the JavaScript language. Although ordinary calls are sufficient in most scenarios, these variants can lead to higher code simplicity and readability in certain specific needs.

I hope this article can help you better understand and master these special JavaScript function calls. If you have other interesting uses, please leave a message to share!

This is the article about the differences and applications of 6 variant functions in JavaScript. For more relevant variant functions in JavaScript, please search for my previous articles or continue browsing the related articles below. I hope you will support me in the future!