1

I am using a functional component to print out some data in React using a basic if statement

import React from 'react'

export default function Weather (props) {
   let obj = props.data
   if(obj === undefined || {}) {
    console.log(obj) <---returns desired object
    return <div>Enter in a city, zipcode, or address</div>
   } else {
       console.log(obj) <-- returns undefined
        return<div>
               <p>{obj.minutely.summary}</p>
               <p>{obj.currently.temperature}</p>
               <p>{obj.currently.humidity}</p>
               <p>{obj.currently.windSpeed}</p>
               <p>{obj.currently.uvIndex}</p>
               <p>{obj.currently.precipProbability}</p>
               </div>

              }
           }

The logic of the if statement is as such: if the data is undefined print out directions to enter an address, otherwise print out the data.

Confusingly enough, what is happening is that the if statement appears to be ignoring the conditional, because 

if(obj === undefined || {}) {
    console.log(obj)
    return <div>Enter in a city, zipcode, or address</div>
}

this console.log returns all my data even though its only supposed to run if the object is undefined.

The second if statement doesn't even print out. I've tried switching the two, so that it looks like so:

if(obj !== undefined || {}) {
   return<div>
        <p>{obj.minutely.summary}</p>
        <p>{obj.currently.temperature}</p>
        <p>{obj.currently.humidity}</p>
        <p>{obj.currently.windSpeed}</p>
        <p>{obj.currently.uvIndex}</p>
        <p>{obj.currently.precipProbability}</p>
        </div>
 } else {
   return <div>Enter in a city, zipcode, or address</div>

 }

However, because it is trying to look for an object that has not yet been set it still stops on the first if statement and rings as undefined(although that is expected)

Any suggestions?

Lullaby
  • 97
  • 2
  • 11

3 Answers3

3
if(obj === undefined || {}) {
  ...
} else { ...

is always true because {} is a truthy value.

I think you meant:

if(obj === undefined || obj === {}) {
  ...
} else { ...

but still...

> {} === {}
false

In order to check whether that object is empty:

if(obj === undefined || Object.getOwnPropertyNames(obj).length === 0){
  ...
} else { ...
jshawl
  • 2,828
  • 2
  • 19
  • 31
2

This comes down to operator precedence in JS, together with how the "or" operator || actually works.

Firstly, the === operator is more precedent that || - see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence. So your if statement is parsed as if ((obj === undefined) || {}) - which I suspect is already opposite to how you wanted it interpreted. But that's not the only thing.

obj === undefined is obviously going to come out as false (only undefined is === to undefined, and I presume your props.data has actually been passed in) - so what's being evaluated is (the coercion to Boolean of) the empty object {}. And that is true, because all objects, even the empty one, are truthy in JS.

So that's why your console.log statement is always getting executed, and always printing out the full props.data object.

What you probably meant to check is: if ((obj === undefined) || (obj === {}) ). The problem with this is that this will now always be false (assuming you do actually pass an object as props.data), because of how object equality comparisons work in JS. (Using == won't help here either, since it behaves identically to === if both operands are objects.)

So what you really want to do is to check if obj is an empty object or not, and unfortunately there's no straightforward way to do this. But this has of course been asked previously on SO - eg. here: How do I test for an empty JavaScript object?

Robin Zigmond
  • 14,041
  • 2
  • 16
  • 29
1

Do check like below

if(typeof obj === 'undefined') {
Hemadri Dasari
  • 23,970
  • 25
  • 87
  • 133