JavaScriptの関数のいろいろな呼び出し方を徹底解説！違いと使い分けをマスターしよう！
山崎講師
こんにちは。ゆうせいです。
JavaScriptでは関数を定義したあと、それを「呼び出す」ことで実行できます。でも実は、関数の呼び出し方にはいろいろなパターンがあるって知っていましたか？
たとえば、直接呼び出す方法もあれば、イベントを使う方法、オブジェクト経由、そしてコンストラクタや即時実行などもあります。
今回は、JavaScriptでよく使われる関数の呼び出し方6パターンを、初心者向けにわかりやすく解説します！
1. 通常の呼び出し（関数名を使う）
いちばん基本的な呼び出し方です。
function greet() {
console.log("こんにちは！");
}
greet(); // ← 呼び出し
- 関数名に()をつけるだけ
- 最もよく使う形式
2. オブジェクトのメソッドとして呼び出す
関数をオブジェクトのプロパティ（メソッド）として持たせて呼び出すパターンです。
const person = {
name: "ゆうせい",
greet: function() {
console.log("こんにちは、" + this.name);
}
};
person.greet(); // "こんにちは、ゆうせい"
thisはそのオブジェクトを指すようになる- オブジェクト指向の設計でよく使われる
3. イベントハンドラとして呼び出す
HTMLのボタンなどでユーザーの操作に応じて関数を呼び出すケースです。
<button onclick="sayHello()">クリックして！</button>
function sayHello() {
alert("こんにちは！");
}
あるいはJavaScriptからイベントを登録する方法もあります：
document.getElementById("myBtn").addEventListener("click", sayHello);
- イベントが起こったときに実行される
()（カッコ）をつけないことで、関数そのものを渡している点に注意！
4. 即時実行関数（IIFE：Immediately Invoked Function Expression）
関数を定義すると同時に実行する特別なパターンです。
(function() {
console.log("これが即時実行関数です！");
})();
- 定義と同時に1回だけ実行される
- グローバルスコープを汚さずに使える
- モジュール化の古典的テクニックとしてよく使われた
5. call() や apply() を使って呼び出す
関数を特定の this を指定して呼び出す方法です。
function greet() {
console.log("Hello, " + this.name);
}
const user = { name: "たろう" };
greet.call(user); // Hello, たろう
greet.apply(user); // 同じ結果
call()は引数をカンマ区切りで渡すapply()は配列で渡す- 関数の実行コンテキスト（thisの中身）を指定したいときに便利
6. bind() を使って新しい関数を作ってから呼び出す
const greet = function() {
console.log("Hi, " + this.name);
};
const person = { name: "さくら" };
const boundGreet = greet.bind(person);
boundGreet(); // Hi, さくら
bind()は呼び出しそのものではない- 新しい関数を返す → あとで呼び出す（遅延実行）
7. コンストラクタ関数として new で呼び出す
function Person(name) {
this.name = name;
}
const user = new Person("まこと");
console.log(user.name); // まこと
newをつけて関数を呼び出すと「インスタンス」が作られる- このとき
thisは新しく作られたオブジェクトになる
まとめ表で復習！
| 呼び出し方 | 書き方 | 特徴 |
|---|---|---|
| 通常の呼び出し | func() | 基本的な呼び出し |
| オブジェクトのメソッド | obj.method() | this がオブジェクトを指す |
| イベントハンドラ | element.onclick = func | イベント発生時に実行 |
| 即時実行関数（IIFE） | (function(){})() | 定義してすぐに1回だけ実行 |
| call / apply | func.call(obj) | this を明示的に指定 |
| bind | func.bind(obj) | this を固定した新しい関数を生成 |
| コンストラクタ呼び出し | new Func() | オブジェクトを生成（thisが新規オブジェクト） |
今後の学習の指針
thisの動きに注目して、いろいろな呼び出し方を試してみよう！- イベントやコールバックの中での関数呼び出しに慣れよう
- 即時実行関数や
bind()は、モジュール化や非同期処理の場面で役立つ！
わからない例があれば、ぜひコードと一緒に質問してみてくださいね！実際に書いて動かすことで、ぐっと理解が深まりますよ！
セイ・コンサルティング・グループの新人エンジニア研修のメニューへのリンク
投稿者プロフィール
