Checking 'undefined' or 'null' of any Object

Question

I am working on Angular project and time to time I used to have check undefined or null over Object or it's properties. Normally I use lodash _.isUndefined() see example below:

this.selectedItem.filter(i => {
    if(_.isUndefined(i.id)) {
      this.selectedItem.pop();
    }
})

I couldn't see any problem with it. But I had discussion with my colleague during review of above code. He was telling me that if i gets undefined before the if statement then it will throw the exception. Instead he suggested me to always check i or i.id like this:

if(!!i && !!i.id) {
      this.selectedItem.pop();
}

I am convinced what he was trying to say unlike his way of checking undefined in above code. But then I was thinking what is the purpose of lodash _.isUndefined?

Could anyone please let me know what is the best or clean way to do it. Because for me !!i && !!i.id is not readable at all.

Many thanks in advance.

Solution 1

You can use _.isNil() to detect undefined or null. Since you're using Array.filter(), you want to return the results of !_.isNil(). Since i is supposed to be an object, you can use !_.isNil(i && i.id).

Note: you are using Array.filter() as Array.forEach(). The callback of Array.filter() should return a boolean, and the result of the filter is a new array.

const selectedItem = [
  undefined,
  {},
  { id: 5 },
  undefined,
  { id: 7 },
];

const result = selectedItem.filter(i => !_.isNil(i?.id));

console.log(result);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>

You can also use _.reject() and save the need to add !:

const selectedItem = [
  undefined,
  {},
  { id: 5 },
  undefined,
  { id: 7 },
];

const result = _.reject(selectedItem, i => _.isNil(i?.id));

console.log(result);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>

Solution 2

Use typeof i.id === 'undefined' to check for undefined and i.id === null to check for null.

You could write your own helper functions to wrap any logic like what LoDash has. The condition with !!i && !!i.id is only looking for falsy values (empty string, 0, etc), not only null or undefined.

Solution 3

Referring to a variable which has undefined as it's value won't throw any error. You get a ReferenceError for referring to variable that is not defined:

> i
Uncaught ReferenceError: i is not defined

If you pass a not-defined variable to a function a ReferenceError is thrown and the function won't be executed.

> _.isUndefined(i)
Uncaught ReferenceError: i is not defined

typeof operator should be used for safely checking whether a variable is defined or not:

> typeof i
'undefined'

In your code the i is defined (it's a function argument) so by referring to it you won't get any ReferenceError. The code will throw a TypeError when i is defined, has undefined value and you are treating it as an object:

> var i = undefined; i.id
Uncaught TypeError: Cannot read property 'id' of undefined

Solution 4

You could check for i and if it is not truthy or if the property is undefined or null, then do something.

if (!i || i.id === undefined || i.id === null) {
    this.selectedItem.pop();
}

Solution 5

Your friend is right. When you do, _.isUndefined(i.id) you're assuming i to not to be undefined. You're assuming i is an object which will have an id property which you're checking if it is falsey or not.

What happens when the variable i itself is undefined? So you will end up undefined.id which is an error. Therefore you could simply do this

if(i && i.id) {
  // You're good to go
}

The above will check for all falsey values, 0 and "" included. So if you want to be very specific, then you'll have to check the types of both using typeof operator.

View more solutions