javascriptでDOMを取得した際のundefiendの比較方法について

Question

e.target.valueでDOMを取得して値が取れるか取れないかで比較をしたいです。

今回の場合は値が取れなかった場合はundefinedで返ってきます。

この場合条件分岐する際は

e.target.value == undefined

e.target.value == null

e.target.value === 'undefined'

で比較が出来ると思いますが、一般的にどちらを使って比較するのでしょうか？

個人的に 文字列のundefinedを比較するのも何か違うと思い、nullでの比較の方が良さそうな気がします。
(undefined型で比較するのは再代入が出来るので良くないと聞きました。)

実際に使うとしたらどちらが良いなどというのはあるのでしょうか？

Comments

[m.ts10806]

どこで？　>undefined型で比較するのは再代入が出来るので良くないと聞きました

[tomuziso]

ネット上の記事などでそういった記載があったので、このように書きました。

Answer 1

typeof e.target.value === 'undefined'

Comments

[tomuziso]

回答ありがとうございます。
type of で文字列を返して文字列のundefinedと比較しているのがポピュラーなようですね。
ありがとうございました！

Answer 2

プロパティの有無をチェック

e.target.valueでDOMを取得して値が取れるか取れないかで比較をしたいです。

今回の場合は値が取れなかった場合はundefinedで返ってきます。

状況的にプロパティの有無がトリガーなので、次のように書きます。

'value' in event.target

次の2つを明確に区別して下さい。

• (A) プロパティが存在しない
• (B) プロパティが存在し、undefinedが代入されている

undefined 値が格納されたプロパティ存在チェック

in 演算子、typeof 演算子でプロパティ有無をチェックするコードを書いた場合、

var target1 = {}, target2 = {value: undefined};

console.log('value' in target1); // false
console.log(typeof target1.value !== 'undefined'); // false
console.log('value' in target2); // true
console.log(typeof target2.value !== 'undefined'); // false

in 演算子は undefined 値が格納されたプロパティを正しく認識しますが、``typeof` 演算子は「プロパティが存在しない」と誤認します。

Re: tomuziso さん

Comments

[tomuziso]

回答ありがとうございます。
おっしゃる通り、プロパティの有無で条件を分けようとしています。
'value' in event.target　だとtrue or falseで返ってくるので簡単に条件分岐が出来る、ということでしょうか。確かにe.target.valueだと文字列かundefinedなのでその分、ややこしくなっている感じはありました。

プロパティの区別は曖昧でした。勉強になります。

[think49]

いえ、「event.target.value がundefoned値を返す」と「event.target がvalueプロパティを持っていない 」は等価ではない、ということです。

[tomuziso]

「event.targe.value」でundefinedが返ってくるということはてっきりundefinedという文字をそのまま解釈して「プロパティ自体が存在しない＝だからundefinedが返ってくる」と思っておりましたが、そうではないんですね・・・

[think49]

回答を読んで頂けているでしょうか。プロパティが存在しない場合にプロパティアクセス演算子はundefinedを返しますが、undefinedが代入されたプロパティでもundefinedを返しますよね。
それを区別して下さい、と指摘しています。

親記事にコードを追記しました。
(今、検証環境がないので、typoがありましたら、ご容赦下さい。)

[tomuziso]

回答確認しました。
ようやく理解しました。
type of を使うとvalueプロパティを持っていない場合でもtypeof target2.value == 'undefinedが trueになってしまい、あたかもvalueが存在している({value: undefined}と{}を同等の比較をしてしまう)と勘違いしていまう、ということですね。

一方 inを使うとプロパティの有無を正しくチェックしてくれるので今回のようなケースを判断するにあたって間違いがなくなると。
例を出していただいてよく理解することが出来ました！

Answer 3

undefined型で比較するのは再代入が出来るので良くないと聞きました。

現状としては、ほぼ問題ありません。どうしても気になるなら=== void 0（voidは演算子なので上書き不能）とする手もあります。

---

ES5以降では、グローバルのundefinedは再代入不可となっていますので、つねに正しいundefined値です。ローカルではundefinedに別な値を代入もできますが、字句的に外側の関数に書かないといけないので、そんなことを書くほうが悪いで片付けられるレベルの話です。

Comments

[tomuziso]

回答ありがとうございました。
過去のネットの情報で検索してみるとそういった記述が見られますが、すでにもう気にしなくていいレベルの話なんですね。

ありがとうございました！