What does the "!" mean in `state = !state;` in JavaScript

Question

Hello I have two questions I pulled this script from the jQuery UI site, here is the link to the full code http://jqueryui.com/animate/

1) What is the purpose of the var = state? Could you just use the boolean true in the if statement instead?

2) Just after the if/else statement you can see var = !state. What is the purpose of this and what does the ! mean?

<script>
  $(function() {
    var state = true;
    $( "#button" ).click(function() {
      if ( state ) {
        $( "#effect" ).animate({
          backgroundColor: "#aa0000",
          color: "#fff",
          width: 500
        }, 1000 );
      } else {
        $( "#effect" ).animate({
          backgroundColor: "#fff",
          color: "#000",
          width: 240
        }, 1000 );
      }
      state = !state;
    });
  });
  </script>

score 3 · Answer 1 · answered Dec 12 '14 at 04:15

3

It means 'not'. If x = !false, then x is true. If x = !true, then x is false.

answered Dec 12 '14 at 04:15

Madbreaks

19,094
7
58
72

StuartLC · Accepted Answer · 2014-12-13T08:17:21.540

The not (!) operator in javascript on a boolean toggles the state between the bool values true and false, so:

state = !state;

has the effect that if state was true, it is now false, and vice versa. To answer your first question:

var state = true;

Means that initial state starts off at true. Javascript variables like state are mutable, and the value of state will be changed as per the above toggle, which is triggered by each click of a button.

To put it all together, with comments:

// Set the initial visual state
var state = true;
// jQuery handler for each button click
$( "#button" ).click(function() {
  if ( state ) {
    // Visual effects when state is true
  } else {
    // Visual effects when state is false
  }
  // Now change the visual state, (which will be applied in the next click)
  state = !state;
});

Interestingly, the state is changed only after the new visual status is applied, meaning that the display update lags the state.

Thanks a lot Stuart very clear explanation and thanks for the example! — Phed, Dec 15 '14 at 05:21

score 0 · Answer 3 · answered Dec 12 '14 at 04:30

It simply means "NOT". Here's a few examples of why you would use it:

function check() {

  if (!document.getElementById('text').value) {
    // if the input is empty, (NOT have a value) then alert the user
    alert('You did not enter text.');
  }
}

<input type="text" id="text" />
<button onclick="check()">Check if the input is emtpy.</button>

function check(){
  
  if (document.getElementById('number').value != 22){
    // != is the opposite of ==
    alert('Yay!  You didn\'t pick number 22!');
    }
  
  }

Please don't enter the number 22:
<input type="number" id="number" />
<button onclick="check()">Check number</button>

score 0 · Answer 4 · answered Dec 12 '14 at 04:31

1)

var state=true

is a variable which hold initially true so when click function execute if block will execute, latter on state convert to reverse value i.e if true then false vice versa. no you can not use the boolean true because in this case always if block execute.

2) The not (!) operator in javascript on a boolean toggles the state between the bool values true and false,

What does the "!" mean in `state = !state;` in JavaScript

4 Answers4