2023.02.22: コーディング

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

: しょうしょ

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

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

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

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

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

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

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

: 知っておくとコードの理解が深まる！【JavaScript入門編】
今回はJavaScriptのスコープとクロージャについての記事です。私自身、JavaScriptをさわり始めた頃はなんとなくでコードを書いたり、意味も分から...

INDEX

そもそも関数とは・・・
- 関数の宣言
呼び出し
引数
- 引数に初期値を設定する
戻り値（return）
まとめ

そもそも関数とは・・・

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

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

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

関数の宣言

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

関数宣言

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

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

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

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

　この時、同じ関数名を使わないように注意しましょう！　

関数式

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

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

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

　関数式で書く場合、再代入を防ぐためにも定数constに関数を代入するようにしましょう！　

呼び出し

宣言した関数を使用するためには関数を呼び出してあげる必要があります。
実際に関数（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)と記述すれば良いことになります。
そして、関数からリターンが返ってきたら、呼び出した部分がそのリターンに置き換わります。

上記のコードでは、