JavaScript Tips | 配列ユーティリティ：undefined 削除

JavaScript JavaScript
スポンサーリンク

何をしたいユーティリティか：「undefined 削除」

ここでの「undefined 削除」は、配列の中から undefined を取り除いて、扱いやすい配列に整える処理です。
「null 削除」と似ていますが、ターゲットが undefined にフォーカスされているイメージです。

業務だと、例えばこんな状況でよく出てきます。
配列を map した結果、一部だけ undefined が返ってしまった。
「存在しない要素」を array[index] で参照して、そのまま配列に入れてしまった。
オプショナルな値を詰め込んだ配列から、「決まっているものだけ」を取り出したい。

こういうときに「undefined 削除ユーティリティ」があると、毎回同じルールでクリーンアップできて、コードがすっきりします。

基本形：undefined だけを削除する

一番シンプルな undefined 削除ユーティリティ

まずは、「undefined だけを削除する」一番素直なユーティリティからいきます。

function removeUndefined(array) {
  if (!Array.isArray(array)) {
    return [];
  }

  return array.filter((item) => item !== undefined);
}
JavaScript

ここでやっていることをかみ砕きます。
Array.isArray で「本当に配列か」を確認し、違ったら空配列を返しています。
filter で「item !== undefined なものだけ」を残しています。
null や空文字、0、false はそのまま残ります。

つまり、「undefined だけを消して、それ以外は全部残す」動きになります。

動作例

const data = [1, null, 2, undefined, 3, 0, "", false];

const cleaned = removeUndefined(data);
// [1, null, 2, 3, 0, "", false]
JavaScript

undefined だけが消え、null や他の値は残っています。
「とりあえず undefined だけ邪魔だから消したい」という場面では、この removeUndefined で十分です。

「undefined になりがちな場面」と組み合わせて考える

map の結果に undefined が混ざるパターン

例えば、map の中で条件によって値を返したり返さなかったりすると、undefined が混ざります。

const users = [
  { id: 1, active: true },
  { id: 2, active: false },
  { id: 3, active: true },
];

const maybeIds = users.map((u) => {
  if (u.active) {
    return u.id;
  }
  // 何も return しない → undefined
});

console.log(maybeIds);
// [1, undefined, 3]
JavaScript

このとき、「有効な ID だけ欲しい」なら、undefined 削除 をかけます。

const activeIds = removeUndefined(maybeIds);
// [1, 3]
JavaScript

ここでのポイントは、「map の結果に undefined が混ざるのはよくある」「それを後段で一気に掃除する」という発想です。

存在しないインデックスを参照した結果

配列の範囲外を参照すると、JavaScript は undefined を返します。

const arr = [10, 20];

const picked = [
  arr[0],
  arr[1],
  arr[2], // 存在しない → undefined
];

console.log(picked);
// [10, 20, undefined]

const cleaned = removeUndefined(picked);
// [10, 20]
JavaScript

「存在しないものは無視したい」というときに、removeUndefined がそのまま使えます。

null 削除との関係を整理する

null と undefined をどう区別するか

JavaScript では、null と undefined はどちらも「値がない」系ですが、意味づけが少し違います。
null は「明示的に“空”とされた値」。
undefined は「まだ何も代入されていない」「存在しない」ことが多いです。

そのため、プロジェクトによっては次のような方針を取ることがあります。
null は業務上の「空」を表すので残したい。
undefined は「単なる未設定」なので、配列からは消してしまいたい。

このとき、「null 削除」と「undefined 削除」を分けておくと、意図がとても明確になります。

function removeNull(array) {
  if (!Array.isArray(array)) return [];
  return array.filter((item) => item !== null);
}

function removeUndefined(array) {
  if (!Array.isArray(array)) return [];
  return array.filter((item) => item !== undefined);
}
JavaScript

「どちらも消したい」場合は、前にやったような removeNullable（item != null）を使う、という住み分けができます。

業務での具体的な使い方

例1：オプショナルな値の配列から「決まっているものだけ」を取り出す

例えば、「条件を満たすときだけ値を返す関数」をたくさん呼んで、その結果を配列に詰めるケースを考えます。

function getDiscount(user) {
  if (!user.isMember) return undefined;
  if (user.rank === "gold") return 20;
  if (user.rank === "silver") return 10;
  return undefined;
}

const users = [
  { name: "A", isMember: true, rank: "gold" },
  { name: "B", isMember: false },
  { name: "C", isMember: true, rank: "silver" },
];

const discounts = users.map(getDiscount);
// [20, undefined, 10]

const validDiscounts = removeUndefined(discounts);
// [20, 10]
JavaScript

「割引があるユーザーだけを対象にしたい」場合、undefined 削除 を挟むことで、後続の処理がシンプルになります。

例2：部分的にしか存在しないデータをまとめる

例えば、「ユーザーごとに“あればポイント残高を返す”」関数があるとします。

function getPoint(user) {
  return user.point; // ない場合は undefined
}

const users = [
  { name: "A", point: 100 },
  { name: "B" },
  { name: "C", point: 50 },
];

const points = users.map(getPoint);
// [100, undefined, 50]

const existingPoints = removeUndefined(points);
// [100, 50]
JavaScript

ここでも、「存在するものだけを集める」前処理として removeUndefined が効いてきます。

「undefined 削除」ユーティリティ設計で意識してほしいポイント

0 や空文字を絶対に消さない

0 や空文字 ""、false は、業務上「有効な値」であることが多いです。
数量 0。
空文字も意味を持つフィールド。
フラグの false。

removeUndefined は、あくまで undefined だけを対象にします。
ここに「空文字も消す」「0 も消す」を混ぜ始めると、一気にバグの温床になります。

「空文字も消したい」なら、それは別のユーティリティ（空要素削除系）でやる、と役割を分けておくのが安全です。

非破壊的にする（新しい配列を返す）

filter を使っているので、元の配列は変更されません。
これは意図的です。

元の配列を直接書き換えると、「どこで undefined が消えたのか」が追いにくくなります。
業務コードでは、「元データはそのまま」「クリーンな配列を別で持つ」というスタイルのほうが、デバッグしやすく、バグも減ります。

null 削除・nullable 削除とセットで用意する

プロジェクトとしては、次の 3 つをセットで用意しておくと、とても使いやすくなります。

export function removeNull(array) { ... }        // null だけ削除
export function removeUndefined(array) { ... }   // undefined だけ削除
export function removeNullable(array) { ... }    // null と undefined 両方削除
JavaScript

こうしておくと、「この処理はどこまで“値なし”を消しているのか」が関数名だけで分かります。
読み手にとっても、自分にとっても、かなり親切な設計になります。

手を動かして確認してみる

コンソールで、次のようなコードを実際に打ってみてください。

const data = [1, null, 2, undefined, 3, 0, "", false];

removeUndefined(data);

function getDiscount(user) {
  if (!user.isMember) return undefined;
  if (user.rank === "gold") return 20;
  if (user.rank === "silver") return 10;
  return undefined;
}

const users = [
  { name: "A", isMember: true, rank: "gold" },
  { name: "B", isMember: false },
  { name: "C", isMember: true, rank: "silver" },
];

const discounts = users.map(getDiscount);
const validDiscounts = removeUndefined(discounts);
JavaScript

「どの値が残って、どの値が消えるか」「undefined が混ざった配列がどうクリーンになるか」を、自分の目で確かめてみてください。

そのうえで、自分のプロジェクトに

export function removeUndefined(...) { ... }
JavaScript

を置き、「配列から undefined を消したくなったら、必ずこの“undefined 削除ユーティリティ”を通す」と決めてみてください。
それだけで、item !== undefined があちこちに散らばるコードから、一段きれいな設計に進めます。

スポンサーリンク
タイトルとURLをコピーしました