【JavaScript】関数の定義方法

こんにちは、ともです。

JavaScriptの関数周りを勉強中です。C, C++をやってきた自分としてはJavaScriptの関数って理解が難しいんですよね。

そこでJavaScriptの関数リテラルについて理解をまとめたいと思います。

function命令

最も一般的な関数の定義方法です。

function showName(name, family) {
    console.log('My Name is ' + name + ' ' + family);
}

showName('太郎', '田中');// My Name is 太郎　田中

この表記は他の言語でも同様ですのであまり迷わないかと思います。

C, C++を書いていた私としては関数を変数に格納するというのが新しく新鮮でした。

let showName = function (name, family) {
    console.log('My Name is ' + name + ' ' + family);
}
showName('太郎', '田中');

関数リテラルとして上記のように関数を作成することが可能です。

JavaScriptには組み込みオブジェクト(Build-in Object)と呼ばれるものがあり、この１つにFunctionオブジェクトが存在します。

このFunctionオブジェクトから関数を作成することが可能です。

let showName = new Function('name', 'family', "console.log('My Name is ' + name + ' ' + family)");
showName('太郎', '田中');

最後の引数が関数本体となります。このようにして関数の定義が可能です。

特徴として関数や引数を文字列として定義することが可能であることです。

文字列の場合外部からの悪意のある入力を実行できてしまう可能性があるため、Functionオブジェクトを利用する方法は避け、以降の関数リテラルやアロー関数で定義する方が良いです。

これはeval()で文字列をJavaScriptのコードとして実行する時の注意点と同様です。

function命令は性的な構造を宣言し、関数リテラル/Functionは実行時に評価されるという違いがあります。

function命令で宣言された関数は、どこらかでも実行が可能です。

しかし関数リテラル/Functionで宣言された関数は、その関数が実行された時点で変数へ格納されます。

よって関数リテラル/Functionで宣言された関数は格納後でしか利用できません。

function命令・Functionオブジェクトで関数を定義することができることが分かりました。

他にもアロー関数というES2015から追加された記法も存在しますので、そちらも勉強しましたらまとめて置こうと思います。