◆ こんな書き方してみようかななメモ

1

特に意味は無いですがこんなコードがあります
function z(v){
if(v > 0){
return sideEffect(v)
}
if(v < 0){
return window.v = -v
}
sideEffect2()
}

LL言語でよくみるような 分岐してそこで終わりたい＋何か実行したいという時に return 文で関数を実行しているものです
返り値を使う気がないからなんでもいいしと この方法を使っていると思いますが 後から読むときに 返り値に意味があるのかわからなくて見づらいです
また 返り値を返す関数じゃないはずと undefined が返ってくる想定でコールバック関数として渡した時に false やオブジェクトが返ってきて問題が起きるケースもあります

かと言って
if(v > 0){
sideEffect(v)
return
}
と2行にするのも無駄に行増えるのであんまりしたくないです

そんな時に
function z(v){
if(v > 0){
return sideEffect(v), null
}
if(v < 0){
return window.v = -v, null
}
sideEffect2()
}
と書けば 1行でかつ返り値が null になるので解決です
undefined に合わせたいなら null の代わりに undefined にします

見づらいと思う人もいるかもですが JavaScript では
return a(), b
という式をカンマ区切りで書いて最後に評価したものを返す書き方は珍しく無いですし && みたいなもので 最初は見づらくても慣れると見やすくなってくるものです

2

前回書いたようなないようなですが こういうある関数の中で別関数を呼び出している場合
function a(){
    var elems = document.querySelector("input:checked")
    return Array.from(elems, e => e.id)
}

function b(){
    var aa = a()
    return aa.map(e => data[e]).filter(e => e > 0)
}

b()

a の中身はチェック状態の input の id を配列で取得するものです
b は data から id のものを取り出して 0 より大きい物だけを配列で返しています

b の中で a を呼び出しているわけですが よくこんな作りになってます
ですが a の中でも また関数を呼び出しているとネストがすごいことになってきますし 他関数に依存しすぎです

なのでこんな風にしてみます
function a(){
    var elems = document.querySelector("input:checked")
    return Array.from(elems, e => e.id)
}

function b(aa){
    return aa.map(e => data[e]).filter(e => e > 0)
}

function c(){
    return b(a())
}

c()

b は引数として a の返り値を取ります
かと言って毎回 b(a()) という使い方は見やすさ的にも 書きやすさ的にも×です

なので c で b(a()) だけやるようにしてます

関数増えてるし 書くのも実行速度もマイナスになってそうです
ですが 見やすさとデバッグしやすさは改善されてます

b の動作確認するときに a は必要なくて 適当に配列を入れて確認できます
一時的に a の返り値をコード書き換えて変更したり デバッガーで a の返り値の代入直後に上書きする手間もありません

なのでこんな作りにしたいのですが 意外とできてないのですよね