Not condition in javascript for number

Question

I came across a condition which made me strange. I am working on React in that I have given a condition on a render method like this:

 if (!this.props.allYearData || !this.props.Growth)
      return <Loading />;

However, my page always shows the loading symbol. I console data what I have given in if condition and both data was in define state, but my Growth was showing 0 value., so I commented out this.props.Growth and my page loaded. So I am just wondering why JavasSript didn't consider 0 as a defined value? I always has impression that ! means undefined. Can someone explain this?

couple of good reads. stackoverflow.com/a/3390426/2315280 stackoverflow.com/a/19839953/2315280 — bennygenel
– bennygenel, Commented Sep 21, 2017 at 17:23

Sumner Evans · Accepted Answer · 2017-09-21 17:49:22Z

3

0 is falsy. ! is a negation operator. Thus !0 is going to be "not falsy" or truthy. Truthy values in an if statement condition result in the if block will be evaluated.

Details

See MDN for more information on Truthy/Falsy.

Here are a few examples:

true     // truthy
false    // falsy
!true    // falsy (negation operator, it says "opposite of")
!false   // truthy
0        // falsy (this is because booleans are represented as 0 and 1 in binary,
         //        0 being false)
!0       // truthy
undefined // falsy
!undefined // truthy

edited Sep 21, 2017 at 17:49

answered Sep 21, 2017 at 17:14

Sumner Evans

9,2055 gold badges32 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

LowCool Over a year ago

can you please bit elaborate it?

kba Over a year ago

Putting ! in front of something "negates" it, i.e. makes it "the opposite". If you have something that is true, putting an ! in front of it will make it ?false: !true === false, for instance. 0` is considered false, so if you put ! in front of something false, it becomes true.

Surreal Dreams Over a year ago

JavaScript will evaluate a number of things to false - The number 0, an empty string, NaN, and undefined will all evaluate to false. negating a falsey value results in true. It's best to be careful about how you evaluate values because these so called "falsey" values (values that are not "false" but evaluate to false) can cause unexpected results. A more specific test will often prevent this.

bryan60 · Accepted Answer · 2017-09-21 17:22:10Z

2

Your impression of the ! operator is fairly off in JS (and most other languages). It doesn't mean undefined, it generally always means "not", so:

if (!condition)

means "if condition is not true"

false, undefined, null, 0 and an empty string like '' will all return "falsey" in javascript if used in a conditional operator like if, while everything else will return "truthy". This is a fairly standard practice in most loosely typed languages, you find similar behavior in python, though one important difference is that in JS, an empty array is NOT falsey, whereas in python it is.

If you ONLY want to know if the value is not undefined, it's simple:

 if (this.props.allYearData !== undefined || this.props.Growth !== undefined)

edited Sep 21, 2017 at 17:22

answered Sep 21, 2017 at 17:16

bryan60

29.5k5 gold badges56 silver badges71 bronze badges

Collectives™ on Stack Overflow

Not condition in javascript for number

2 Answers 2

Details

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Details

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related