この記事では、 javascriptの 関数 について、関数宣言を一つ一つ紐解いて解説します。

【こんな方にオススメ】

・javascriptの学習を始めたけどよく分からないことが多い

・関数宣言について調べたけど知らない言葉が多くて理解できなかった

上記について解説します。

関数 とは

JAVASCRIPT.INFOによると関数とは『関数はプログラムのメインの “構成要素” です。これによりコードを繰り返すことなく何度も呼び出すことができます私たちは既に組み込み関数の例を見ています。 alert(message), prompt(message, default) や confirm(question)です。これと同じように私たち自身も関数を作ることができます。』とされています。

ここでいう組み込み関数とは、javascriptに組み込まれている（自作しなくても使える）関数です。

つまり、プログラムの中で同じような処理が繰り返し必要になるときは、その処理を関数として定義することで、何回も処理内容を記述しなくてもすぐに呼び出せるようになるという感じです。

関数 の定義方法

実際に関数の定義の仕方を見ていきましょう。

記述方法としては、

function 関数名 (パラメータ)｛

　　関数本体

｝

というようになります。

下記例では、BMIの計算を関数として定義するために、関数名、パラメータ、関数本体を下記のようにしています。

・関数名：BMI

・パラメータ：height(身長)、weight（体重）

・関数本体：weight(体重kg) ÷ height(身長m)2の値をreturnで返す

関数 の呼び出し

関数の定義ができたところで、関数を呼び出してみましょう。

作成した関数は、その関数名で呼び出すことができます。

関数の呼び出し：関数名（引数）；

この例では、関数名BMIにつづいて（）内の引数（60（体重）,1.7（身長））をパラメータに渡しています。

ここで、パラメータと引数が少し分かりづらいと思うので、整理すると

・パラメータとは、関数の宣言時に括弧内に記述される変数のこと(宣言時の用語)

・引数とは、関数が呼び出されたときに渡される値のこと(呼び出し時の用語)

になります。

つまり、関数を宣言するときに関数の処理で使用するパラメータを記述し、関数を呼び出すときにパラメータへ渡す引数を記述します。

上記の例では、関数【BMI】は【wight】と【height】というパラメータを持つと定義されており、それぞれに【60】と【1.7】という引数を与えて呼び出せれています。

引数が渡されなかった場合

関数の定義と呼び出し方が分かったところで、少し細かい解説に移ります。

先ほどの例で、引数が渡されなかった場合はどのような処理がされるでしょうか。

下記では、引数が一つの値60しか記述されていません。

結果は【60(weight)】,【undefined(身長)】となっています。

つまり、引数が空の場合はundefinedが渡されます。このように引数が空の際に渡される値のことを【デフォルト値】といいます。

また関数の計算結果は、数値型＊数値型以外となるため【NaN】が返されます。

データ型についての記事はこちらを参考に↓↓↓↓

デフォルト値の変更

引数が空の場合は、デフォルト値が渡される解説をしましたが、デフォルト値を変更することも可能です。

方法は、パラメータを【引数 = 変更したいデフォルト値】と記述します。

下記例では、変更したいデフォルト値を’未入力’としたので、未入力という文字列がパラメータに渡されています。

まとめ

以上が、javascriptの関数でした！

HTMLやCSSはある程度できるけど、javascriptに苦手意識を持っている方は少なくないと思います。

基本的なところから少しずつ理解していきましょう!

ABOUT AUTHOR

シュウヘイ

フリーランスのマークアップエンジニアとしてweb制作を中心に活動
HTML,CSS,Wordpress,javascript,その他独学方法やWeb制作フリーランスの経験談について情報を発信しています。