43

I'm an experienced C++/Java programmer working in Javascript for the first time. I'm using Chrome as the browser.

I've created several Javascript classes with fields and methods. When I read an object's field that doesn't exist (due to a typo on my part), the Javascript runtime doesn't throw an error or exception. Apparently such read fields are 'undefined'. For example:

var foo = new Foo();
foo.bar = 1;
var baz = foo.Bar; // baz is now undefined

I know that I can check for equality against 'undefined' as mentioned in "Detecting an undefined object property in JavaScript", but that seems tedious since I read from object fields often in my code.

Is there any way to force an error or exception to be thrown when I read an undefined property?

And why is an exception thrown when I read an undefined variable (as opposed to undefined object property)?

Improve this question
3
  • Have a look at JavaScript proxies. Commented Nov 12, 2016 at 15:30
  • This won't answer this question (stop reading undefined properties), but if you'd like to prevent accidentally creating a new property by a typo (e.g. if you do foo.barr = 1 this creates a new property barr). So if you'd like to stop that, you can call Object.preventExtensions(foo); and use it together with 'strict mode' - should throw a type error. Commented Oct 24, 2019 at 10:27
  • I would suggest you to have a look at my answer and mark it as accepted if you find it satisfactory. I was having the same problem as well and currently, that's the most straightforward, non-hacky (clean) solution to overcome this problem. Commented Sep 6, 2020 at 19:53

6 Answers 6

Reset to default
33

This can be achieved using ES6 proxies:

function disallowUndefinedProperties(obj) {
    const handler = {
        get(target, property) {
            if (property in target) {
                return target[property];
            }

            throw new Error(`Property '${property}' is not defined`);
        }
    };

    return new Proxy(obj, handler);
}

// example
const obj = { key: 'value' };
const noUndefObj = disallowUndefinedProperties(obj);

console.log(noUndefObj.key);
console.log(noUndefObj.undefinedProperty); // throws exception

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

7 Comments

This has some unfortunate side effects, as it won't work when inspecting the object (e.g., when running through a REPL or using console.log).
zealint (mentionned below) mitigates this issue github.com/Bootstragram/zealit/blob/…
Wow, this is great!
This looks fantastic. Are there any significant drawbacks to this approach?
This is great! If you'd also like to prevent creating new properties by accident, set: Object.preventExtensions(noUndefObj); and use strict mode
|
13

This looks to me like a classic case of trying to shoehorn one language into the paradigms of another - better IMHO to change your coding style to follow how Javascript does things than try to make it conform to C++ concepts and expectations.

That said, if you want to throw an error as you suggest, you'll need to define some sort of custom getProperty function, either on the object you're trying to access or in the global scope. An implementation might look like this:

function getProperty(o, prop) {
    if (o.hasOwnProperty(prop)) return o[prop];
    else throw new ReferenceError('The property ' + prop + 
        ' is not defined on this object');
}

var o = {
    foo: 1,
    bar: false,
    baz: undefined
};

getProperty(o, 'foo'); // 1
getProperty(o, 'bar'); // false
getProperty(o, 'baz'); // undefined
getProperty(o, 'foobar'); 
// ReferenceError: The property baz is not defined on this object

But this is ugly, and now you've got this custom language construct in all of your code, making it less portable (if, for example, you wanted to copy any part of your code into another script, you'd have to copy your new function too) and less legible to other programmers. So I'd really recommend working within the Javascript paradigm and checking for undefined before accessing the properties you need (or setting up your code so that false-y values are expected and don't break things).

As to your second question, why Javascript throws an error for undefined variables but not for undefined object properties, I can't give any better answer than "Because that's what's in the language specification." Objects return undefined for undefined property names, but undefined variable references throw an error.

Improve this answer

8 Comments

You are completely wrong. There is nothing to "shoehorn" here. C structs and C++/C#/Java classes all behave correctly: If you try to read a field that doesn't exist, the compiler will throw an error. This is not some eccentricity of the above languages; it's also simply common sense.
@stackoverflowuser2010 - My opinion is irrelevant here, but clearly the ECMAScript/Javascript designers disagree with you. You might as well claim that Javascript doesn't follow "common sense" because it's loosely typed.
Completly agree with the "shoehorn" term and arguments. However, (specific case here!) in a .net context, you could use T4 technology to autogenerate property accessors (entity auto generation in javascript from edmx file is a good example I think). This way, the code is "less ugly" because this part of the code just becomes a black box and could solve the problem.
This answer is wrong. Consider o = { really: undefined }. getProperty(o, 'really') will throw, but it shouldn't. Instead of doing a !== undefined, consider doing if (prop in o) or if(o.hasOwnProperty(prop)).
At present, I think the best answer is to use either Flow or Typescript to enforce static type safety. These options weren’t really available when I wrote the original answer, but they offer a much better option than what the OP requested - with the right setup, you can see these errors right in your editor, rather than hitting unexpectedly at runtime.
|
10

Is there any way to force an error or exception to be thrown when I read an undefined property?

That's possible using ES6 proxies as has been said in previous responses. I have done the small node module "zealit" to avoid having to implement it every time.

If someone is interested : https://www.npmjs.com/package/zealit

const zealit = require('zealit')

const ref = { foo: true, bar: undefined }
ref.foo // true 
ref.bar // undefined 
ref.baz // undefined 

const zealed = zealit(ref)
zealed.foo // true 
zealed.bar // undefined 
zealed.baz // throws a ReferenceError
Improve this answer

Comments

6

Firefox has an option javascript.options.strict (in about:config). If you enable this, warnings will be logged to the console for many common mistakes, including reading an undefined property, using = instead of == in an if, etc.

(Of course, that's not to say such code is necessarily wrong.)

Improve this answer

Comments

0

Is there any way to force an error or exception to be thrown when I read an undefined property?

In short, no. You can always test for whether or not you ended up with undefined by either comparing to undefined, like you said, or by attempting to access a second level attribute:

s = Foo()

s.bar = 1

s['Bar'] // returns undefined.

s['Bar']['Baz'] // Throws TypeError, s.Bar is undefined.

Additionally, undefined fails in a conditional check, so you can get away with this as a shorthand for the comparison:

if (s['Bar']) {
  // Something here only if s['Bar'] is set.
}

Be aware that this short hand could cause unexpected behavior if s['Bar'] was set, but was a 'Falsey' value, and you were only concerned with whether or not it came back undefined.

Improve this answer

1 Comment

And, as the other answer indicates, the reason you get undefined for missing attributes, but an error for undeclared variables, is due to the JavaScript Language Spec.
0

As of now, the "right" solution to this is to use TypeScript (or another type-checking library such as Flow). Example:

const a = [1,2,3];

if (a.len !== 3) console.log("a's length is not 3!");

On JavaScript, this code will print "a's length is not 3!". The reason is that there is no such property len on arrays (remember that you get the length of an array with a.length, not a.len). Hence, a.len will return undefined and hence, the statement will essentially be equal to:

if (undefined !== 3) console.log("a's length is not 3!");

Since undefined is indeed not equal to 3, the body of the if statement will be run.

However, on TypeScript, you will get the error Property 'len' does not exist on type 'number[]' right on the "compile time" (on your editor, before you even run the code).

Reference

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.