Exclamation Mark Before Function in JavaScript: Complete Guide

The exclamation mark before a function in JavaScript converts a function declaration into a function expression, enabling it to be immediately invoked using the () syntax. This technique is commonly used to create Immediately Invoked Function Expressions (IIFEs) while avoiding syntax errors that can occur when trying to immediately invoke a function declaration.

Contents

• What is the Exclamation Mark’s Purpose?
• How Does It Work Technically?
• Comparison with Other IIFE Patterns
• Practical Use Cases
• Benefits and Considerations

What is the Exclamation Mark’s Purpose?

The exclamation mark (!) before a function in JavaScript serves the primary purpose of converting a function declaration into a function expression. This transformation is crucial because JavaScript has specific rules about when functions can be immediately invoked.

In the code snippet you provided:

!function () {}();

The exclamation mark transforms function () {} from a function declaration (which cannot be immediately invoked) into a function expression (which can be immediately invoked). This technique allows developers to create self-executing functions without needing to wrap the function in parentheses first.

According to Digital Fortress, the exclamation mark “converts the function into an expression” and “enables the developer to immediately invoke the function using the () syntax.”

How Does It Work Technically?

Understanding the technical mechanism requires looking at JavaScript’s parsing rules:

1. Function Declaration vs Expression: JavaScript treats function() {} as a function declaration when it appears in a statement position. Function declarations cannot be immediately followed by parentheses () because it creates a syntax error.

2. Expression Conversion: The exclamation mark is a unary operator that forces what follows to be treated as an expression. When JavaScript encounters !function() {}, it interprets function() {} as a function expression rather than a declaration.

3. Immediate Invocation: After the function is converted to an expression, the trailing () immediately invoke it. The function executes right where it’s defined, and the ! operator also applies to the result (performing a logical negation).

4. Return Value: By default, IIFEs return undefined. When you use the exclamation mark, !undefined evaluates to true, making the overall expression return true.

Technical Note: The exclamation mark doesn’t invoke the function by itself - it’s the parentheses () at the end that perform the invocation. The parentheses have higher precedence than the exclamation mark.

As Microsoft Award MVP on Wikitechy explains: “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.”

Comparison with Other IIFE Patterns

The exclamation mark is just one of several patterns used to create IIFEs. Here’s how it compares to other common approaches:

Pattern 1: Parentheses Wrapping

(function() {
    // code here
})();

Pattern 2: Exclamation Mark

!function() {
    // code here
}();

Pattern 3: Unary Plus

+function() {
    // code here
}();

Pattern 4: Void Operator

void function() {
    // code here
}();

Each approach has its advantages:

• Parentheses: Most common and explicit, but requires ensuring the previous statement ends with a semicolon
• Exclamation Mark: Less common, avoids semicolon issues, and returns true instead of undefined
• Unary Plus: Similar to exclamation mark, but returns a number instead of boolean
• Void Operator: Explicitly discards the return value, useful when you don’t want any return value

As Michael Zanggl notes: “The intent is also clearer (brackets are all over a script but exclamation point is rare. Further, this avoids the issue of making sure the previous line has a semicolon.”

Practical Use Cases

The exclamation mark pattern is particularly useful in several scenarios:

1. Avoiding Semicolon Dependencies

var x = 5
!function() {
    console.log(x); // Works without semicolon after x = 5
}();

2. Third-Party Script Integration

!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];
if(!d.getElementById(id)){js=d.createElement(s);js.id=id;
js.src='//platform.twitter.com/widgets.js';
fjs.parentNode.insertBefore(js,fjs);
}}(document,'script','twitter-wjs');

This pattern is commonly seen in third-party scripts like social media widgets, where the function is immediately invoked to set up integration.

3. Scope Isolation

!function() {
    var privateVariable = "I'm private";
    console.log(privateVariable); // Works
}();
console.log(privateVariable); // ReferenceError: privateVariable is not defined

The GeeksforGeeks explains that IIFEs are useful “to put functions and variables in the scope of a module, so they don’t fill the global scope.”

4. Closure Creation

!function() {
    var counter = 0;
    return function() {
        return ++counter;
    };
}()(); // Returns 1

Benefits and Considerations

Benefits of Using the Exclamation Mark Pattern:

1. Semicolon Independence: Unlike parentheses, the exclamation mark pattern doesn’t require a semicolon before it, making it more resilient when concatenated with other code.

2. Explicit Return Value: The pattern naturally returns true (since !undefined is true), which can be useful in boolean contexts.

3. Visual Distinction: It’s visually distinct from other code patterns, making it easier to spot IIFEs in codebases.

4. Avoids Syntax Errors: It prevents the common error of trying to immediately invoke a function declaration.

Considerations:

1. Readability: Some developers find the exclamation mark less readable than parentheses because it’s not as commonly used.

2. Return Value Confusion: The automatic return of true might be unexpected if developers aren’t aware of this behavior.

3. Debugging: Stack traces might be slightly more difficult to read with the exclamation mark pattern.

According to Stack Overflow, “The exclamation mark merely indicates that you don’t care about the returned value.” This makes it particularly useful when you just want to execute code immediately for side effects.

Conclusion

The exclamation mark before a function in JavaScript serves as a concise and effective way to create Immediately Invoked Function Expressions. It converts function declarations into function expressions, enabling immediate invocation while avoiding syntax errors. This pattern offers several advantages including semicolon independence and explicit boolean return values, making it a valuable tool in JavaScript development.

Key takeaways:

• The exclamation mark transforms function declarations into expressions
• It enables immediate function invocation with () syntax
• The pattern returns true due to !undefined evaluation
• It’s particularly useful for avoiding semicolon dependencies
• It’s one of several valid approaches to creating IIFEs

For developers working with JavaScript, understanding this pattern and its alternatives provides flexibility in writing clean, efficient, and error-resistant code.

Sources

1. What does the exclamation mark do before the function? - Stack Overflow
2. Exclamation mark before a function aka IIFE - Digital Fortress
3. What does the exclamation mark do before the function in JavaScript? - Tutorialspoint
4. JavaScript: Exclamation Before Function - Xah Lee
5. IIFE - Mozilla Developer Network
6. Immediately Invoked Function Expressions (IIFE) in JavaScript - GeeksforGeeks
7. IIFEs in JavaScript and how to avoid this common mistake - Michael Zanggl
8. What is an IIFE (Immediately Invoked Function Expression) in JavaScript? - ExplainThis