JavaScript関数関連

関数がreturn文を伴わずに終了した場合、その関数の戻り値は自動的にundefinedになります。

宣言方法

関数宣言

• 関数の名前が必須となる。
• 定義より前でも呼び出すことが可能となる。

function double(num) {
  return num * 2;
}

関数式（無名関数）

• 関数の名前は任意である。（名前のない関数を無名関数と呼ぶ）
• 定義したあとに呼び出さないと、実行することができない。

const double = function (num) {
  return num * 2;
};

アロー関数

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

コールバック関数

• 引数に渡される関数をコールバック関数と呼びます。
• コールバック関数は、引数として受け取った関数を、特定の条件が満たされた時、またはある処理が完了した後に実行します。

const cook = (callback) => {
  console.log("料理を始めます！");
  // 料理が終わった
  callback();  // コールバック関数を呼び出す
};

const sayDone = () => {
  console.log("料理ができました！");
};

cook(sayDone);

• forEachなどのメソッドで、各配列の要素に対して実行する処理（中身）のこともコールバック関数と呼びます。

const fruits = ["りんご", "バナナ", "もも"];

fruits.forEach((fruit, index) => {
  console.log(`${index + 1}: ${fruit}`);
});

👇🏻この中の、下記の部分がコールバック関数です。

(fruit, index) => {
  console.log(`${index + 1}: ${fruit}`);
})

分割代入

配列やオブジェクトの中から、値を取り出して変数に代入することです。

• 配列

const scores = [70, 90, 80, 85];
const [first, sec, thi, four] = scores;
console.log(first, sec, thi, four);
//70 90 80 85

• オブジェクト

const scores = {
  taro: 88,
  jiro: 70,
  saburo: 90,
};
const { taro, jiro, saburo } = scores;
console.log(taro, jiro, saburo);
// 88 70 90

[]に代入しているので、配列が作成されると勘違いしがちですが、それぞれの変数に代入していることを覚えておきましょう。

よく使用される値の書き換えについて

let start = 'Tokyo';
let goal = 'Osaka';

[goal, start] = [start, goal];

console.log(start);// Osaka
console.log(goal);// Tokyo

レスト構文

分割代入といっしょに使って、「残りの値をまとめて配列で受け取る」構文 です。
左辺で使われます。

• 配列で受け取る

const fruits = ["りんご", "みかん", "バナナ", "ぶどう"];

const [first, second, ...rest] = fruits;

console.log(first);  // → "りんご"
console.log(second); // → "みかん"
console.log(rest);   // → ["バナナ", "ぶどう"]

• オブジェクトで受け取る

const scores = {
  taro: 88,
  jiro: 70,
  saburo: 90,
};
const { taro, ...others } = scores;
console.log(taro); //88
console.log(others); //{ jiro: 70, saburo: 90 }

スプレッド構文

要素を取り出して広げる構文です。
右辺で使われます。

• 配列で広げる

const moreScores = [77, 80];
const scores = [70, 90, 80, 85, ...moreScores];
console.log(scores);

//[ 70, 90, 80, 85, 77, 80 ]

• オブジェクトで広げる

const moreScores = {
  shiro: 77,
  goro: 88,
};
const scores = {
  taro: 88,
  jiro: 70,
  saburo: 90,
  ...moreScores,
};

console.log(scores);
// { taro: 88, jiro: 70, saburo: 90, shiro: 77, goro: 88 }