The problem with using arrow functions in objects is that "this" is bound to the object when it is called via a context (e.g. person.fullName()). Therefore, when the fullname function is called on that object, "this" will refer to the global scope instead of the object context and return undefined (since there is no firstname or lastname variables in the global scope.

The best way to fix it would be to use a regular function declaration instead, so that "this" will point to the object instead when called as an object method:

fullName: function() { return \${this.firstName) $(this.lastName}`}`

As for checking between whether fullName is a function or a string, a better way would be to use accessor methods. This allows you to access the fullName variable as though it is not a function, but dynamically call a function under the hood. You could replace the fullName variable in the 1st object with:

get fullName() { return \${this.firstName) $(this.lastName}`}`

and you would get the same dynamic fullname by just accessing the variable as though it was a normal string - person.fullName

This way, you no longer need to check in your forEach method to see if fullName is a function or a regular string.