JavaScriptの関数とオブジェクトの関係を理解しよう

こんにちは！今日はJavaScriptの関数について、生徒のOZくんと先生のプロ太先生の会話を通して学んでいきましょう。

Contents

関数もオブジェクトって本当？
第一級オブジェクトって何？
関数リテラルって何？
- Functionコンストラクタを使う方法（非推奨）
- 関数式（関数リテラル）を使う方法（推奨）
JavaScriptのメソッドとは？
実践例：関数を活用してみよう
まとめ

関数もオブジェクトって本当？

先生、JavaScriptの関数について質問があります。関数がオブジェクトだって本当ですか？

いい質問だね！まずは実際にコードを見てみよう。

function sayHello() {
    console.log("こんにちは！");
}

// 関数の正体を調べてみよう
console.log(sayHello.__proto__.constructor.name); // "Function"
console.log(sayHello.__proto__.__proto__.constructor.name); // "Object"

うわー、本当に”Function”と”Object”って出てきました！これってどういう意味ですか？

JavaScriptでは、関数はFunctionという組み込みオブジェクトのインスタンス（実例）なんだ。そしてFunctionはObjectを祖先に持っているから、関数も結局はオブジェクトの一種なんだよ。

第一級オブジェクトって何？

第一級オブジェクトって言葉が出てきたんですが、これはどういう意味ですか？

第一級オブジェクト（First-Class Object）というのは、「他の普通の値と同じように扱える」ということだよ。具体的には以下のことができるんだ。

変数に代入できる

// 関数を変数に代入
const greet = function() {
    console.log("おはよう！");
};

greet(); // "おはよう！"

配列の要素にできる

// 関数を配列に入れる
const funcs = [
    function() { console.log("関数1"); },
    function() { console.log("関数2"); },
    function() { console.log("関数3"); }
];

funcs[0](); // "関数1"
funcs[1](); // "関数2"

オブジェクトのプロパティにできる

// 関数をオブジェクトのプロパティにする
const calculator = {
    add: function(a, b) {
        return a + b;
    },
    multiply: function(a, b) {
        return a * b;
    }
};

console.log(calculator.add(3, 5)); // 8

他の関数に引数として渡せる

function executeFunction(func) {
    func();
}

function sayGoodbye() {
    console.log("さようなら！");
}

// 関数を引数として渡す
executeFunction(sayGoodbye); // "さようなら！"

関数の戻り値として返せる

function createGreeter(name) {
    return function() {
        console.log(`こんにちは、${name}さん！`);
    };
}

const greetTaro = createGreeter("太郎");
greetTaro(); // "こんにちは、太郎さん！"

すごい！関数が普通の値みたいに使えるんですね。これって他の言語にはない特徴なんですか？

そうなんだ。JavaやRubyなどの多くの言語では、関数（メソッド）はこんなに自由に扱えないんだよ。これがJavaScriptの大きな特徴の一つなんだ。

関数リテラルって何？

関数の作り方について詳しく見てみよう。実は関数には複数の作り方があるんだ。

Functionコンストラクタを使う方法（非推奨）

// Functionコンストラクタで関数を作る
const sum = new Function('n', 'm', 'return n + m;');
console.log(sum(3, 5)); // 8

関数式（関数リテラル）を使う方法（推奨）

// 関数式で関数を作る
const add = function(n, m) {
    return n + m;
};
console.log(add(3, 5)); // 8

この2つは同じ働きをするんですか？

結果は同じだけど、Functionコンストラクタを使う方法は危険があるから使わない方がいいんだ。理由は、、、

文字列をJavaScriptコードとして実行するから危険
常にグローバルスコープで実行されるから予期しない動作をする可能性がある

だから普通は関数式や関数宣言を使うんだよ。

JavaScriptのメソッドとは？

さて、メソッドについて説明しよう。JavaScriptでは「オブジェクトのプロパティになっている関数」をメソッドと呼ぶんだ。

通常の書き方

const student = {
    name: "田中",
    age: 16,
    introduce: function() {
        console.log(`私の名前は${this.name}で、${this.age}歳です。`);
    }
};

student.introduce(); // "私の名前は田中で、16歳です。"

短縮記法

const student2 = {
    name: "佐藤",
    age: 17,
    introduce() {  // functionキーワードを省略
        console.log(`私の名前は${this.name}で、${this.age}歳です。`);
    }
};

student2.introduce(); // "私の名前は佐藤で、17歳です。"

短縮記法の方がすっきりしてますね！でも、JavaやRubyのメソッドとは違うんですか？

いい視点だね！JavaやRubyでは、メソッドはクラス内で定義された特別な存在だけど、JavaScriptでは単に「オブジェクトのプロパティが関数になっているだけ」なんだ。

const calculator = {
    result: 0,
    add: function(num) {
        this.result += num;
        return this;
    },
    subtract: function(num) {
        this.result -= num;
        return this;
    },
    getResult: function() {
        return this.result;
    }
};

// メソッドチェーンも可能
console.log(calculator.add(10).subtract(3).getResult()); // 7

実践例：関数を活用してみよう

最後に、関数が第一級オブジェクトであることを活かした実践例を見てみよう。

// イベント処理の例
const buttons = {
    clickHandlers: [],
    
    addClickHandler: function(handler) {
        this.clickHandlers.push(handler);
    },
    
    simulateClick: function() {
        this.clickHandlers.forEach(function(handler) {
            handler();
        });
    }
};

// 異なる処理を追加
buttons.addClickHandler(function() {
    console.log("ボタンがクリックされました！");
});

buttons.addClickHandler(function() {
    console.log("カウンターが増えました！");
});

buttons.simulateClick();
// "ボタンがクリックされました！"
// "カウンターが増えました！"