Conditional statement for testing an empty object not executing

Question

I'm trying to show a success feedback once the users are registered without error. There is an errors redux reducer object which stores errors that come from the back end. And the if statement is supposed to give the success feedback if the errors object is empty, it displays the errors if there are any, it also registers the users if there is none, but it doesn't seem to execute the if(props.errors === {}) block.

  function onSubmit(e) {
    e.preventDefault();
    const newUser = {
      fname: fname,
      lname: lname,
      phone: phone,
      email: email,
      password: password,
    };
    dispatch(register(newUser));
    if (props.errors === {}) { //This block is not executed
      setSnackOpen(true);
      setFname('');
      setLname('');
      setEmail('');
      setPhone('');
      setPassword('');
    }
    console.log('errors :' + props.errors);  //logs 'errors : [object, object]'
  }

The errors reducer:

import { GET_ERRORS } from '../actionTypes/actionTypes';

const initialState = {
};

export const errorReducer = (state = initialState, action) => {
  switch (action.type) {
    case GET_ERRORS:
      return action.payload
    default:
      return initialState;
  }
};

`props.errors` isn't the same as a newly created blank object. `===` tests identity. You need this: https://stackoverflow.com/questions/2673121/how-to-check-if-object-has-any-properties-in-javascript — , Jun 20 '22 at 11:31

score 1 · Accepted Answer · answered Jun 20 '22 at 11:33

Because you are comparing props.errors with {} new empty object so even though both are empty they are pointing to different memory location so if condition will return false for the statement if(props.errors === {})

You can check length of the props.errors like

if(!Object.keys(props.errors).length)

Youssouf Oumar · Answer 2 · 2022-06-20T12:42:00.200

This if (props.errors === {}) would never be true, as it's actually comparing their references, which are not the same.

And I would do as below, and the advantage is that it would work both for when there isn't any key, as well as for when there are some, but their values are empty.

if (!Object.keys(props.errors).some((k) => props.errors[k]))

It's helpful for when you consider {firstNameError:"", lastNameError:"" } and {} as empty. See the snippet below:

const objOne={firstNameError:"", lastNameError:"" };
const objTwo= {};
if(!Object.keys(objOne).length){
  console.log("First console prints empty")
}

if (!Object.keys(objOne).some((k) =>  objOne[k])){
    console.log("Second console prints empty")
}


if(!Object.keys(objTwo).length){
  console.log("First console prints empty")
}

if (!Object.keys(objTwo).some((k) =>  objTwo[k])){
    console.log("Second console prints empty")
}

score 1 · Answer 3 · answered Jun 20 '22 at 12:15

Every time you declare a new object(empty or not), it will be created with a new reference. you can run below code in you dev console. all of them will give the result false. Because obj1 is a different empty object than obj2.

var obj1 = {}
var obj2 = {}
console.log(obj1 === {})
console.log(obj2 === {})
console.log(obj1 === obj2)
false
false
false

One way to check if an object is empty is this:

Object.keys(obj1)

This will give you an array of key values from object. so, you can check the length of the array.

const keysArray = Object.keys(obj1)
if (keysArray.length === 0){
// do something
}

Conditional statement for testing an empty object not executing

3 Answers3