はじめに

JavaScriptで filter を使用しているときに「あれ？なんでこうなるんだ？」ってつまづいたところを備忘録として記載します。

つまづいたところ

例えばこちらのコード

例

var fruits = ['', null, undefined, 'mango', 'orange'];
var text = fruits.filter(value => {
    return value;
});
console.log(text);

結果

["mango", "orange"]

空文字 とか null とか undefined をfilterにかけるだけでそれらを抜かした配列ができている。。。。！！
ほぉーなんでだろーと調べました。

説明

調べてみると、MDNサイトにちゃんと説明がのっていました。

Array.prototype.filter()

filter() は、与えられた callback 関数を配列の各要素に対して一度ずつ呼び出し、callback が true と評価される値を返したすべての要素からなる新しい配列を生成します。callback は値が代入されている配列の添字に対してのみ呼び出されます。つまり、すでに削除された添字や、まだ値が代入されていない添字に対しては呼び出されません。callback によるテストに合格しなかった配列要素は単純にスキップされ、新しい配列には含まれないだけです。

つまり、値が代入されてない場合は勝手にスキップしてくれるよってことですね！なるほど～
そこで次なる疑問**「値が代入されてない」ってどういうことをいうの？？**

値が代入されてない定義

上の説明から再度引用すると、

callback が true と評価される値を返したすべての要素からなる新しい配列を生成します。

つまり、callback が false と評価される値を返した場合は配列を生成しない。

さらにつまり、値を条件式に入れたときに ture になるか false になるかってことで判断すればいいと理解しました。

null・undefined・空文字を条件式に入れるとfalseになることを検証

①null

例

var value = null;
if(value){
 console.log('true!');
} else {
 console.log('false');
}

結果

false

②undefined

例

var value = null;
if(value){
 console.log('true!');
} else {
 console.log('false');
}

結果

false

③空文字

例

var value = "";
if(value){
 console.log('true!');
} else {
 console.log('false');
}

結果

false

おまけ：数字の 0

例

var value = 0;
if(value){
 console.log('true!');
} else {
 console.log('false');
}

結果

false

※数値の 0 もfalseになっちゃうので注意しましょう

まとめ

条件式に関して、たまに (!str) 的なものを見て、ふーん、？、と浅い理解にとどまっていましたが、今回のことでだいぶ理解が深まったと思います。

ご存じの方からするとそんなことも知らないのかって感じかもしれませんが、、、

こういった地道な理解が複雑なコードを理解したりするうえで大事と（勝手に）思っているので、日々勉強で頑張りたいと思います。