【JavaScript】関数とメソッドの違いとは？初心者向けに分かりやすく解説

この記事ではJavaScriptに出てくる関数とメソッドの違いについて、言葉の意味と役割の違いについて解説していきます。

結論としては関数とメソッドの違いはオブジェクトに属しているのかどうかの違いになります。
オブジェクトに属している関数のことをメソッドと言います。

この記事の内容は以下の通りです。

関数とは処理を一つにまとめたものです。同じ処理を何度も書かなくていいように名前を付けて再利用できるようにしています。

関数にはいくつか書き方がありますが、基本的には以下のように書きます。

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

上記のコードはコンソール上に「こんにちは」と表示させるシンプルな関数となっています。

この関数を呼び出すには以下のように書きます。

sayHello();

関数は関数名を書くだけで呼び出すことができます。これは関数がオブジェクトに属していないためです。

メソッドとはオブジェクトに属している関数のことです。そのためメソッドの機能も関数と同じで処理を一つにまとめたもので、再利用できるようになっています。

メソッドの例としてquerySelector()があります。querySelectorを呼び出す際は以下のような書き方をします。

document.querySelector('.title');

querySelector('.title'); //これはエラーになります。

このようにquerySelector()単体で呼び出す書き方はしません。これはquerySelector()がdocumentオブジェクトに属する関数だからです。

メソッドを呼び出す時はオブジェクト名.メソッド名();の書き方をします。

メソッドは自作することもできます。自作したメソッドに関してもオブジェクト名.メソッド名();の形で呼び出します。

const user = {
  name: "いぬっころ",
  sayHello() {
    console.log("こんにちは");
  }
};

user.sayHello();

自作したメソッドもquerySelector()のようなJavaScript側が用意したメソッドも用意した側が違うだけでオブジェクトに属する関数という点は同じです。

ちなみに補足ですが、メソッド以外にもオブジェクトのプロパティにアクセスする場合もオブジェクト名.プロパティの形でコードを書きます。

関数とメソッドはどちらも処理を実行するという点においては同じですが、役割が違います。

関数は特定のオブジェクトに依存せず、汎用的な処理を定義します。これは関数がどこからでも呼び出せることが関係しています。

一方メソッドはオブジェクトに関する処理が定義されています。そのためメソッドにはオブジェクトが持っているデータに関する処理が書かれることが一般的です。

関数とメソッドの違いはオブジェクトの属している関数かどうかの違いです。
オブジェクトに属している場合はメソッド、属していない場合は関数と呼びます。

最後まで読んでいただきありがとうございました！