Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Alex Stephens
Alex Stephens
13,342 Points

Understanding the logical operator !

I have been trying to understand how this logical operator ! is used and works world like any help if someone can explain it a bit more to me so am understanding it clearly

var somevalue = "Code";
var noNumValue = 0;

if(!someValue) {
  document.write("This will return false");
} else {
  document.write("Error test"); // SomeValue as returned false because it as a value
}

// The if statement will return true because it as 0 or null value  
if(! noNumValue) {
  document.write("Hello world!!"); // This if 
} else {
 document.write("Test");
}

The if statement will return true because it as 0 or null value and the other if statement will return false because it as a value how does this work then ? any help would be great to understand.

2 Answers

Martin Wildfeuer
Martin Wildfeuer
Courses Plus Student 11,071 Points

I think you do understand the concept correctly. Let me try to sum it up, anyhow:

The logical operator ! takes a boolean value (true or false) and turns it into its´ opposite, that is, it negates the boolean value. Consider these examples:

var a = true // true
var b = false // false
var c = !true // false
var d = !false // true
var e = !!true // true
var f = !a // false

An if clause always checks if an expression is true or false and "branches" out accordingly:

// Boolean true is true, of course
if(true) {
   // Got here
}

// Boolean false is false, of course
if(false) {
   // Won't end up here... 
} else {
  // ...but here
}

// Comparing values
if(1 == 1) {
    // Got here
}

// Note you can also use ! for comparison
if (1 != 1) {
    // Won't get here
}

I guess what it really comes down to is:

When is a value considered falsy and when truthy?

The following values are always falsy

  • false
  • 0 (zero)
  • "" (empty string)
  • null
  • undefined
  • NaN (a special Number value meaning Not-a-Number!)

All other values are truthy, including "0" (zero in quotes), "false" (false in quotes), empty functions, empty arrays, and empty objects.

The above was copy/pasted from http://www.sitepoint.com/javascript-truthy-falsy/.

That's why the following works :

var noNumValue = 0;

if(! noNumValue) {
  document.write("Hello world!!");
} else {
 document.write("Test");
}

0 is considered falsy, as we negate it it becomes true within the if clause, thus we end up writing "Hello world!!".

There are way more examples out there, there's quite a good blog post about this topic here.

Hope that helps! :)

Alex Stephens
Alex Stephens
13,342 Points
Alex Stephens
Alex Stephens
13,342 Points

Thanks that as help me understand they way it works a lot more now thanks for your help of explaining it.

Martin Wildfeuer
Martin Wildfeuer
Courses Plus Student 11,071 Points

You are welcome! Glad I could help :)