データが存在するかの判定をするとき
指定したキーがオブジェクト内に存在するかの判定を行うケースで見てみましょう。
ベタ書きした場合
function filtering(data) {
if (data.name) {
// 名前データが存在するときの処理
console.log("exist");
} else {
// 名前データが存在しない時の処理
console.log("not exist");
}
}
var data = {
id:1
};
filtering(data);
// not exist
これでもわからなくはないですが条件が増えてくると見づらくなりますし、何より判定ロジックの使い回しができません。
コードが短くなるという利点はありますが1度変数に入れて意味を持たせた名前に格納する方が可読性が上がります。
三項演算子で簡単な存在判定してみる
判定ロジックを1度変数に格納してみましょう。
今回の場合は存在するかが条件なので isNameExist と命名してみます。
データが存在する場合は true 、存在しない場合は false が入ります。
function filtering(data) {
const isNameExist = data.name ? true : false;
if (isNameExist) {
// 名前データが存在するときの処理
console.log("exist");
} else {
// 名前データが存在しない時の処理
console.log("not exist");
}
}
var data = {
id:1
};
filtering(data);
// not exist
このままでも問題はないですが判定ロジックに不安があります。
たとえば、
var data = {
name:" "
};
こういうデータが来た時存在する扱いになってしまいます。
なので判定ロジック部分だけ別関数に分けるようにしましょう。
他の処理で同じ判定をしなければならないときも使い回せて便利です。
別関数に分けた判定関数を使って1度変数に格納し判定する
isKeyExistという関数を作ってみました。(文字列系キーの存在判定をする際に使い回せる命名。もちろんNameの存在判定をする時に独自の判定をする場合はisNameExistが適切かと思われる)
とりあえず空白のみだと空と判定してほしいのでtrim().lengthを使用して複数条件にしてみます。
ちなみにconstでオブジェクトを作ってそれぞれの判定結果を持たせておくと後から拡張するとき簡単に済むのでかなり楽でおすすめです。
function isKeyExist(key) {
var isExist = false;
var valueLength = key.trim().length;
// keyが存在し、格納されている文字列が空白など以外で1文字以上
if(key && valueLength > 0) {
isExist = true;
}
return isExist;
}
function filtering(data) {
// 2回以上判定結果を使いたい場合1度変数に格納する
const isExist = {
name: isKeyExist(data.name)
};
if (isExist.name) {
// 名前データが存在するときの処理
console.log("exist");
} else {
// 名前データが存在しない時の処理
console.log("not exist");
}
}
var data = {
id:1,
name:" "
};
filtering(data);
// not exist
ちなみに1回しか判定しない場合こんな書き方でも大丈夫です。関数名の命名がイケてるとこれでもまあまあ読みやすくはなります。
function filtering(data) {
if (isKeyExist(data.name)) {
// 名前データが存在するときの処理
console.log("exist");
} else {
// 名前データが存在しない時の処理
console.log("not exist");
}
}
三項演算子パターン
これは短くはなりますが正直可読性めっちゃ落ちると思います。
function filtering(data) {
isKeyExist(data.name) ? console.log("exist") : console.log("not exist");
}
まあでも存在してる時の処理と存在しない処理を関数に分けたらスリムにはなりそうですね。
function filtering(data) {
isKeyExist(data.name) ? keyExistProcess(data.name) : keyNotExistProcess();
}
function keyExistProcess(name) {
console.log("exist");
console.log(name);
}
function keyNotExistProcess() {
console.log("not exist");
}
これでも正直横に長過ぎてわかりにくい気がするなあ
まとめ
ifに複数条件をめっちゃくっつけるときは読みやすくする工夫をするために、関数に判定ロジックを分けたり変数に1回入れたりしましょう。読みやすくなると思います。