JavaScript本格入門(ISBN 978-4774184111)で基礎からJavaScriptを勉強するシリーズです。今回はChapter4から関数についてです。

関数の定義

方法は主に4つあります。

function命令を使う
Functionコンストラクタを使う
関数リテラル表現を使う
アロー関数(ES2015)を使う

しかし結論として、日常的に使うのはアロー関数でよさそうです。

function命令を使う

function 関数名(引数) {
  関数本体
};

例

function myFunc(arg) {
  return arg * arg;
};
let squared = myFunc(3);
console.log(squared);     // 出力:9

有名なfunction命令を使った関数定義ですが、静的な構造の宣言であったり意外とトリッキーな動きをします。宣言していないのに関数が使えるような動きをするのでバグを生みやすいので使わないほうがいいです。

コード解析時に関数の登録が行われるので、先に使おうとしても使える

let squared = myFunc(3);
console.log(squared);     // 出力:9

function myFunc(arg) {
  return arg * arg;
};

Functionコンストラクタを使う

let 変数名 = new Function('引数','関数本体');

例

let myFunc = new Function('arg','return arg*arg');
let squared = myFunc(3);
console.log(squared);

実行時に文字列をコードとして実行するのは、eval()等と同じくセキュリティ的によくないので使わないほうがいいです。

関数リテラル表現を使う

let 変数名 = function(引数) {関数本体};

例

let myFunc = function(arg) {
    return arg * arg;
}
let squared = myFunc(3);
console.log(squared);

function命令を使った場合と似ていますが、無名関数を定義してからmyFuncという変数に格納しています。
後述のアロー関数が使えない場合はこれを使うのがベターだと思います。

function命令とは違い静的な関数定義とはならない

let squared = myFunc(3);      // ReferenceError: myFunc is not defined　となる
console.log(squared);

let myFunc = function(arg) {
    return arg * arg;
}

アロー関数を使う

ES2015からはアロー関数によるユーザー定義関数が使えます。
functionに比べて、静的な宣言にならず挙動は幾分分かりやすいです。
またthisが固定化されるといった特徴もあります。
利用可能なら基本的にはアロー関数での定義を使う方がよさそうです。

これにより、関数の挙動が分かりやすく、バグを減らすことにつながりそうです。

let 変数名 = (引数1, 引数2, ...) => { 関数本体 };

例

let getTriangleArea = (base, height) => {
  return base * height / 2;
};
console.log(getTriangleArea(5, 2));

引数が1つの場合、括弧が不要だったり色々省力出来ます。

関数はデータ型の一種

JavaScriptの世界では、関数は変数のデータ型の一種です。

function myFunc1(arg) {                             // 1の方法
  return arg * arg;
};
console.log(typeof myFunc1);

let myFunc2 = new Function('return arg * arg;');    // 2の方法
console.log(typeof myFunc2);

let myFunc3 = function(arg) {                       // 3の方法
    return arg * arg;
};
console.log(typeof myFunc3);

let myFunc4 = () => {                               // 4の方法
    return arg * arg;
};
console.log(typeof myFunc4);

実行結果

function
function
function
function

関数とは言えデータ型のの1種なので、別の型のリテラルを代入すると変数は別の型になります。

function myFunc(arg) {
  return arg * arg;
};
console.log(typeof myFunc);     // 出力:function

myFunc = 1;                     // 数値型のリテラルを代入
console.log(typeof myFunc);     // 出力:number