JavaScript関数-基本- - デン のプログラミング攻略wiki

JavaScript関数の基本

関数

---

関数定義

 function 関数名(パラメータ) {
   処理
 }

• 関数の命名

関数はアクションであるので、関数名は通常動詞から始める。
以下が基本的なアクションと動詞の例。

show	何かを表示する
get	値を返す
calc	何かを計算する
create	何かを生成する
cheack	何かをチェックし審議値を返す

⚠️逆に言えば、1つの関数には1つのアクションのみを含ませるべき。

---

関数呼び出し

 関数名();

---

関数と変数

• ローカル変数

関数内で定義した変数は関数内でのみ呼び出せる。

• 外部（グローバル）変数との対応関係

関数内では外部で定義された全ての変数を呼び出すことができ、変更も可能。
⚠️すでに定義された外部変数を関数内で使用する場合、その値のコピーがローカル変数として使用されるだけなので、元の外部変数に影響はない。

---

パラメータ（仮引数）

関数定義の際に宣言する変数のこと。
パラメータを使うことで、関数に変数などのデータを渡すことができる。

またデフォルト値を設定することができ、関数などの式を代入することも可能。

 例）function(parameter1, parameter2 = 他の関数){}

---

アーギュメント（本引数/実引数）

関数呼び出しの際に関数に渡される、仮引数に対応したパラメータのこと。

---

returnディレクティブ

returnは関数の任意の場所に置くことができる。
関数を終了させ、指定した値を呼び出し元に返却する。

 記述例）return a + b;
        return true;
        return confirm('よろしいですか')?

返却する値を記述しない場合には、値は返却せず関数を終了させるのみ。
（正確にはundefinedを返す。return undefinedと同義になる）

関数式

---

関数式

関数式とは関数を作るための別の構文で、関数宣言と、その関数値を変数に代入する動作を同時に行うものである。

 let example = function() {
   処理
 };

関数式で宣言した関数の呼び出し

• 関数の値（ソースコード）のみ扱いたい場合

 example　　　//()を記述しない

• 関数を呼び出す場合

 example()　　//()を記述

---

コールバック関数

関数式の用法として、関数の値を他の関数に渡して使用する、というのが代表的なものである。

• 使用例

 function showOneAndTwo(one, two){
   one();
   two();
 }
 
 function showOne(){
   alert('1');
 }

 function showTwo(){
   alert('2');
 }
 
 showOneAndTwo(showOne, showTwo);

関数と関数式の違い-どちらを使えば良いか-

• 関数宣言

関数宣言で定義された関数は、JavaScriptが実行される前の段階で読み込まれるため、スクリプト/コードブロック全体で使用できる。
⚠️他の関数内など、ネストされた（子ブロックにあたる）コードブロック内で宣言されたものは外部からは呼び出せない。

• 関数式

関数式はその記述が実行された時に作られるため、それ以降でのみ使用できる。

どちらを使うべきか

(以下引用）
たいていのケースでは、関数の宣言が必要な場合、関数宣言が望ましいです。なぜなら、それ自身の宣言の前でも利用することができるからです。これにより、コード構成の柔軟性が増し、通常は読みやすくなります。従って、関数宣言がそのタスクに適さない場合にのみ関数式を使うべきです。このチャプターで幾つかの例を見て来ました、そして今後もっと見ていくでしょう。

アロー関数

---

基本構文

 let func = (arg1, arg2, ...argN) => expression

•引数が1つの場合、（）は省略可能
•引数がない場合空白（）を記述
•複数行で書く場合は{}をつける
•関数式と同じように関数を値として使用可能
•関数名を使わない場合も省略可能で、以下のような記述になる

 () => 処理

（心の声）「これが関数・・・？笑」

---

概要

（以下引用）
アロー関数はワンライナーに対し便利です。2つの種類があります:

括弧無し: (...args) => expression – 右側は式です: 関数はそれを評価しその結果を返します。
括弧あり: (...args) => { body } – 括弧があると、関数内で複数の文を書くことができます、しかし何かを返却する場合には、明確に return が必要です。

---

*

---

*

---

*

---