javascript tutorial - [Solved-5 Solutions] Exclamation mark - javascript - java script - javascript array
Problem:
What does the exclamation mark do before the function?
Solution 1:
function foo() {}
click below button to copy the code. By JavaScript tutorial team
- Note that there's no semicolon: this is just a function declaration. we would need an invocation,
foo(), to actually run the function. - Now, when we add the seemingly innocuous exclamation mark:
!function foo() {}it turns it into an expression. It is now a function expression. - The ! alone doesn't invoke the function, of course, but we can now put () at the end:
!function foo() {}()which has higher precedence than ! and instantly calls the function. - (function(){})();
- Lastly, ! makes the expression return true. This is because by default all IIFE return undefined, which leaves us with
!undefinedwhich istrue. Not particularly useful.
Solution 2:
The function:
function () {}
click below button to copy the code. By JavaScript tutorial team
- returns nothing (or undefined).
- Sometimes we want to call a function right as we create it. We might be tempted to try this:
function () {}()
click below button to copy the code. By JavaScript tutorial team
- but it results in a SyntaxError.
- Using the ! operator before the function causes it to be treated as an expression, so we can call it:
!function () {}()
click below button to copy the code. By JavaScript tutorial team
This will also return the boolean opposite of the return value of the function, in this case true, because !undefined is true. If you want the actual return value to be the result of the call, then try doing it this way
Solution 3:
Generally idea for using this technique on separate files (aka modules) which later get concatenated. Caveat here is that files supposed to be concatenated by tools which put new file at new line (which is anyway common behavior for most of concat tools). In that case using ! will help to avoid error in if previously concatenated module missed trailing semicolon, and yet that will give flexibility to put them in any order with no worry.
!function abc(){}()
!function bca(){}();
click below button to copy the code. By JavaScript tutorial team
Will work same as
!function abc(){}()
;(function bca(){})();
click below button to copy the code. By JavaScript tutorial team
- but saves two characters and arbitrary looks better.
- And by the way any of +,-,~,void operators have same effect, in terms of invoking function, for sure if you have use something to return from that function they would act differently.
abcval = !function abc(){return true;}() // abcval equals false
bcaval = +function bca(){return true;}() // bcaval equals 1
zyxval = -function zyx(){return true;}() // zyxval equals -1
xyzval = ~function xyz(){return true;}() // your guess?
click below button to copy the code. By JavaScript tutorial team
but if you using IIFE patterns for one file one module code separation and using concat tool for optimization (which makes one line one file job), than construction
!function abc(/*no returns*/) {}()
+function bca() {/*no returns*/}()
click below button to copy the code. By JavaScript tutorial team
- Will do safe code execution, same as a very first code sample.
- This one will throw error cause JavaScript ASI will not be able to do its work.
!function abc(/*no returns*/) {}()
(function bca() {/*no returns*/})()
click below button to copy the code. By JavaScript tutorial team
One note regarding unary operators, they would do similar work, but only in case they used not in the first module. So they are not so safe if you do not have total control over the concatenation order.
This works:
!function abc(/*no returns*/) {}()
^function bca() {/*no returns*/}()
click below button to copy the code. By JavaScript tutorial team
This not:
^function abc(/*no returns*/) {}()
!function bca() {/*no returns*/}()
click below button to copy the code. By JavaScript tutorial team
Solution 4:
( function my_function() {} )()
(function add_them(a,b) { return a+b;} )(9,4)
!function a_would_be_function() { alert("Do some junk but inside a function"); }()
click below button to copy the code. By JavaScript tutorial team
Solution 5:
Instead, use the closing parenthesis and the BANG (!) if needed.
(function(){ return false; }());
=> false
!(function(){ return false; }());
=> true
!!(function(){ return false; }());
=> false
!!!(function(){ return false; }());
=> true
click below button to copy the code. By JavaScript tutorial team
Other Operators that work...
+(function(){ return false; }());
=> 0
-(function(){ return false; }());
=> -0
~(function(){ return false; }());
=> -1
click below button to copy the code. By JavaScript tutorial team
Combined Operators...
+!(function(){ return false; }());
=> 1
-!(function(){ return false; }());
=> -1
!+(function(){ return false; }());
=> true
!-(function(){ return false; }());
=> true
~!(function(){ return false; }());
=> -2
~!!(function(){ return false; }());
=> -1
+~(function(){ return false; }());
+> -1