＜jQuery＞条件分岐の記述方法について

下記記述では全て同じ結果になりますが、それぞれに違いはあるのでしょうか。
違いがある場合、どのように使い分けたら良いのでしょうか。

未熟なため、初歩的な質問で申し訳ありませんがご教授くださいませ。

jQuery
1var val = 'hoge';
2
3if (val) {
4  console.log('値が入っています');
5}
6if (val != '') {
7  console.log('値が入っています');
8}
9if (!val == '') {
10  console.log('値が入っています');
11}
12if (val != null) {
13  console.log('値が入っています');
14}
15if (val.length) {
16  console.log('値が入っています');
17}
18if (val[0]) {
19  console.log('値が入っています');
20}

行動規範の内容に同意します

回答2件

変数 val の値が String 型であるなら、全ての結果は確かに等価ですが、行われる処理は異なります。

!=, == は両辺の型が不一致の場合に型を合わせる処理が発生します
if () は Boolean 型に変換する処理が発生します(ToBoolean)
val.length, val[0] はプロパティ参照処理が発生します

私は変数 val 値が String 型である事を保証した上で、コストが一番安い(無駄な処理が一番少ない)下記コードを採用しています。

JavaScript
1if (val) {
2  console.log('値が入っています');
3}

あるいは、分かりやすさ重視で下記コードを採用する人もいると思います。

JavaScript
1if (val !== '') {
2  console.log('値が入っています');
3}

両辺の型は String 型で一致しており、評価値も Boolean 型なので型変換処理は発生しません。
いずれにしても、if 文によるToBoolean処理(Boolean型への変換処理)が発生し、Boolan値をそのまま返すわけですが、空文字と比較する事を明示する意図は理解できます。

Re: teratail_siw さん

投稿2017/12/04 07:19

編集2017/12/04 07:22

think49

総合スコア18164

teratail_siw

2017/12/04 09:42

各条件の違いだけでなく、型変換処理の有無まで解説いただきましてありがとうございます。できるだけ無駄な処理をしないで済むにはどうしたらいいか、について、非常に参考になりました。実戦で活かしていきたいと思います。

行動規範の内容に同意します

ベストアンサー

val != ''と、!val == ''の組以外、すべて意味が違います。

if(val)…valがfalse、null、数値の0、NaN、空文字列、undefinedのいずれでもなければ成立
if(val != '')…valがfalse、数値の0、空文字列、空配列などの一部のオブジェクトのいずれでもなければ成立
if(val != null)…valがnullでもundefinedでもなければ成立
if (val.length)…空文字列でない文字列や1つ以上要素のある配列、など、lengthプロパティがあるオブジェクトなら成立。valがnullやundefinedだとエラーになります。
if (val[0])…空文字列でない文字列や0番目の要素にtruthyなものが入った配列など、[0]からtruthyなものが取れれば成立。valがnullやundefinedだとエラーになります。