知っておくとコードの理解が深まる！【JavaScriptの関数編】

お久しぶりです！最近、チーズケーキにはまってるしょうしょです!

今回はJavaScriptの関数についての記事です。

この記事は以下のような疑問を持っている方にぜひ読んでいただきたいです！

• 関数ってなに？
• どうやって使うの？
• なにができるの？

私も以前までよく分かっていなかったので、全然使ってませんでした・・・。

ですが、関数の使い方を覚えると楽になったり、ミスを減らせたり、いいことだらけなのでぜひ覚えてたくさん使っていきましょう！

前回のJavaScript入門編の記事はこちらになります（スコープとクロージャーの記事です）。

知っておくとコードの理解が深まる！【JavaScript入門編】

今回はJavaScriptのスコープとクロージャについての記事です。私自身、JavaScriptをさわり始めた頃はなんとなくでコードを書いたり、意味も分から...

そもそも関数とは・・・

関数（function）とは、よく行う処理を１つにまとめたもので、使いたい時に呼び出して利用します。

1つにまとめることで、同じ処理のコードを何度も書く必要がなく、使い回しができます。

効率良く、ミスを減らすためには必須スキルと言えるでしょう。

関数の宣言

関数は使用する際に、宣言する必要があります。関数を宣言する方法として「関数宣言」「関数式」があります。

関数宣言

1つ目に関数宣言によって書く方法です。こちらはJavaScriptの関数を宣言する方法として1番使用するため見たことがある人が多いかもしれません。

function sampleFn(){
//処理を記述
}

上記のコードは、関数にsampleという関数名を付けています。

関数名は自由に決めることができますが、コードを見直す、あるいは他の人が手を加える、というケースを考えると、一般的に「どのような処理をするのか」が処理を見なくても推測できるものが望ましいです。
例えば、何か値を追加するのであればadd〇〇や、何か値を設定するのであれば、set〇〇と決めていくと分かりやすいです。

関数式

2つ目に関数式によって書く方法です。

const sample = function(){
//処理を記述
}

関数は、文字列や数値と同じくデータの値としても扱うことができるため、変数に代入することができます。

呼び出し

宣言した関数を使用するためには関数を呼び出してあげる必要があります。
実際に関数（function）を作成して、それを呼び出して利用する方法を説明します。

まずは呼び出す方法を見ていきます。

• ※//〇〇は出力結果です

関数名（）;

実際に作成してみます。

function helloFn(){
	console.log('Hello');
}
helloFn();//Hello

const hello = function(){
	console.log('Hello');
}
hello();//Hello

上記のように関数宣言の場合は、関数名（）、関数式の場合は変数名（）で呼び出すことができます。

引数

関数では、引数という値を受け取ることができます。
一般的な引数の書き方は、

function 関数名(引数){
	//処理を記述
}

と記述し、引数を複数持たせたい時は

function 関数名(引数1、引数2,・・・){
	//処理を記述
}

と記述することができます。

コードで説明していきます。

function sampleFn(name,age){
	console.log(name + 'さんの年齢は' + age + '歳です。');
}
sampleFn('宮崎',20);//宮崎さんの年齢は20歳です。

上記では、まずsampleFnの引数にnameとageを設定しています。
関数内では、設定した引数を変数のように扱うことができます。

そして呼び出す際に、sampleFn(‘宮崎’,20)と引数を記述することでnameに宮崎という文字列、ageに20という数値が格納されます。

引数を使用することで、以下のようにさまざまな値で応用することが可能になります！

sampleFn('田中',30);//田中さんの年齢は30歳です。
sampleFn('川崎',28);//川崎さんの年齢は28歳です。
sampleFn('石田',24);//石田さんの年齢は24歳です。

引数に初期値を設定する

先ほど示したsampleFn（name,age）を例に説明していきます。

sampleFn();

上記のように引数を設定していて、呼び出し時に引数を持たせなかった場合、

undefinedさんの年齢はundefined歳です。

と出力されてしまいます。

引数に初期値を設定しておくと、呼び出し時に引数を持たせなかった場合に初期値が代入されるようになります。
初期値の設定方法は以下の通りです。

function sampleFn(name='佐藤',age=25){
	console.log(name + 'さんの年齢は' + age + '歳です。');
}

上記のように引数に初期値を設定することで、出力時に引数を持たせない場合でも

佐藤さんの年齢は25歳です。

と出力されます。

戻り値（return）

関数内にreturnと記述すると、値を戻り値として返すことができます。
以下のように記述します。

function sampleFn(){
	return //戻り値
}

これだけではイメージしづらいと思うため実際にコードの例を使って説明していきます。

function totalPrice(tax , price){
	return price + price * tax;
}
console.log('値段は' + totalPrice(0.1,800) + '円です。');

上記の例では、totalPriceという名前の関数を作成しているため、呼び出す時はtotalPrice()と書きます。
また、()内には引数を含めます。引数には、消費税率と値段を含めるため、購入する商品の値段が800円とすると、totalPrice(0.1 , 800)と記述すれば良いことになります。
そして、関数からリターンが返ってきたら、呼び出した部分がそのリターンに置き換わります。

上記のコードでは、

値段は880円です。

とコンソールに表示されます。
returnは、「リターンする（返す）」という意味の命令で、その右側のデータ（例ではprice + price * tax）を、呼び出し元に返します。

まとめ

JavaScriptにおける関数についてご紹介しました。

本記事のまとめ

• 関数とは、よく行う処理を1つにまとめたもの
• 関数を宣言する方法として「関数宣言」と「関数式」がある
• 関数を呼び出す時は、関数名()
• 引数を設定することで、呼び出し側から関数へ値を渡すことができる
• 「return」を使うと、関数内で処理をした結果を「戻り値」として返すことができる

JavaScriptで開発を行う際に関数は便利であり、よく使われるものとなっています。
積極的に取り入れていきましょう！

最後まで読んでいただき、ありがとうございました。

参照文献

確かな力が身につくJavaScript「超」入門　第2版