Javascriptの復習（6）

本記事について

この記事はJavascript初学者がアウトプットの場として書いている記事です。大半の人にとっては既知の内容だと思われますので、無視してください。記事の内容に間違いがある場合は指摘してくださると助かります。

#配列を操作するメソッド
タイトル通りです。Javascriptにおける配列とは、複数の要素が纏められた1つのオブジェクトです。今回学習したのは"push"、"forEach"、"find"、"filter"、そして"map"というメソッドです。

script.js

const fruits = ["リンゴ", "バナナ", "オレンジ"];

const numbers = [1, 2, 3];

pushメソッド

pushメソッドは配列に要素を追加するメソッドです。配列の最後に追加されます。

script.js

const numbers = [1, 2, 3];

//配列numbersに要素4を追加
numbers.push(4);
//コンソール上に [1, 2, 3, 4] と表示される。
console.log(numbers);

forEachメソッド

forEachメソッドは配列内の全ての要素に同じ処理を施すメソッドです。
以下の例ではforEachメソッドの中にアロー関数が入っております。配列内の各要素はアロー関数の引数(今回はnumber)に代入されて、アロー関数の処理が行なわれます。
今回の例のようにメソッドの引数として入っている関数は"コールバック関数"といいます（コールバック関数については後ほど詳しく書きます）。

script.js

const numbers = [1, 2, 3];

numbers.forEach((number) => {
  console.log(number);
});

//コンソール上で以下のように表示される
1
2
3

findメソッド

findメソッドは、コールバック関数に記述されている条件を満たす配列内の要素を見つけ出すメソッドです。但し、条件を満たす要素を全て見つけ出すのではなく、最初に見つけ出された要素しか結果として表示されません。

script.js

const numbers = [1, 4, 9];

const foundNumber = numbers.find((number) => {
//3より大きい数字を結果として返す
  return number > 3;
});
//コンソール上に4のみ表示される(9は表示されない)。
console.log(foundNumber);

応用的な使い方ですが、配列内の要素がオブジェクトでもfindメソッドで結果を出すことができます(結果はオブジェクトが表示される)。

script.js

const members = [{id: 1, name: "Taro"}, {id: 2, name: "Hanako"} ];

const foundMember = members.find((member) => {
//オブジェクトのidと一致するものを探し出す。
  return member.id === 1;
});
console.log(foundmember);

//コンソール上には以下のように表示される。
{id: 1, name: "Taro"}

filterメソッド

filterメソッドは、条件を満たす配列内の要素を纏めて再び配列にするメソッドです（findメソッドとは違い全て抽出される）。

script.js

const numbers = [1, 4, 9];

const filteredNumber = numbers.filter((number) => {
//3より大きい数字を配列に纏める。
  return number > 3;
});
//コンソール上には[4, 9]として表示される。
console.log(filteredNumber);

mapメソッド

mapメソッドは、配列内の全ての要素にメソッド内のコールバック関数の処理を施すメソッドです。

script.js

const numbers = [1, 2, 3];

const doubleNumber = numbers.map((number) => {
//全ての要素(数字)を2倍にする。
  return number*2;
});
//コンソール上には[2, 4, 6]として表示される。
console.log(doubleNumber);

これまでのメソッドと同様にオブジェクトでも使用できます

script.js

const members = [{firstName: "Taro", lastName: "Yamada"}, {firstName: "Hanako", lastName: "Suzuki"}];

const fullName = members.map((member) => {
//オブジェクト内のfirstNameとlastNameを合体させる。
  return member.firstName + member.lastName;
});
console.log(doubleNumber);

//コンソール上には以下のように表示される。
["TaroYamada", "HanakoSuzuki"]

コールバック関数について

ここまでしれっと使ってきたコールバック関数について書いていきます。Javascriptでは文字列や数字を引数として関数に渡すことができますが、関数も引数として渡すことができます。この引数として使用される関数をコールバック関数と言います。

##　コールバック関数を呼び出す時と渡す時
コールバック関数を呼び出す時は関数名の後ろに()を書きます。引数として渡す時は()は不要です。

script.js

const greet = () => {
  console.log("こんにちは");
};

const call = (callback) => {
  console.log("やぁ");
//コールバック関数の呼び出し(今回は関数greetの呼び出し)
  callback();
};
//関数greetを引数として扱っている。
call(greet);

//コンソール上には以下のように表示される。
"やぁ"
"こんにちは"

関数を定義せずに直接()の中に関数を書いても機能します。

script.js

const call = (callback) => {
  console.log("やぁ");
  callback();
};


call(() => {
  console.log("こんにちは");
});

//コンソール上には以下のように表示される。
"やぁ"
"こんにちは"

##　コールバック関数の引数について
コールバック関数は、普通の関数と同様に引数を渡すことができます。
このように書くメリットとしてはコールバック関数を柔軟に変更できることだと思います。

script.js

const profile = (callback) => {
  callback("タカシ");
};

//ここを書き変えることでコンソール上の結果を変更できる？
profile((name) => {
  console.log(name);
});

//コンソール上には以下のように表示される。
"タカシ"

引数は複数渡すことができます(複数渡す時はコールバック関数の引数と実際に渡す引数の数を揃える必要があります)。

script.js

const profile = (callback) => {
  callback("タカシ", "18");
};

profile((name, age) => {
  console.log(`${name}は${age}歳です`);
});

//コンソール上には以下のように表示される。
"タカシは18歳です"

感想

progateで学習した内容はこれで終わりです。現状、コンソール上で結果が表示されるコードしか書いてないので今後はjQueryを学習して動的な表現を付与する方法を身に付けたいです。