JavaScriptでfilterメソッドを使って空要素(undefined)を取り除く方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでfilterメソッドを使って空要素(undefined)を取り除く方法について解説しています。filterメソッドの基本の使い方や書き方、活用方法を覚えましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptでfilterメソッドを使って空要素(undefined)を取り除く方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

 

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まるでしょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

filterメソッドを使って空要素(undefined)を取り除く方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

undefinedとは

javascriptでのundefinedとは、「未定義」の状態を示す値です。

例えば、下記のように変数を宣言した場合、その変数は定義されていないため、undefinedが設定されています。

var text;

未定義の要素は空要素とも呼ばれています。

 

filterメソッドとは

filterメソッドとは、対象配列のなかのすべての要素の中から、指定した条件に一致する要素のみで新たな配列を作成し、返却する役割をもつメソッドです。

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

filterメソッドの使い方

filterメソッドの構文は、以下のようになります。

var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

 

callback :配列の各要素に対して実行する関数です。

この関数がtrueを返す要素は新たな配列に残ります。

element : 配列内の現在の要素を指します。

index : 配列内の現在の要素の添字です。

array : filter メソッドを実行している配列です。

thisArg : callback を実行するときに this として使う値となります。

 

空要素(undefined)を取り除く方法

filterメソッドを用いて配列の中の空要素を除くためには、配列内の要素をboolean型に変換し、boolean型で指定されているfalseとなる型(0やundefinedなど)をコードから取り除きます。

 

実際に書いてみよう

var array = [1, 2, undefined, 3, null, 0, 4, ,"", 5, 6]

array.filter(Boolean);

array.filter(Boolean);はcollbackで各要素を検査しているため、以下のコードの処理と同じ意味を持ちます。

array.filter((val) => Boolean(val));

 

Boolean型に各要素を変換してtrueのものを返却し、undefinedを配列内から取り除くことが可能です。

 

まとめ

fiterメソッドは配列内の要素の絞り込みを行うのにとても便利なメソッドです。

また、紹介した方法の他にも様々な活用方法があるので、適切に活用していきましょう。

 

執筆してくれたメンター

水野大輝(みずのたいき)

2014年より、某物流会社のシステム開発担当として入社。

未経験ながら、社内システム保守~新規受注システム開発まで携わり、JavaScript Ruby on Rails PostgreSQLなどの経験を積む。

現在も、開発案件に携わりながら、日々勉強中。

 

大石ゆかり

JavaScriptでfilterメソッドを使って空要素(undefined)を取り除く方法がよく分かったので良かったです!

田島悠介

ゆかりちゃん、これからも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは、初心者でも最短4週間でJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。