本ページはプロモーションが含まれています。

JavaScriptの関数とは?宣言の構文と関数を使うメリットとアロー関数について

JavaScriptの関数について JavaScript

関数とは、処理をひとまとめにしたものです。例えば、円の面積を計算する関数は以下になります。

function CalcCircleArea(r){
    return r*r*3.14;
}

特に複雑なプログラムであればあるほどプログラムが長くなり、読みにくくなりますが、よく使う処理をまとめておいて、処理を行う際に呼び出せば記述するコードが短くなります。

また、修正が必要になった場合でも、関数を使用していれば簡単に変更ができるのも関数のメリットとなります。

本記事では関数の宣言の構文から、関数を使用するメリット等やアロー関数について具体的に解説します。

基本のfunction

関数宣言の構文は下記のとおりです。

function 関数名(引数){
    /* 処理 */
}

関数名とは関数を呼び出すときに使用します。先程の円の面積を計算する関数を呼び出すときは、

CalcCircleArea(10);

と記述します。

引数に10が指定されているため、10*10*3.14により、314が値として返却(return)されます。引数とは関数内に与える値で、先程の例では円の面積を計算する時に必要な半径のrにあたります。

また、注意しなければならない点として、関数内で定義したローカル変数と、関数の外で定義したグローバル変数は区別されます。

var PI = 3.14;

function CalcCircleArea(r){
    var PI = 3;
    return r*r*PI; /* PIは3として扱われる */
}

console.log(CalcCircleArea(10)); /* 10*10*3 = 300 */ 
console.log(PI); /* 3.14 */

関数内で定義したPIと関数の外で定義されたPIは別物なので、関数内で再宣言を行ったとしても、その変数の値が上書きされることはありません。

なぜ関数を使うのか?関数のメリットとは?

それでは、なぜ関数を使用するのでしょうか。関数には主に下記のメリットがあります。

  • 同じ内容の処理を何度も実行できる
  • 変数のスコープ(有効範囲)を狭める事ができる

同じ内容の処理を何度も実行できる

先程の円の面積を求める関数のように、汎用性の高い関数を予め定義しておけば、その後の処理で何度も同じ処理を呼び出して実行できます。これによりコードの可読性を高めることができます。

変数のスコープ(有効範囲)を狭める事ができる

関数を定義することで、変数のスコープを狭めることができます。関数内で定義した変数はローカル変数と呼ばれ、関数の外から参照することはできません。これによりバグを軽減することができます。

アロー関数でさらに短く

先程の円の面積を求める関数はアロー関数で表現可能です。

let CalcCircleArea = r => r*r*3.14;
console.log(CalcCircleArea(10)); /* 314 */

アロー関数は下記のように解釈します。

関数名 = 引数 => 関数内部の処理

宣言関数と違って、やや可読性に難がありますが、とにかく短く書きたい場合におすすめです。

結論

関数を宣言することで、まとまった処理を何度も実行することができます。コードの可読性や不具合等にも関わるので、同様の処理はなるべく関数として定義しておきたいところです。

記事を書いている人

記事を書いている人Private Works

STUDY CODEの運営や記事の執筆は、Web制作やWebメディアを運営している個人事業(フリーランス)や、Web制作・プログラミングに精通したライターによって提供しています。詳しくはこちら

スポンサーリンク
JavaScript
studycode-adminをフォローする
STUDY CODE

コメント

タイトルとURLをコピーしました