吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

【JS入門】関数について Vol.1(関数の定義、return文、引数)

2018年1月14日 / category : javascript

前回の記事では、オブジェクト型のメソッドについて解説した際、メソッドとは、値(データ)に関数が入った属性ということで次のようなコードを例にあげました。

sample.js
var obj = {
	getHello: function(){
		return 'こんにちわ';
	}
}

getHello属性の値(データ)にfunctionから始まるコードが記述されています。これが関数と呼ばれるものです。

関数とは

複数のタスク(処理)を一括して実行するコードの集まりを関数と呼び、その関数は外部からも呼び出すことのできるプログラムです。
関数の定義には、次のような内容があります。

・関数の名前(名前がない場合は、無名関数と言います。)
・引数の設定、丸括弧「()」で囲み、引数が複数ある場合は、コンマ「,」で区切ります。
・関数文の定義、波括弧「{}」で囲みます。

関数の定義のサンプルを次に記述します。

sample.js
function 関数名(引数1, 引数2, 引数3・・・){
	関数文
	return 返す値;
}

関数文の中にreturnという単語が出てきました。
これはreturn文というプログラムの構文です。
関数を実行する際、関数の呼び出し元に値(データ)を渡したい場合に使用します。
プログラム用語で「呼び出し元に値(データ)を渡す」ことを「値を返す」と言います。
もし値(データ)を返す必要がない場合は、returnがない関数文で問題ありません。

sample.js
function 関数名(引数1, 引数2, 引数3・・・){
	関数文
}

上の例は、値(データ)を返す必要のない関数文です。(return文がない)
それでは「値を返す」とは、どういう仕組みになっているか見てみましょう。

sample.js
function getAge(){
	return 37;
}
console.log( getAge() );

関数を実行する場合は、関数名+()という形式になります。

関数名() // 例) getAge()

これは引数のない場合の実行形式です。「引数」については後ほど解説しますが、もし引数がある場合は、丸括弧「()」の中に引数を設定することになります。

関数名(引数1,引数2,引数3・・・) // 例) getAge(37,36,35・・・)

話を戻し「値を返す」についてですが、上のコードをコンソール画面で確認すると、37が表示されます。
関数getAge内の関数文は、return文の1行です。
return 37;
これは、次のような構文になっています。

return 値(データ)

returnの後に指定されている値(データ)が返す値になります。
「値を返す」とは「呼び出し元に値(データ)を渡す」ことですので、return文が実行されたタイミングで値が渡され処理が終了します。
そのため、もしreturn文の後に関数文がまだ残っていたとしても、その関数文は処理されません。

上のコードで「呼び出し元に値(データ)を渡す」と具体的にどうなるか。
「呼び出し元」が関数getAgeの実行文にあたるので、「呼び出し元」はgetAge()になります。ここに値(データ)が渡されるので、getAge()が37になります。
console.log( getAge() );
上の状態が、次のようになることを意味します。
console.log( 37 );

この返ってきた値を変数に代入することもできます。

sample.js
function getAge(){
	return 37;
}
var age = getAge();
console.log( age );

変数ageを定義し、値には関数getAgeを実行するような形式で代入しています。コンソール画面の結果は同様に37が表示されます。
これは関数getAgeを実行すると、37が返ってきますので、その返ってきた値が変数ageに代入することになるためです。
以上が「値を返す」という表現についてですが、続いて、引数について解説します。

引数とは

上のコードでは引数を使用していない関数の例でしたので、引数を使用した関数の例を次に記述します。

sample.js
function getAge(age){
	return age;
}
console.log( getAge(37) );

上のコードをコンソール画面で確認すると、これも同様に37が表示されます。関数を実行する際、引数に37を代入して実行しています。
定義した関数getAgeの第一引数には、ageという引数名が定義されています。関数を実行する際、37を第一引数に代入しているので、定義側の第一引数ageに、37が代入されます。37が代入されたageをreturnで返しているので、コンソール画面で37が表示されます。

続いて、引数を複数使用した関数の例を次に記述します。

sample.js
function add(num1,num2,num3,num4){
	return num1 + num2 + num3 + num4;
}
console.log( add(1,2,3,4) );

上のコードをコンソール画面で確認すると10が表示されます。add関数には、引数が4つ定義されています。(num1, num2, num3, num4)
add関数を実行する際、引数にはそれぞれ1,2,3,4が代入されており、次のような状態になります。
num1 = 1, num2 = 2, num3 = 3, num4 = 4
これらを関数文で「+」で繋ぐことで足し算が実行されます。
1 + 2 + 3 + 4 = 10
となり、最終的に次のようになります。
return 10;

以上が引数についてですが、ES6から引数に新しい機能が2つ追加されました。

引数について、ES6から追加された2つの機能

追加された機能は「デフォルト仮引数」と「残余仮引数」です。それぞれ簡単に解説します。
まずはデフォルト仮引数ですが、言葉から推測できるかもしれませんが、引数にデフォルト値を設定することができるようになりました。
次のコードを見て見ます。

sample.js
function getAge(age){
	return age;
}
console.log( getAge() );

上のコードをコンソール画面で確認するとundefinedが表示されます。
関数getAgeには引数ageが定義されているのに、実行側で引数を代入していないため、引数ageが未定義のままになり、returnでundefined(未定義)が返ってしまっています。
では、新機能「デフォルト仮引数」を使って、関数getAgeの引数ageに初期値(デフォルト値)を設定して見みます。

sample.js
function getAge(age=37){
	return age;
}
console.log( getAge() );

上のコードをコンソール画面で確認すると37が表示されます。
関数getAgeの引数ageの定義が変更されています。age=37と37の値を代入した状態で定義することでこれが初期値(デフォルト値)となります。
あくまでこれは初期値(デフォルト値)ですので、実行する際に異なる値を代入することでそれが優先されます。

sample.js
function getAge(age=37){
	return age;
}
console.log( getAge(20) );

上のコードをコンソール画面で確認すると、実行側の引数20が優先され、20が表示されます。

続いて、残余仮引数について解説します。
関数を定義する際に、引数が不特定多数必要な場合が出てくるかもしれません。その場合に使用するのが残余仮引数という機能です。
ただ、この機能を説明する際にまだ解説していない「配列」というデータを使用する必要があるため、ここは少し触れる程度にしておきます。

sample.js
function getNumber(...numList){
	return numList;
}
console.log( getNumber(1,2,3,4,5,6,7,8,9) );

上のコードをコンソール画面で確認すると、次のような表示が出ます。
(9) [1, 2, 3, 4, 5, 6, 7, 8, 9]
これは配列をコンソールした際に出る表示です。内訳は次のようになります。
(配列の長さ)[配列の中身]

getNumber関数の引数の定義が…numListとなっています。これは次のような形式になっています。
… + 引数名
引数名の前に…をつけることで、実行する際の引数を配列に格納することができるようになります。
上のコードでは、実行する際に1,2,3,4,5,6,7,8,9を引数に代入しています。
これらの引数の値が全て配列になってnumList引数に渡されることなります。
そのため配列の長さが9で、配列の中身が[1, 2, 3, 4, 5, 6, 7, 8, 9]となった状態の値がコンソール画面に表示されています。

以上が、ES6から追加された2つの機能の解説になります。
次回、引き続き関数について解説していきたいと思います。