What Does an Exclamation Mark Before a Variable Mean in JavaScript

What does an exclamation mark before a variable mean in JavaScript

! is the logical not operator in JavaScript.

Formally

!expression is read as:

• Take expression and evaluate it. In your case that's variable.onsubmit
• Case the result of that evaluation and convert it to a boolean. In your case since onsubmit is likely a function, it means - if the function is null or undefined - return false, otherwise return true.
• If that evaluation is true, return false. Otherwise return true.

In your case

In your case !variable.onsubmit means return true if there isn't a function defined (and thus is falsy), otherwise return false (since there is a function defined).

Simply put - !variable means take the truth value of variable and negate it.

Thus, if (!variable) { will enter the if clause if variable is false (or coerces to false)

In total

if (!variable.onsubmit || (variable.onsubmit() != false)) {

Means - check if variable.onsubmit is defined and truthy (thus true), then it checks if calling onsubmit returns a result that coerces to true. In a short line it checks if there is no onsubmit or it returns true.

Next time, how do I find this myself?

• MDN has a list of operators here.
• The language specification specifies such operators, though being the official specification it does contain some jargon which might be hard to understand.

Why does an exclamation mark before a variable return 'true' if the variable value is zero?

! is known as the logical NOT operator. It reverses the boolean result of the operand (or condition)

0 is also considered as the boolean false, so when you use !variable you are using the logical operator and saying it to change the value of the variable to its opposite, that in boolean is true

0 == false == !1 == !true

1 == true == !0 == !false

in Javascript are considered false:
false, null, undefined, "", 0, NaN

are considered true:
true, 1, -0, "false". <- the last one is a not empty string, so its true

if( false || null || undefined || "" || 0 || NaN) //never enter
if( true && 1 && -1 && "false") //enter

https://developer.mozilla.org/en-US/docs/Glossary/Falsy

What does the exclamation mark do before the function?

JavaScript syntax 101: here is a function declaration:

function foo() {}

Note that there’s no semicolon; this is just a function declaration. You 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 foo() {}() would be a syntax error because you can’t put arguments (()) right after a function declaration.

So what the author is doing is saving a byte per function expression; a more readable way of writing it would be this:

(function(){})();

Lastly, ! makes the expression return a boolean based on the return value of the function. Usually, an immediately invoked function expression (IIFE) doesn’t explicitly return anything, so its return value will be undefined, which leaves us with !undefined which is true. This boolean isn’t used.

What does exclamation point after variable mean in JavaScript?

In TypeScript, a postfix ! removes null and undefined from the type of an expression.

This is useful when you know, for reasons outside TypeScript's inference ability, that a variable that "could" be null or undefined actually isn't.

In Typescript, what is the ! (exclamation mark / bang) operator when dereferencing a member?

That's the non-null assertion operator. It is a way to tell the compiler "this expression cannot be null or undefined here, so don't complain about the possibility of it being null or undefined." Sometimes the type checker is unable to make that determination itself.

It is explained here:

A new ! post-fix expression operator may be used to assert that its operand is non-null and non-undefined in contexts where the type checker is unable to conclude that fact. Specifically, the operation x! produces a value of the type of x with null and undefined excluded. Similar to type assertions of the forms <T>x and x as T, the ! non-null assertion operator is simply removed in the emitted JavaScript code.

I find the use of the term "assert" a bit misleading in that explanation. It is "assert" in the sense that the developer is asserting it, not in the sense that a test is going to be performed. The last line indeed indicates that it results in no JavaScript code being emitted.

What is an exclamation point in JavaScript?

A ! negates an expression.

In your example, if loadDynamicBlock() returned true, the function calling it would return false, and vice-versa: !true == false

It can also be used to create actual booleans from JavaScript's ideas of truthy and falsy.

var a = 5;
!!(a - 5) === false;
!!(a + 5) === true;

What does this exclamation mark mean in Javascript?

This is an example of unnecessary prowess. The code below is exactly the same:

function F() {
    w = true; //w = !0;
    return false //return !1
}

If you are using a good minification tool, which you should in production, clever programming to save a few bytes becomes unnecessary.

Exclamation Mark in type definition

My question is now whether the exclamation mark before a type definition has exactly the same meaning like in a normal context.

No that's actually not the same thing, in this context it does something different. Normally when you declare a member (which doesnt' include undefined in it's type) it has to be initialized directly or in the constructor. If you add ! after the name, TypeScript will ignore this and not show an error if you don't immediately initialize it:

class Foo {
  foo: string; // error: Property 'foo' has no initializer and is not definitely assigned in the constructor.
  bar!: string; // no error
}

The same thing actually applies to local variables as well:

let foo: string;
let bar!: string;

console.log(foo); // error: Variable 'foo' is used before being assigned.
console.log(bar); // no error

Playground

---

Related Topics