【JavaScript】関数・メソッドとは？3種類の定義方法を知ろう

おはようございます。タカヒデです。

本日は、「JavaScriptにおける『関数・メソッド』について3種類の定義方法」を紹介します。

ぜひ本記事を参考にしてください。

関数・メソッドとは

関数とは、与えられた情報を基に処理を行い、結果を返す仕組みのことです。

また、メソッドとは、オブジェクトのプロパティに格納された関数のことを指します。

「関数もメソッドも同じではないか？」と思われるかもしれませんが、基本的に『関数』と『メソッド』は同一のものであると理解して問題ありません。

関数は主に、同じ処理がコードの中で何度も発生する場合に使用します。

同じ処理を関数にすることでコードがシンプルになり、コードの修正が必要な際にも関数一つを直すだけで良くなります。

この関数はJavaScriptに定義されている定型的な処理ではなく、オリジナルでまとまった処理を定義することが可能です。

関数の記載方法

関数の定義には『function』命令を利用します。

//関数の定義方法

function 関数名(引数){
   関数の処理
   return 戻り値;
}

//関数の定義方法

function 関数名(引数){
   関数の処理
   return 戻り値;
}

続けて、関数の呼び出し方法も見ていきましょう。

//関数の呼び出し方法

関数名(引数);

//関数の呼び出し方法

関数名(引数);

以下が記載例です。
今回は長方形の面積を求める関数を作成します。

function getRectangle(height, width) {
    return height * width;
}

console.log(getRectangle(5, 8));
//実行結果：40

function getRectangle(height, width) {
    return height * width;
}

console.log(getRectangle(5, 8));
//実行結果：40

「getRectangle」関数を作成し、関数を呼び出す際に引数「縦：5」「横：8」を与えています。

与えられた引数を基に「縦×横」の計算を実施し、最終的に戻り値として「40」を返しています。

関数における3種類の定義方法

関数の定義には『function』命令以外に3種類の定義方法があります。

①Functionコンストラクタ

1つ目は「Functionコンストラクタ」です。
まずは記載方法を見ていきます。

//記載方法

new Function(‘引数’,’関数の処理’)

//記載方法

new Function(‘引数’,’関数の処理’)

以下が記載例です。

let getRectangle = new Function(
    "height",
    "width",
    "return height * width"
);

console.log(getRectangle(5, 8));
//実行結果：40

let getRectangle = new Function(
    "height",
    "width",
    "return height * width"
);

console.log(getRectangle(5, 8));
//実行結果：40

記載するのが長く面倒くさいです。
特別な理由がない限り、あえてFunctionコンストラクタを利用する必要はありません。

②関数リテラル

2つ目は「関数リテラル」です。
まずは記載方法を見ていきます。

//記載方法

function(引数){関数の処理}

//記載方法

function(引数){関数の処理}

以下が記載例です。

let getRectangle = function (height, width) {
    return height * width;
};

console.log(getRectangle(5, 8));
//実行結果：40

let getRectangle = function (height, width) {
    return height * width;
};

console.log(getRectangle(5, 8));
//実行結果：40

関数リテラルは宣言した時点では関数名を持たないことから、匿名関数・無名関数とも呼ばれます。

③アロー関数

3つ目は「アロー関数」です。
まずは記載方法を見ていきます。

//記載方法

(引数) => {関数の処理}

//記載方法

(引数) => {関数の処理}

以下が記載例です。

let getRectangle = (height, width) => {
    return height * width;
};

console.log(getRectangle(5, 8));
//実行結果：40

let getRectangle = (height, width) => {
    return height * width;
};

console.log(getRectangle(5, 8));
//実行結果：40

ES2015で追加された記載方法でシンプルな記載が可能です。
JavaScriptの記事を見るとアロー関数で書かれたコードがたくさん出てきます。

まとめ

以上が「JavaScriptにおける『関数・メソッド』について3種類の定義方法」でした。

この記事が誰かの参考になれば幸いです。

お疲れさまでした。

タカヒデ

ITを楽しく勉強中

X

通信会社の企画職で働く30代 非エンジニアでありながら半分趣味でITエンジニアリングやプログラミングを学習中 IT初心者が楽しいと思えるように発信することを目指しています ↓Xもやっているのでフォローしてね