Arrayからnullのものをfilterしたい

Question

前提・実現したいこと

Arrayからfilterでnullのみ取得したいが期待した結果が返ってこない。
(filterで想定した結果が返ってこない理由を知りたく、forでループさせるなど別の解法をお聞きしているわけではありません)

該当のソースコード

const arr = new Array(4);
const fil = arr.filter(value => value== null);
console.log(fil.length);  // 4を期待するが、0が出力(NG)

試したこと

通常の配列であれば期待した結果が返ってきます。

const arr = [1, null, undefiend];
const fil = arr.filter(value => value == null);
console.log(fil.length);  // 2を期待し、2が出力される(OK)

Answer 1

MDNの解説に記載されています。

すでに削除された添字や、まだ値が代入されていない添字に対しては呼び出されません。

Arrayで作成した配列にはまだ値が代入されていないため、関数が呼ばれていないと思われます。

Array.prototype.filter() - JavaScript | MDN

ちなみに意図した戻り値を期待する場合は、fillで埋めると返ってきます。

const arr = new Array(4).fill(null);
const fil = arr.filter(value => value== null);
console.log(fil.length);  // 4

Comments

[cappuccinon]

回答ありがとうございます。
環境を記述していなかったため申し訳ないのですがES5のためfillが使用できずnull埋めする別の綺麗な書き方はありますでしょうか。

[maisumakun]

「forでループさせる」か、「Array.fillあるいはArray.fromをpolyfillする」の2択が主な手段です。

[yuuyu]

ポリフィルが公開されているため、そちらをコードの先頭に入れるか、もしくはfor文で埋める、ですかね。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/fill#polyfill

[cappuccinon]

解法までありがとうございました。
今回お二人ともベストアンサーにさせていただきたいのですが、期待する解法まで提示いただいたyuuyu様を選ばせていただきました。

Answer 2

new Array(長さ)で宣言した配列は、undefinedすら入っていない空の状態です（「疎な配列」とも呼ばれます）。filterは要素が入っているところのみ実行しますので、空の配列ではコールバックは実行されず長さ0の配列を返すだけになります。

なお、[1,,3]のようにコンマだけで区切る、あるいはdelete arr[0]のようにdelete演算子を使うことで要素のない状態を作り出すことが可能です。

Comments

[cappuccinon]

早々に回答ありがとうございます。
長さを確認しましたが、長さは指定した要素数を返しました。
回答者様と違う結果となり、こちらが何か違う認識をしていますでしょうか。

const arr = new Array(4);
console.log(arr.length); // 4を期待し、4が出力(OK)

環境(Target)はES5になります。

[maisumakun]

> こちらが何か違う認識をしていますでしょうか。

はい、filterの結果が長さ0、と書いただけです。元の配列には言及していません。

[cappuccinon]

そうですね、大変失礼しました。