filter() メソッド

与えられた関数によって実装されたテストに合格したすべての配列からなる新しい配列を生成します。

コンソール画面を開いて２つの例を確認しよう！

<script>
const arr = [
  { id: 0, name: "fdoif", hobby: "soccer" },
  { id: 1, name: "hohfd", hobby: "baseball" },
  { id: 2, name: "fhofi", hobby: "bascketball" },
  { id: 3, name: "fefef", hobby: "soccer" },
  { id: 4, name: "sassa", hobby: "baseball" }
];

const filterByHobby = item => {
  if (item.hobby === "soccer") {
    return true;
  }

  return false;
};

const arrByHobby = arr.filter(filterByHobby);     //hobbyがsoccerの要素だけを取り出し、新しい配列に格納する。

console.log("Filtered Array\n", arrByHobby);

</script>

returnについて

関数内で処理をした結果を「戻り値」として返すことができます。
これは関数は「return」を使わずに処理を行ったらそのまま終了となります。
しかし「return」を使うことで処理を行った結果の値を返せるので、
その値を使ってさらに別の処理を続けることが出来るわけです。
例えば、IF文の条件式に再利用したり、別に用意された関数の引数へ当てはめるような活用方法も考えられます。

return基本型

function sample() {
//何らかの処理を行う
return 値や式などを記述
}

「return」は関数内に記述するので、上記のように何らかの処理を行った結果を返すのが一般的です。ただし、returnが実行されるとそれ以降の処理は実行されずに中断するので注意が必要で

function hello(name) {
return 'こんにちは、' + name + 'さん';
}
console.log( hello('太郎') );
//実行結果 こんにちは、太郎さん

returnが無ければ関数は処理を行うだけで終了するので戻り値は必ず「undefined」になる

function hello( name ) {
var result = 'こんにちは、' + name + 'さん';
//「name」が指定されていないとundefinedになる
if( name ) {
return true;
}
else {
return false;
}
}
//名前を指定せずに実行
console.log( hello() );
//結果　 　false
参考したサイト

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]