20c. ProgateでJavaScript Ⅵ～Ⅶ

JavaScriptⅥ

配列を操作するメソッドについて学習していきます。

pushメソッド

pushメソッドとは、配列の最後に新しい要素を追加するメソッドです。

// script.js
const numbers = [1, 2, 3];
console.log(numbers);
number.push(4);				// 配列に新しい要素を追加
console.log(numbers;)

// 実行結果
[1, 2, 3]
[1, 2, 3, 4]

forEachメソッド

forEachメソッドは配列の中の要素を1つずつ取り出して、全ての要素に繰り返し同じ処理を行うメソッドです。

const numbers = [1, 2, 3];
numbers.forEach((number) => {		// 引数に入っている関数はコールバック関数と呼びます
	console.log(number);
});

// 実行結果
1
2
3

findメソッド

findメソッドとは、コールバック関数の処理部分に記述した条件式に合う1つ目の要素を配列の中から取り出すメソッドです。

const numbers = [1, 3, 5, 7];
const foundNumber = numbers.find((number) => {
	return number > 3;
});
console.log(foundNumber);

// 実行結果
5							// 条件にあう最初の要素が取り出されている

配列の要素がオブジェクトの場合もfindメソッドを使うことができます。

const characters = [
	{id: 1, name: "にんじゃわんこ"};
	{id: 2, name: "ひつじ仙人"};
];
const foundCharacter = characters.find((character) => {
	return character.id === 1;
});
console.log(foundCharacter);

// 実行結果
{id: 1, name: "にんじゃわんこ"}

filterメソッド

filterメソッドとは記述した条件に合う要素のみを取り出して新しい配列を作成するメソッドです。

const numbers = [1,3,5,7];
const filteredNumbers = numbers.filter((number) => {
	return number > 3;					// 条件に合う要素が全て取り出されて新しい配列に格納される
});
console.log(filteredNumbers);

// 実行結果
[5, 7]

配列の要素がオブジェクトの場合もfilterメソッドを使うことができます。

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}
]

mapメソッド

配列の全ての要素に同じ処理をして新しい配列を作るメソッドです。

const numbers = [1, 2, 3];
const doubledNumbers = numbers.map((number) => {
	return number * 2;		// mapで配列の全ての要素に対して2倍する
});
console.log(doubledNumbers);

// 実行結果
[2, 4, 6]

配列のオブジェクト要素に対しても使うことができます。

const names = [
	{firstName: "Kate", lastName: "Jones"},
	{firstName: "Brian", lastName: "Smith"}
];
const fullNames = names.map((name) => {
	// mapでfirstNameプロパティとlastNameプロパティを繋げる
	return name.firstName + name.lastName;
});
console.log(fullNames);

// 実行結果
["kateJones","BrianSmith"]

JavaScriptⅦ

コールバック関数について学習していきます。

コールバック関数とは

JavaScriptでは引数に関数も渡すことができます。引数に渡される関数をコールバック関数と呼びます。

const printWanko = () => {
	console.log("にんじゃわんこ");
};

const call = (callback) => {	// コールバック関数を引数に代入
	console.log("コールバック関数を呼び出します。");
	callback();					// コールバック関数を呼び出す
};

call(printWanko);				// コールバック関数

// 実行結果
コールバック関数を呼び出します。
にんじゃわんこ

コールバック関数を直接定義する

コールバック関数を直接引数の中で定義することもできます。

const call = (callback) => {	// 関数をcallbackに代入
	console.log("コールバック関数を呼び出します。");
	callback();					// callback関数を呼び出す
};

call(() => {					// 関数を引数の中で直接定義
	console.log("にんじゃわんこ");
});

コールバック関数の引数

複数の引数を渡すこともできます。

const introduce = (callback) => {
	callback("にんじゃわんこ", 14);
};

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

// 実行結果
にんじゃわんこは14歳です。