【JavaScript】関数(function)の使い方｜宣言、呼び出し、引数、戻り値

2022年5月23日2023年7月17日

本記事では、JavaScriptの関数(function)の宣言、呼び出し、引数、戻り値などの基本的な使い方について解説しています。

関数はJavaScriptを扱う上で、必須のものになるため使い方をマスターしましょう。

JavaScriptの学習におすすめ書籍

1冊ですべて身につくJavaScript入門講座

総合評価

( 5 )

メリット

誰でも分かるように嚙み砕いて説明してくれる
アニメーションの知識が深く学べる
1つのWebサイトを作りながら学べる

1冊ですべて身につくJavaScript入門講座 [ Mana ]

楽天ブックス

¥2,794 （2024/04/21 02:09時点 | 楽天市場調べ）

Amazonで探す

楽天市場で探す

Yahoo!ショッピングで探す

ポチップ

先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！

Amazon Kindle Unlimited

全プログラマー必見！
変数名/関数名にもう悩まない！

リーダブルコード

総合評価

( 5 )

メリット

美しいコードが書けるが自然と書けるようになる
他の開発者が理解しやすいコードになる

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)

著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤功平, 翻訳:角征典

¥2,640 （2023/07/23 02:48時点 | Amazon調べ）

Amazonで探す

楽天市場で探す

Yahoo!ショッピングで探す

ポチップ

関数とは？

関数とは、複数の処理を一つにまとめることができるものです。同じ処理を何度も使う場合、その処理を関数として一つにまとめてあげることで、関数を呼び出すだけでどこからでも使えることができます。

また、関数には引数と呼ばれる可変な値を受け取ることができたり、処理が完了したら値を返すこともできるので上手く使いこなすことで効率の良いプログラムを組むことができ効率良く開発をすることが可能になります。

関数の宣言の書き方

関数を使うにはまず始めに関数を宣言する必要があります。関数を宣言する方法として「関数宣言」「関数式」があります。

それぞれの宣言の仕方について解説していきます。

関数宣言の書き方

1つ目の関数を宣言する方法は、関数宣言です。これが一番JavaScriptの関数を宣言する方法で使用されます。

関数宣言の書き方は以下のとおりです。

function sampleFn() {
  /* 関数が呼ばれた時に実行したい処理を記述 */
}

上記のコードでは、関数にsampleFnという関数名を付けています。この関数名は後に解説する関数の呼び出し時に使われます。

開発は複数人で行われることがあるため、関数内の処理を見なくてもこの関数はどのような処理をするのか一目で分かるようにしましょう。例えば、名前を取得する処理がまとまっている関数ならgetNameや名前を格納する処理がまとまっている関数ならsetNameが分かりやすいです。

関数式の書き方

2つ目の関数を宣言する方法は、関数式です。関数式の書き方は以下のとおりです。

const sampleFn2 = function () {
  /* 関数が呼ばれた時に実行したい処理を記述 */
};

関数式は先程紹介した関数宣言とは異なり、関数名を書きません。その代わりに関数を変数に代入します。

JavaScriptを始めたばかりの人からすると、関数を変数に代入するということに困惑されるかもしれませんが、関数とは数値や文字列と同じデータの一種です。そのため、関数を変数に代入してもエラーが出力されたりすることはありません。

同じ関数名が複数ある場合

関数を宣言する時の注意点として、同じ関数名は使ってはいけません。

何故、同じ関数名を使ってはいけないのか実際にコードを見ながら確認してみましょう。

function sampleFn() {
  console.log("A");
}

function sampleFn() {
  console.log("B");
}

sampleFn(); // -> どっちが呼ばれる？

上記のコードはsampleFnという関数名を2回宣言しています。

1つ目の関数ではコンソールに「A」を出力させ、2つ目の関数ではコンソールに「B」を出力させます。では、この状態で関数sampleFnを呼び出すとどのような挙動になるのでしょうか？答えは、2つ目の関数のコンソール「B」が出力されます。つまり、1つ目の関数は上書きされ処理が無かったものとされます。

/* 後に呼ばれた関数に上書きされる */
function sampleFn() {
  console.log("A");
}

/* こっちの関数が呼ばれる */
function sampleFn() {
  console.log("B");
}

sampleFn(); // -> B

中規模〜大規模の開発になると関数の数も増え関数名が重複してしまう可能性が高くなります。

さらに、JavaScriptの関数は関数名が重複していてもコンソールにエラーが表示されません。これは非常に厄介で知らない間に関数名が重複していて想定していた挙動と違う！なんてことも起きます。

このような場合、定数constに関数式を代入することで対処することができます。

const sampleFn = function () {
  console.log("A");
};

/* 定数で宣言されているため、宣言しようとするとエラーが出力される
   Uncaught SyntaxError: Identifier 'sampleFn' has already been declared
*/
function sampleFn() {
  console.log("B");
}

変数のvar、letでは再代入が可能なため、必ずconstを使用します。

関数の呼び出し

宣言した関数を使うためには関数を呼び出してあげる必要があります。関数の呼び出し方は関数宣言と関数式で同じのため一緒に解説します。

function sampleFn1() {
  console.log("関数宣言が呼ばれました。");
}

const sampleFn2 = function {
  console.log("関数式宣言が呼ばれました。");
};

/* 関数を呼び出す */
sampleFn1(); // -> 関数宣言が呼ばれました。
sampleFn2(); // -> 関数式宣言が呼ばれました。

関数宣言の場合は「関数名()」で呼び出すことができ、関数式の場合は「変数名()」で呼び出すことができます。

引数の使い方

関数には引数と呼ばれる値を受け取ることができます。この引数を使うには関数を宣言する時と関数を呼び出す時に一手間加える必要があります。

まず始めに関数を宣言する時に引数を受け取る方法について解説します。

function sampleFn(val){
    console.log(val); // -> 渡された値が出力されます。
}

宣言した関数の()の中に、渡された値を受け取るための引数を設定します。この引数の名前に指定はありませんが、関数名と同様に分かりやすい名前を付けましょう。

続いて、関数を呼び出す時に渡したい値を()の中に入れます。

function sampleFn(val) {
  console.log(val); // -> test
}

/* ()の中に渡したい値を入れる */
sampleFn("test");

上記のサンプルコードを実行してみると、関数を呼び出した際に渡した値がコンソールに出力されているのが確認できます。

以上が、引数を使う一連の流れになります。

複数の引数を使う方法

引数は1つだけということはなく、複数使うことができます。複数の引数を使うには「,」で区切りを付けます。

function sampleFn(val1, val2) {
  console.log(val1); // -> A
  console.log(val2); // -> B
}

sampleFn("A", "B");

一つ注意点として複数の引数を使う場合、関数を宣言した時に設定した引数の数よりも関数を呼び出す時に渡す値の数が小さい場合、値が渡されなかった引数の値はundefinedになります。

function sampleFn(val1, val2) {
  console.log(val1); // -> A
  console.log(val2); // -> undefined
}

sampleFn("A");

上記のコードでは、引数が2つに対して渡した値は1つなので引数の1つの値がundefinedになります。このundefinedになる値は決まっており、最後に設定した引数になります。

引数は左から評価されていくので、1つ目の引数には「A」が渡され、2つ目の引数には何も渡されないのでundefinedになる仕組みです。

引数に初期値を設定する

引数を設定している状態で、関数を呼び出す時に値を渡さないと初期値としてundefinedが引数に代入されると前の見出しで解説しました。

もし、何も引数に値が渡されなかった場合はこの初期値を代入したい場合は、if文の条件分岐を使うか予め引数に初期値を使いましょう。おすすめはES6から追加された予め引数に初期値を設定する方法です。

/* ES6以前の書き方 */
function sampleFn(val) {
  if (!val) {
    val = "初期値";
  }
  console.log(val);
}

sampleFn(); // -> 初期値
sampleFn("A"); // -> A

/* ES6以降の書き方 */
function sampleFn(val = "初期値") {
  console.log(val);
}

sampleFn(); // -> 初期値
sampleFn("A"); // -> A

関数の戻り値

関数内にreturn文を追加することで、値を戻り値として返すことができます。

function sampleFn() {
  return // -> 戻り値を設定
}

書き方は分かっても値を戻り値として返すのイメージが湧きづらいですよね。

例えば、電卓のようなプログラムを作成する場合、2つの値を足し算や引き算して算出された値が必要になります。このように関数内で処理を実行して、その処理で得られる値が欲しい時に戻り値を使います。

/* 足し算 */
function plus(num1, num2) {
  return num1 + num2;
}
console.log(plus(1, 2)); // -> 3
console.log(plus(5, 7)); // -> 12

/* 引き算 */
function minus(num1, num2) {
  return num2 - num1;
}
console.log(minus(3, 5)); // -> 2
console.log(minus(4, 10)); // -> 6

上記のコードでは、関数plusを呼び出すと引数に渡された値が足し算されその結果を戻り値として返し、関数minusを呼び出すと引数に渡された値が引き算されその結果を戻り値として返します。

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！