【JavaScript】メソッドと関数の違いとは？わかりやすくまとめてみた。

本記事の目次

JavaScriptの関数とは
JavaScriptのメソッドとは
関数とメソッドの違い
まとめ

JavaScriptの関数とは

関数とは、複数の処理を1つにまとめたものです。

JavaScriptの関数は、functionキーワードを使用して宣言されるのが基本であり、一度定義した関数は別の箇所から呼び出し実行することができます。JavaScriptの特徴として、定義された関数はfunction型のオブジェクトとして扱われます。

最も一般的な関数の定義方法として、functionキーワードを使用した関数宣言という方法で関数を定義します。

// 引数で名前を受け取り、挨拶テキストを返す関数を定義する
function greet(name) {
  const message = `こんにちは、${name}さん。`;
  return message;
}

JavaScriptのメソッドとは

メソッドとは、実は関数のうちの一つであり、オブジェクト指向のプログラミング言語で多く利用されます。

メソッドは、簡単に言うとオブジェクト内（クラス内）で定義される関数のことを指します。

const greet = {
  name: "taro";
  // helloという名のメソッドを定義する
  hello: console.log(`こんにちは、${this.name}さん。`);
}

// メソッドを呼び出す
greet.hello(); // => こんにちは、taroさん。
greet["hello"]; // => こんにちは、taroさん。 （同上）

Javaではメソッドはクラス内でしか定義してはいけない決まりですが、JavaScriptではクラスに限らず、オブジェクト内で定義された関数のことをメソッドと呼びます。（JavaScriptではクラスもオブジェクトとして扱います。）

関数とメソッドの違い

関数とメソッドで呼び出し方法が異なる

関数の場合は、関数名の後に丸括弧()を記述することで呼び出すことができます。

一方、メソッドはオブジェクトに紐づいているため、どのオブジェクトのメソッドを呼び出すのかを明示的に記述する必要があります。

// func()関数を定義して、呼び出す。
function func() {
  console.log("関数を呼び出しました。");
}
func(); // => 関数を呼び出しました。

// objオブジェクトにmethod()メソッドを定義して、呼び出す。
const obj = {
  name: "メソッド",
  method: function() { console.log(`${this.name}を呼び出しました。`); }
}
obj.method(); // => メソッドを呼び出しました。

もしメソッドを通常の関数のように記述してしまった場合は、関数が定義されていないというエラーが出てしまうため注意しましょう。

const obj = {
  name: "メソッド",
  method: function() { console.log(`${this.name}を呼び出しました。`); }
}
method(); // => エラー

メソッドはthisで親オブジェクトを受け取る

メソッドではthisキーワードを使用し親オブジェクトを受け取ることができます。

const obj = {
  name: "メソッド",
  // thisキーワードを用いて、objオブジェクトのnameプロパティを参照しています。
  method: function() { console.log(`${this.name}を呼び出しました。`); }
}

ただし、メソッドを定義する際にアロー関数を使用するとthisの扱いが異なってくるため注意しましょう。

let name = "グローバル変数のname";
const obj = {
  name: "メソッド",
  // メソッドの定義にアロー関数を使用する。
  method: () => { console.log(`${this.name}を呼び出しました。`); }
}
obj.method(); // => グローバル変数のnameを呼び出しました。

アロー関数については、以下の記事で解説しています。