StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Both, accessing a property that isn't defined on an object and a property that contains the primitive <code>undefined</code> value, will return you <code>undefined</code>.</p> <p>For example:</p> <pre><code>var obj = { a: undefined }; obj.a; // undefined obj.b; // undefined </code></pre> <p>The difference is that <code>a</code> is an own property, and <code>b</code> isn't:</p> <pre><code>obj.hasOwnProperty('a'); // true obj.hasOwnProperty('b'); // false </code></pre> <p>In the first case <code>a</code> is an own property, even if it contains <code>undefined</code> as its value. In the second case, <code>b</code> is not an own property, accessing <code>obj.b</code> will look for a property named <code>b</code>, all way up in the prototype chain.</p> <p>When the prototype chain ends (when it reaches an object with a <code>null</code> <code>[[Prototype]]</code>), the property lookup ends and <code>undefined</code> is explicitly returned.</p> <p>You should know that the <a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Object/hasOwnProperty" rel="noreferrer"><code>hasOwnProperty</code></a> method checks only if the property physically exist on the object (<em>own</em> properties), but we have also <em>inherited</em> properties, for that case we can use the <a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Operators/Special_Operators/in_Operator" rel="noreferrer"><code>in</code> operator</a>, for example:</p> <pre><code>function Test () {} Test.prototype.a = 'foo'; // instances of Test will inherit from Test.prototype var obj = new Test(); // { a="foo", b="bar"} obj.b = 'bar'; obj.hasOwnProperty('a'); // false 'a' in obj; // true obj.a; // 'foo' obj.hasOwnProperty('b'); // true </code></pre> <p>As you can see, <code>obj</code> inherits from <code>Test.prototype</code>, and the <code>a</code> property is not an <em>own property</em>, but it is available through the prototype chain. That's why <code>hasOwnProperty</code> returns <code>false</code> and the <code>in</code> operator returns <code>true</code>.</p> <p>You can see how internally properties are resolved by the <a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Object/hasOwnProperty" rel="noreferrer"><code>[[Get]]</code></a> internal operation</p> <p><strong>Notes:</strong></p> <ul> <li>Accessing <code>undefined</code> as an identifier is not considered to be safe on ECMAScript 3 (the most widely implemented version of the language standard), because instead of being a language keyword (such as <code>null</code> for example) is just a property of the global object, and it is writable on this version of the Spec., meaning that if someone replaces its value (e.g. <code>window.undefined = 'LOL';</code>) , it will break your code.</li> </ul> <p>The <a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Operators/Special_Operators/typeof_Operator" rel="noreferrer"><code>typeof</code> operator</a> as @strager mentions can be used instead, for example:</p> <pre><code>if (typeof obj.prop == 'undefined') { /*....*/ } </code></pre> <p>This operator returns always a string (it's safe to use <code>==</code> :), and its value depends of the type of its operand, the possible values are described <a href="http://bclary.com/2004/11/07/#a-11.4.3" rel="noreferrer">here</a>.</p> <p>Another common way to solve this is to declare your own <code>undefined</code> variable, available on the scope of your functions, for example, some libraries use the following pattern:</p> <pre><code>(function(undefined) { // code here })(); </code></pre> <p>The function has an argument named <code>undefined</code>, and it is executed immediately without passing any value to it (the last pair or parens make the invocation).</p> <p>Maybe is worth mentioning that the <a href="http://ecma262-5.com/ELS5_HTML.htm#Section_15.1.1.3" rel="noreferrer"><code>undefined</code> global property</a> was finally described on ECMAScript 5 as non-writable (immutable, as well non-enumerable and non-configurable -non deletable-).</p> <ul> <li><p>Using the <code>hasOwnProperty</code> method directly from an object instance is also not considered as <em>safe</em>, because if some object has a property with the same name, the original method will be shadowed. For example:</p> <pre><code>var obj = { hasOwnProperty: function () { /* evil code :) */ } }; </code></pre></li> </ul> <p>If you call:</p> <pre><code> obj.hasOwnProperty('prop'); </code></pre> <p>The method defined on the object will be executed (and you wouldn't want this since you know exactly which method you want to invoke...), because it <em>shadows</em> the one from the <code>Object.prototype</code>, however it can be safely invoked by:</p> <pre><code> Object.prototype.hasOwnProperty.call(obj, 'prop'); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload