【JavaScript ~関数について~】勉強メモ③

JavaScriptちゃんと学習中。
ほぼ自分の勉強メモです。
過度な期待はしないでください。

関数

　- 関数とは、「いくつかの処理をまとめたもの」
　
　- 関数の定義
　「function()」と書き、その後ろの中括弧「{ }」の中にまとめたい処理を
　書くことで関数を用意することが出来る。
　
　関数の定義には2種類の方法がある。
　関数宣言と呼ばれる方法と、もう1つが無名関数を用いた関数式と呼ばれる方法。
　関数宣言と関数式の役割には大きな違いはなし（正確には、読み込まれるタイミングが異なるが。。。）
　関数式とすることで、何かに代入したり他の関数に渡しやすくなる。

書き方

// 関数宣言
function 関数名(){
  //まとめたい処理内容
}

// 関数式（無名関数）
const 定数名 = function(){
  //まとめたい処理内容
};

定数名(); →　「定数名()」とする事で関数を呼び出す事が出来る

例

// 関数の定義
const greet = function() {
  console.log("こんにちは！");
  console.log("元気ですか？");
};

// 関数を呼び出す
greet();

// 出力結果 → こんにちは！　元気ですか？

アロー関数

　- 「function()」の部分を「( ) =>」としても、これまでと同じように関数を
　定義することが出来る。この関数の書き方のことを、特別にアロー関数と呼ぶ。
　これはES6から導入された新しい書き方。

アロー関数

// 関数の定義
const greet = () => {
  console.log("こんにちは！");
  console.log("元気ですか？");
};

// 関数を呼び出す
greet();

// 出力結果 → こんにちは！　元気ですか？

引数

　- 関数に与える追加情報のようなもの、
　関数を呼び出すときに一緒に値を渡すことで、関数の中でその値を利用することが出来る。

引数を受け取る関数を定義

// どれでも可

function 関数名（引数名）{
  //まとめたい処理内容
  console.log(`私の名前は${引数名}`です);
};


const 定数名 = function(引数名){
  //まとめたい処理内容
  console.log(`私の名前は${引数名}`です);
};

const 定数名 = (引数名)=>{
  //まとめたい処理内容
  console.log(`私の名前は${引数名}`です);
};

// 引数を受け取る関数を呼び出す
定数名(値) → その値は関数の引数に代入されます

例

// 関数の引数にnameを追加
const greet = (name) => {
  // 「こんにちは、〇〇さん」となるように出力
  console.log(`こんにちは、${name}さん`);
};

// greetの引数に「Aki」を渡して呼び出す
greet("Aki");

// 出力結果 → こんにちは、Akiさん

　- 複数の引数を受け取る関数
　引数は、左から順番に「第1引数、第2引数、...」と呼ぶ。
　(　)の中に受け取る引数をコンマ(,)で区切って並べる。

複数の引数を受け取る関数を定義

const 定数名 = (第１引数, 第２引数)=>{
  //まとめたい処理内容
};

// 引数を受け取る関数を呼び出す
定数名(第１引数の値, 第２引数の値);

例

// 関数の引数にnameとageを追加
const information = (name, age) => {
  console.log(`彼女の名前は、${name}さん`);
  console.log(`彼女の年は、${age}です`);
};

// greetの引数に「Aki」を渡して呼び出す
information("Aki", 25);

// 出力結果 → 彼女の名前は、Akiさん　彼女の年は、25です

戻り値

　- 呼び出し元で受け取る処理結果を戻り値（もどりち）と呼ぶ。
　「return 値」と書くことで、関数はその値を戻り値として返す。

例

const half = (number) => {
  // numberを2で割った値を戻り値として返す
  return number / 2 ;
};

// 定数resultを定義
const result = half(130);

// 「130の半分は〇〇です」となるように出力
console.log(`130の半分は${result}です`);

// 出力結果 → 130の半分は65です

スコープ

　- 関数の引数や、関数内で定義した定数や変数は、その関数の中でしか使うことが出来ない。
　→ その範囲のことをスコープと呼ぶ。

関数の中の定数

const introduce = () => {
  // 定数nameを定義
  const name = "Aki";

  // 定数nameが使えるは範囲
};

// 定数nameが使えない範囲

　- 関数の外で定義した定数や変数は、関数の中でも外でも使うことが出来る。

関数の外の定数

// 定数nameを定義
const name = "Aki";

const introduce = () => {
  // 定数nameが使える範囲
};

// 定数nameが使える範囲

過去投稿記事

【JavaScript ~変数・定数、if文・switch文~】勉強メモ
【JavaScript ~for文、配列、オブジェクトについて~】勉強メモ②
【JavaScript ~クラスやインスタンス、メソッドについて~】勉強メモ④
【JavaScript ~ファイルの分割について~】勉強メモ⑤
【JavaScript 読み込み】勉強メモ⑥
【JavaScript ~配列のメソッド~】勉強メモ⑦
【JavaScript ~コールバック関数~】勉強メモ⑧
【JavaScript ~HTMLを置き換え、ダイアログボックス~】勉強メモ⑨
【JavaScript ~イベント~】勉強メモ⑩
【JavaScript ~イベント(入力内容を取得)とDateオブジェクト~】勉強メモ11
【JavaScript ~Mathオブジェクト~】勉強メモ12