たとえば、data.value
が定義済みかどうかを判定するには
if (typeof (data) !== 'undefined' && typeof (data.value) !== 'undefined') {
console.log('defined:' + data.value);
}
という方法があると思いますが、もっと簡潔に記述する方法はないでしょうか?
質問内容が「変数が定義済みか」なのか「プロパティが定義済みか」なのか、判断に迷うところですが、両方の観点から回答します。
if (typeof (data) !== 'undefined' && typeof (data.value) !== 'undefined') { console.log('defined:' + data.value); }
こちらのコードは data === null
の際に期待通りに動作しません。
var data = null;
typeof (data.value) !== 'undefined'; // TypeError: Cannot read property 'value' of null
Null型、Undefined型にはプリミティブラッパーオブジェクトが存在せず、プロパティを持つことが出来ません。
ご掲示のようなプロトタイプチェーンを含めてプロパティ存在判定を行う場合はin演算子を使いますが、プロパティを持てないUndefined型,Null型は例外とします。
'use strict';
function hasProperty (object, propertyName) {
return object != null && propertyName in Object(object);
}
console.log(hasProperty({a: 1}, 'a')); // true
console.log(hasProperty({a: undefined}, 'a')); // true
console.log(hasProperty('', 'split')); // true
console.log(hasProperty(Object.create(null), 'a')); // false
console.log(hasProperty(null, 'a')); // false
console.log(hasProperty(undefined, 'a')); // false
console.log(hasProperty(data, 'a')); // ReferenceError: data is not defined
先のコードで分かるように、オブジェクトを格納した変数が未定義である場合は ReferenceError となってしまいます。
ReferenceError
を回避する為には typeof
演算子を使用する必要がありますが、typeof
演算子を関数化しても関数呼び出し時点で ReferenceError
が発生してしまいます。
未定義変数に対応するには、関数呼び出し前に typeof
演算子を使用する必要があります。
'use strict';
function hasProperty (object, propertyName) {
return object != null && propertyName in Object(object);
}
console.log(typeof data !== 'undefined' && hasProperty(data, 'a')); // false
Re: jirolabo さん
継承されたプロパティを除いてよいのであればhasOwnPropertyをつかってみてはどうでしょう
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty
こんなかんじではいかがでしょうか?
var data = {};
function checkObject(){
if (typeof (data) !== 'undefined' && typeof (data.value) !== 'undefined') {
console.log('(Default)defined:' + data.value);
}
if ('value' in data) {
console.log('(object in)defined:' + data.value);
}
if ( data.hasOwnProperty('value') ){
console.log('(hasOwnProperty)defined:' + data.value);
}
}
function setValue(){ data.value = 'test data'; }
function clearValue(){ delete data.value; }
<button onclick="checkObject();">check</button><br />
<button onclick="setValue();">set value</button><br />
<button onclick="clearValue();">clear value</button>