---
type: reference
language: javascript
slug: array/filter
title: "Array.prototype.filter()"
title_tag: "JavaScript filter() の使い方 — 条件に合う要素だけ取り出す"
summary: >
  filter() は配列の各要素を関数に通し、true になった要素だけを集めた新しい配列を返します。
  元の配列は変わりません。要素数は減ることがあります。
description: >
  条件に合う要素だけを集めた新しい配列を返します。find との違い、真偽値以外を返したときの扱い、filter(Boolean) の書き方、空配列が返る場面まで実行して確かめます。
status: published
difficulty: 2
minutes: 7

versions:
  verified: "Node 22.22.3"
  since: "ES5"
  deprecated: null
  removed: null

sources:
  - title: "Array.prototype.filter — ECMAScript® 2026 Language Specification"
    url: "https://tc39.es/ecma262/#sec-array.prototype.filter"
  - title: "Array.prototype.filter() — MDN"
    url: "https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter"

terms: [コールバック関数, 真偽値, truthy, 破壊的メソッド]

links:
  related:
    - javascript/reference/array/map
    - javascript/errors/cannot-read-properties-of-undefined
    - javascript/learn/array/transform
    - javascript/reference/array/find

content_updated_at: 2026-09-07
published_at: 2026-09-07
---

`filter()` は、配列の[num:1]つ1つを関数に通して、**戻り値が真になった要素だけ**を集めた新しい配列を返します。
[key:元の配列は変わりません]。要素数は[em:減ることがあります]。

```js run
const nums = [1, 2, 3, 4, 5];

const even = nums.filter(n => n % 2 === 0);

console.log(even);
console.log(nums);
```
```output
[ 2, 4 ]
[ 1, 2, 3, 4, 5 ]
```

上のコードは書き換えて実行できます。`n % 2 === 0` を `n > 3` にしてみてください。

## 何が返るのか

| | 中身 |
|---|---|
| 戻り値 | [key:新しい配列]。長さは[em:元以下] |
| 元の配列 | [em:変わらない] |
| 呼ばれる回数 | 要素の数だけ |
| 1つも通らなかったとき | [type:空配列]（`null` ではない） |

`filter()` は[type:非破壊的メソッド]です。

## 1つも通らなくても null にならない

見つからなかったときに `null` や `undefined` が返ると思って書くと、そこで詰まります。
[key:必ず配列が返ります]。

```js run
const nums = [1, 3, 5];

const even = nums.filter(n => n % 2 === 0);

console.log(even);
console.log(even.length);
console.log(even.length === 0);
```
```output
[]
0
true
```

判定は `if (even)` ではなく [code:even.length === 0] で書きます。
[bad:空配列は truthy です]。`if (even)` は必ず通ってしまいます。

## コールバック関数が受け取るもの

`map()` と同じで、[num:3]つの引数が渡されます。

```js run
const chars = ['a', 'b', 'c', 'd'];

const picked = chars.filter((value, index, array) => {
  return index % 2 === 0 && array.length === 4;
});

console.log(picked);
```
```output
[ 'a', 'c' ]
```

## 真偽値でなくてもよい（truthy / falsy で判定される）

戻り値は `true` / `false` でなくて構いません。[type:truthy]なら残り、[type:falsy]なら落ちます。

この性質を使うと、[key:空の値をまとめて落とす]書き方ができます。

```js run
const messy = ['a', '', 'b', 0, null, 'c', undefined, NaN];

console.log(messy.filter(Boolean));
```
```output
[ 'a', 'b', 'c' ]
```

`filter(Boolean)` は「falsy を全部落とす」という意味になります。

[dim:falsy は false / 0 / -0 / 0n / '' / null / undefined / NaN の8つだけです。それ以外は全部 truthy です。]

## よくある間違い

### 値を返してしまう

`filter()` に渡すのは[key:残すかどうかの判定]です。値を返すと、その値が truthy かどうかで判定されます。

```js bad
const nums = [0, 1, 2, 3];

const picked = nums.filter(n => n);

console.log(picked);
```
```output
[ 1, 2, 3 ]
```

`0` が[bad:意図せず落ちました]。`n` を残したいのではなく `n` が falsy かどうかを見ています。
値を変換したいときは `filter()` ではなく [map()](/ja/javascript/reference/array/map/) を使います。

### 1件だけ欲しいのに filter を使う

先頭の1件だけが欲しいなら [find()](/ja/javascript/reference/array/find/) です。
`filter()` は[bad:最後まで全部見ます]。

```js run
const users = [
  { id: 1, name: 'あかり' },
  { id: 2, name: 'ゆうと' },
  { id: 3, name: 'ゆうと' },
];

console.log(users.filter(u => u.name === 'ゆうと'));
console.log(users.find(u => u.name === 'ゆうと'));
```
```output
[ { id: 2, name: 'ゆうと' }, { id: 3, name: 'ゆうと' } ]
{ id: 2, name: 'ゆうと' }
```

| | 戻り値 | 見つからないとき | どこまで見るか |
|---|---|---|---|
| `filter()` | [type:配列] | [type:空配列] | [em:最後まで] |
| `find()` | [type:要素そのもの] | `undefined` | [em:見つかった時点で止まる] |

`find()` が `undefined` を返したことに気づかず、そのままプロパティを読むと
[Cannot read properties of undefined](/ja/javascript/errors/cannot-read-properties-of-undefined/)
になります。**空振りしたときにどうするかを、その場で決めてください。**

## 穴のあいた配列では、穴が消える

要素が入っていない位置（[type:疎な配列]の穴）ではコールバック関数が呼ばれません。
そして[key:結果の配列に穴は残りません]。ここが `map()` と違います。

```js run
const sparse = [1, , 3];

console.log(sparse.map(n => n));
console.log(sparse.filter(() => true));
console.log(sparse.filter(() => true).length);
```
```output
[ 1, <1 empty item>, 3 ]
[ 1, 3 ]
2
```

`map()` は[em:長さを保つ]ので穴がそのまま残り、`filter()` は[em:通ったものを詰め直す]ので穴が消えます。

[dim:表示のしかたは処理系によって違います。上は Node 22.22.3 の出力です。]

## 途中で元の配列を変えない

`filter()` は走り始めた時点の長さを覚えています。実行中に要素を足しても[bad:見に行きません]。

```js bad
const nums = [1, 2, 3];

const result = nums.filter((n) => {
  nums.push(n * 10);
  return true;
});

console.log(result);
console.log(nums.length);
```
```output
[ 1, 2, 3 ]
6
```

元の配列は[num:6]件に増えたのに、結果は[num:3]件のままです。
[key:ループの中で元の配列を変えない]。これは `map()` でも `forEach()` でも同じです。