JavaScript コールバック関数

Question

前提・実現したいこと

progateで二週間前からJavascriptの勉強をしています。
現在、コールバック関数、filterメソッドの使い方について学んでいるのですが
例文の記述でわからないところがあります。

(character) => {
return character.age > 10;
}

上の記述で
return の迹が何故　characters.age　ではなく character.age　なのかがわかりません。

発生している問題・エラーメッセージ

該当のソースコード

const characters = [
{name:"にんじゃわんこ",age:14},
{name:"ベイビーわんこ",age:5},
{name:"ひつじ仙人",age:100}
];

const filteredCharacters = characters.filter((character) => {
return character.age > 10;
});

console.log(filteredCharacters);

コンソール↓↓↓

[
{name:"にんじゃわんこ",age:14},
{name:"ひつじ仙人",age:100}
]

試したこと

googleで検索

追加質問

勝手にオブジェクトだと勘違いしていました。
オブジェクトを要素に持つ配列でした..

今までの私の戻り値や引数の理解では

const introduce = (name) =>{
console.log('わたしは${name}です');
};
introduce("ももか");

のように()の中のものが引数名のところに受け渡されるようなイメージだったのですが、
今回の場合、コールバック関数の引数名に配列の要素が順番に代入されるというのは「characters.filter」という記述によって charactersの中身が引き渡されているというイメージでしょうか..?

Comments

[ozwk]

なぜcharacters.ageだと思ったのでしょうか?
(配列であるcharactersにageプロパティは無いので)

[..o]

なるほど..完全にオブジェクトの中に複数の要素があると勝手に勘違いしていました。
何度もとんちんかんな質問をして申し訳ないのですが、
オブジェクトを要素に持つ配列で、オブジェクトの値を取り出す際、
characters[0].age といったように一つを取り出す記述しかわからないのですが、
この場合character.ageで指定できるのは何故なのでしょうか。

[ozwk]

> この場合character.ageで指定できるのは何故なのでしょうか。

root_jpさんの回答のとおりです

[..o]

よくわかりました！ありがとうございます！

Answer 1

const filteredCharacters = characters.filter((character) => {
  return character.age > 10;
});

// ↑は↓と同じです。

const filteredCharacters = characters.filter(function(element) {
  return element.age > 10;
})

この場合の、characterとかelementはコールバック関数に渡される引数名でしかないので何でもいいのです。
この引数に、配列の１つ１つの要素が順番に代入されて、コールバック関数内の処理が実行されます。

Comments

[..o]

なるほど！
配列の要素がひとつひとつ順番に代入されるのですね！
ありがとうございます！

[root_jp]

全然、とんちんかんな質問じゃありませんよ。
こういう所に疑問を持つことは、プログラムを勉強する上でとても重要です。
この辺りはややこしいのですが、良く使われるので、しっかり理解しながら進めましょう。

[..o]

ありがとうございます..!
なるほどと言っておいて申し訳ないのですが...ちなみに
今までの私の戻り値や引数の理解では

const introduce = (name) =>{
console.log('わたしは${name}です');
};
introduce("ももか");

のように()の中のものが引数名のところに受け渡されるようなイメージだったのですが、
今回の場合、コールバック関数の引数名に配列の要素が順番に代入されるというのは「characters.filter」という記述によって charactersの中身が引き渡されているというイメージでしょうか..?

[root_jp]

大体合ってます。
filter関数の中で「渡した関数に配列の内容を渡して」呼ばれているんです。
以下filter関数のイメージです。完全にイメージですから実態はまるで違うので注意。

function filter(callback) {
var 新しい配列[];
charactersの内容から１つずつ取り出すループ {
const result = callback(配列の要素); // ここでコールバックを呼んでいる
if (result) {
// コールバック関数がtrueを返してきた場合。今回はcharacter.age > 10のこと。
新しい配列.push(配列の要素);
}
}
return 新しい配列;
}

[..o]

詳しく本当にありがとうございます！(;;)
すっきりしました！！