関数（function）JavaScriptにおける基本的な構成要素です。関数を利用することで目的ごとに処理を分割したり、似たような処理を何度も書く必要がなくなります。この記事ではJavaScriptで関数を定義する方法や、関数を呼び出す方法について解説します。
関数（function）とは
関数とは、複数の処理を１つにまとめたものになります。関数を利用することで目的ごとに処理を分割したり、似たような処理を何度も書く必要がなくなります。そのため関数を使用した場合、記述するコードの文量を少なくすることができます。
またJavaScriptにおいて関数はFunction型のオブジェクトとして扱われます。関数をオブジェクトとして扱うことが出来るのはJavaScript特有の特徴となります。
関数を定義する方法
関数を使用するには、まずは関数を定義（作成）する必要があります。JavaScriptで関数を定義するにはいくつかの方法があります。もっとも代表的な関数定義の方法である「関数宣言」と、その他の方法についてそれぞれ紹介していきます。
関数宣言での関数の定義
もっとも代表的な関数定義の方法である「関数宣言」について解説します。
関数宣言の構文は次のようになります。
function 関数名(引数1, 引数2, …){
実行される処理1;
実行される処理2;
…
return 戻り値;
};
関数を宣言するには function のあとに関数名を指定します。
関数名のあとの 「()」 の中に引数を指定します。複数の引数がある場合にはカンマ(,)で区切って記述します。引数が無い場合には何も記述しなくてもいいのですがその場合は「()」のみ 記述します。
関数が呼び出された時に実行される処理を 「{}」 のブロック内に記述します。処理は一つでも複数でも記述できますが、関数の場合は処理が１つであってもブロックを表す 「{}」 を省略することはできません。
関数の呼び出し元に値を返す場合には return 文を使用します。 retrun 文のあとに記述した値が関数の呼び出し元に返されます。 return 文が実行されると、関数内での処理は終了となります。必要なければ return 文は省略可能です。
この構文を使用して実際にコードを記述してみると次のようになります。
function sumPrice(int1,int2){
let int3 = int1 + int2;
return int3
};
sumPriceという関数を定義しています。ただ関数は定義しただけでは何も行いません。関数を利用するには関数を呼び出す必要があります。
関数宣言以外で定義する方法
関数宣言により関数を定義する方法と考え方は同じになりますので、それぞれ構文をご紹介します。
Function コンストラクタでの関数の定義
Function コンストラクタを使用した場合の構文は次のようになります。
let 変数名 = new Function(‘引数1’, ‘引数2’, …, ‘実行される処理’);
関数リテラルでの関数の定義
関数リテラルを使用した場合の構文は次のようになります。
let 変数名 = function(引数1, 引数2, …){
実行される処理1;
実行される処理2;
…
return 戻り値;
};
アロー関数式での関数の定義
アロー関数式を使用した場合の構文は次のようになります。
let 変数名 = (引数1, 引数2, …) => {
実行される処理1;
実行される処理2;
…
return 戻り値;
};
関数を呼び出す方法
定義した関数を呼び出す方法について解説します。関数を定義するには様々な方法がありました。しかし定義するときと異なり、関数を使用するときには基本的にひとつの方法しかありません。関数を呼び出す時の構文は次のようになります。
関数名(引数, …);
関数名のあとの 「()」 の中に引数を指定します。複数の引数がある場合にはカンマ(,)で区切って記述します。引数が無い場合には何も記述しなくてもいいのですがその場合は「()」のみ 記述します。
let 変数名 = 関数名(引数, …);
関数からの戻り値を変数に格納する場合には、次のように = 演算子の左辺に変数、右辺に関数の呼び出しを記述します。関数を呼び出したあと、関数からの戻り値が変数に格納されます。
関数の定義から呼び出しまでのコードを記述してみると次のようになります。
//関数の定義
function sumPrice(int1,int2){
let int3 = int1 + int2;
return int3
};
//関数の呼び出し
let result = sumPrice(3, 4);
//コンソールへ結果を出力
console.log(result);
//実行結果は「7」となります
関数を呼び出した式を左辺の変数resultに格納していますが、この変数にはsumPrice関数を呼び出した実行結果が設定されています。実行結果とは、前項で説明したreturn文で返却した値のことです。また、引数の存在しない関数を呼び出す場合ですが、その場合は呼び出す際にも引数を設定する必要はありません。
まとめ
この記事ではJavaScriptで関数を定義する方法や、関数を呼び出す方法について解説しました。JavaScriptにおいて関数は頻繁に利用するものなので、しっかりと基礎を抑えておきましょう。また関数を使用することにより、記述するコードの文量が少なくなり読みやすいコード記述が可能なります。この記事を参考に、JavaScriptにおける関数を習得いただければと思います。
JavaScriptを短期間かつ効率的に学びたい方は
「独学だと分からないことが多すぎる」「プログラミングをより現場に近い形で学びたい」「学んだ後にどう収益に繋げればいいの？」と考えている方も多いでしょう。
そんな方には、現役エンジニア講師在籍/案件獲得サポートもあるプログラミングスクールで学ぶのがおすすめです。都度検索しながら知識を補完していくのではなく、体系立てて学ぶことで短期間かつ効率的にプログラミングを習得することが可能です。
「即戦力になれる！稼いでいけるようになれる！」プログラミングスクールを紹介した記事をこちらに記載しておきますので、是非ご覧ください。
コメント