複数の変数に同じ処理をかけたい

Question

##実現したいこと・試したこと
複数の変数(data.customerCode、data.arrivalDate、apple、orangeなどなど・・・)に対して、もしnullもしくはundefinedであればハイフンに変換する、という処理を行いたいです。
1つ1つの例であれば、

if(data.customerCode === null || data.customerCode === undefined){
data.customerCode = "-";
}

とのように書けばいいと思うのですが、これを変数の数だけ書くのはコードの可読性の点から良くないと思いました。
繰り返し処理でそれぞれの変数に対してnull&undefinedチェックを掛けたいのですが、どのようにすれば良いでしょうか。
繰り返し処理ごとに変数を変えるような方法がわからず、ご教示いただけると幸いです。

Answer 1

関数にするのが妥当だと思います。

function ConvertNullToHyphen(data) {
  if (data === null || data === undefined) {
    return "-";
  } else {
    return data;
  }
}

data.customerCode = ConvertNullToHyphen(data.customerCode);
data.arrivalDate  = ConvertNullToHyphen(data.arrivalDate);
apple             = ConvertNullToHyphen(apple);
orange            = ConvertNullToHyphen(orange);

Comments

[soi]

配列の中に格納する方法もスマートだとは思うのですが、関数のやり方ですることにしました！
細かく関数まで書いてくださったku__ra__geさんをBAとさせてもらいました、皆さんご回答ありがとうございました。大変助かりました。

Answer 2

data.customerCode === null || data.customerCode === undefined

何故if (data.customerCode)ではダメなんですか？
恐らく数値の0や空文字列がfalse判定になる事が原因だと思います。

なのでif (data.customerCode == null)にしましょう。
等価演算子を使った時の挙動でnullやundefinedが比較対象となった場合、
null == undefinedのみtrueになり、それ以外の0やら空文字列は異なるものと判別されます。

• 等価演算子 - MDN
• ECMAScript 11.9.3 (等式比較アルゴリズム) ←全世界のJavaScriptの仕様書

念の為さっとみましょうか。

1. If Type(x) is the same as Type(y), then

1-a. If Type(x) is Undefined, return true.
1-b. If Type(x) is Null, return true.

x == yの比較時、xとyの型が同一でundefinedやnullの型であればtrueを返す。

1. If x is null and y is undefined, return true.

1. If x is undefined and y is null, return true.

x == yの比較時、xとyがnull == undefinedの相関であればtrueを返す。

1. Return false.

以降4-9のセクションではnullやundefinedがないので
null == 0やundefined == ""等の比較は全てfalseを返す。

以上の事からdata.customerCode == nullで十分です。
JS使いなら知ってるので問題ありません。
以上の事からコードが簡単になるので別にコピペで良くね？ってのが一目の感想

data.customerCode = data.customerCode == null ? "-" : data.customerCode;
data.arrivalDate = data.arrivalDate == null ? "-" : data.arrivalDate;
apple = apple == null ? "-" : apple;
orange = orange == null ? "-" : orange;

---

新しいブラウザでしか使えませんが、
Null合体演算子というものもあります。

Null 合体演算子 (??) は論理演算子の一種です。この演算子は左辺が null または undefined の場合に右の値を返し、それ以外の場合に左の値を返します。

OR 演算子 (||) と違い、null と undefined 以外の falsy な値のときには左の値を返します。つまり、左辺が '' や 0 の場合は左の値を評価して返します。その他の例については以下を参照してください。

なので下記でOK

data.customerCode = data.customerCode ?? "-";
data.arrivalDate = data.arrivalDate ?? "-"; 
apple == apple ?? "-";
orange == orange ?? "-";

コピペだらけで大変になっちゃう！
えっ、そうなの？十分シンプルじゃね？

---

最大限譲歩してデフォルト値指定の関数を実装するくらいですかね。
なんでハイフンなのかもコードに欲しい。
toHyphenみたいな関数名にするのも良いけど、デフォルト値を示すdef関数とかどうかな？

const def = (v, d) => v == null ? d : v;
data.customerCode = def(data.customerCode, "-");
data.arrivalDate = def(data.arrivalDate, "-"); 
apple == def(apple, "-");
orange == def(orange, "-");

まぁ、それ数値かもしれないですよね。

計算途中で勝手に文字列になってバグる可能性があるので、
ハイフンに変更するのはJavaScriptの全ての計算が終わって、
DOMツリーを編集して画面更新する瞬間のタイミングにした方が良いです。

そうしないと数値計算する時に、
ノイズとして混入してしまったハイフンを取り除くみたいな無駄な作業が挟まる……可能性が一応あるので、
基本的に受け取ったデータは出来る限りそのままにしておく方が望ましいです。

そんな問題殆どなさそうですが、
ちらっと検討してみてくださいね。

Comments

[soi]

関数で書いていたのですが、レビューでこちらのNull演算子を使った方法がいいとの指摘を受け修正になりました、、！
ご指摘ありがとうございました。

Answer 3

そういう関数を作ってしまうってのではどうでしょう

data.customerCode = kansu(data.customerCode);

Answer 4

変数というのはdataのことですか？
配列にしてループして処理するのが妥当では？

const d1={customerCode:true};
const d2={};
const d3={customerCode:null};
[d1,d2,d3].forEach(data=>{
  if(data.customerCode === undefined || data.customerCode === null){
    data.customerCode = "-";
  }
});
console.log(d1);
console.log(d2);
console.log(d3);