What does the exclamation mark do before the function in JavaScript?

The exclamation mark (!) before a function in JavaScript is used to create an Immediately Invoked Function Expression (IIFE). It transforms a function declaration into an expression that can be executed immediately.

How It Works

The ! operator has lower precedence than the parentheses (), so the function executes first, then the ! operator applies to its return value:

!function() {
    console.log("IIFE executed!");
}();

IIFE executed!

Return Value Behavior

Since functions return undefined by default, the ! operator converts this to true:

let result1 = !function() {
    console.log("Function runs");
}();

let result2 = !function() {
    return "hello";
}();

console.log("Result 1:", result1);  // !undefined = true
console.log("Result 2:", result2);  // !"hello" = false

Function runs
Result 1: true
Result 2: false

Alternative IIFE Patterns

There are several ways to create IIFEs. The traditional approach uses parentheses:

// Traditional IIFE with parentheses
(function() {
    console.log("Traditional IIFE");
})();

// Using ! operator
!function() {
    console.log("Using ! operator");
}();

// Other operators work too
+function() {
    console.log("Using + operator");
}();

Traditional IIFE
Using ! operator
Using + operator

Comparison

Practical Example

The ! pattern is useful when you want to ensure a truthy return value:

let initialized = !function() {
    // Initialization code
    console.log("App initialized");
    // Returns undefined by default
}();

console.log("Initialization successful:", initialized);

App initialized
Initialization successful: true

Conclusion

The ! operator before a function creates an IIFE and converts the return value to a boolean. While (function(){})() is more common, !function(){}() provides a shorter syntax when you need a truthy result.