【JS】関数を代入した変数を複数記述するときの注意点

Booleanを返す関数を代入した変数の処理で、複数の条件（&&や||）を設定する場合の記述の注意点メモ。

##正しい記述

複数の真偽値を設定する場合は、以下のように、引数を明示して双方の変数にそれぞれ渡す必要がある。

OK事例

moreThanOne = ({arr}) => arr.length > 1
lessThanThree = ({arr}) => arr.length < 3

//正常な記述
judgeOK = (params) => lessThanThree(params) && moreThanOne(params)

これを、引数を記述せず、変数をつなげると意図しない結果になってしまう。

NG事例

//間違った記述
judgeNG = lessThanThree && moreThanOne

##なぜ意図しない結果になってしまうのか？

NG事例

judgeNG = lessThanThree && moreThanOne

この式は、lessTanThreeの結果と、moreThanOneの結果を&&で結んでいるのではなく、 変数自体をつなげている事になる。

&&は前者がtrue / false以外の場合、後方の値を返す。

このため、上記式はjudgeNG = moreThanOneと同じになってしまう。

**▼true/false以外の場合の例** 

###▼確認用コード

arr = [1,2,3,4,5]

moreThanOne = ({arr}) => arr.length > 1
lessThanThree = ({arr}) => arr.length < 3

//意図しない動き
judgeNG = lessThanThree && moreThanOne
console.log( judge({arr}) ) //true

//意図した動き
judgeOK = (params) => lessThanThree(params) && moreThanOne(params)
console.log( judge({arr}) ) //false

上記のように、引数を記述しない場合は、後方のmoreThanOneのみが評価され、lessThanThreeが無視された結果になってしまう。

一方で引数を記述した場合は、true && false = falseが返る。

##paramsとは何か？

paramsは渡された引数全てを表している。引数名は任意なので、params以外でも問題ない。

arr = [1,2,3,4,5]

moreThanOne = ({arr}) => arr.length > 1
lessThanThree = ({arr}) => arr.length < 3

judge = (o) => lessThanThree(o) && moreThanOne(o)

console.log( judge({arr}) )
//false

上記の場合、oには{arr}が入っている。

##変数が一つの場合
変数が１つの場合引数を渡さずとも意図した動きになるため、これが混乱する要因にもなっていた、、

moreThanOne = ({arr}) => arr.length > 1

//意図した動きになる
judge = moreThanOne
judge({arr})

これは、judgeがmorethanOneに格納された変数そのものになっているため、引数を渡さずとも真偽値が返る。

judge = moreThanOne
　　　　　↓↑
judge = ({arr}) => arr.length > 1