JavaScriptのメソッドについて。
〜関数との違いは？

オブジェクトのプロパティとしての関数..だそうだが。

こんにちは、「ふ」です。
今回は「JavaScriptのメソッドとは？」について解明していきます。

JavaScriptの学習中、「メソッド」という言葉はよく目にするかと思います。これは何なのか。

<script> 〜 </script>の中に直接記述された、function( )うんぬん。
これは、「関数」です。

const obj = ｛ bbb:function() { ・・・・ } ｝;

一方で、オブジェクトの中で定義された関数。
これは「メソッド」と呼ばれています。

つまり、

・オブジェクトの中にある関数が、メソッド。

ということです。

「..あ、そうなんですか」
とはなりますが、「記述場所の違い」とだけ言われても、ちっともスッキリしません。
じゃあ何で、

「関数」と「メソッド」を区別しているのか??

〜ということですよね💧

そこで今回の記事では、

・オブジェクト内でのメソッド定義の方法
・メソッドと関数では、どのように違うのか？

これらについて説明していきます。
「JavaScriptの仕組み」にまた１歩足を踏み入れる内容です。

JavaScriptのオブジェクトとは？

2022.11.19
jsの本質を知る第１歩はここ。

前回の記事⬆︎では、JavaScriptのオブジェクトについて紹介しました。
「オブジェクトとは？」となった方は、先にこちらをご覧ください。

メソッドの作り方。

前回の復習になりますが、オブジェクトのプロパティには関数を入れることもできるのでした。
メソッド( = オブジェクト内の関数 )を定義するには以下のように行います。

const taro = ｛ bbage:20, bbgreet:function() { bbconsole.log("よう！") } } ;

オブジェクトのプロパティは「プロパティ名：値」の形式で記述します。
関数を含めたいときには値の部分に関数を記述するだけです。プロパティ名は「greet（挨拶する）」としました。


定義したメソッドを、オブジェクトの外側から呼び出してみましょう。

taro.greet(); 「「３▶︎ よう！」」

「オブジェクト名.プロパティ名( )」で実行することができます。
taroの挨拶はなかなかフランクです。

これでもOK。

ちなみにメソッドは、⬇︎のように記述することもできます。

const taro = ｛ bbage:20, bbgreet() { bbconsole.log("よう！") } ｝; taro.greet(); 「「３▶︎ よう！」」

このほうが通常の関数のように書けるので、馴染みやすいかもしれません。
また見た目上、単なる値を含めたプロパティとの識別がしやすいですね。

そしてここからは、フツーの関数にはない「メソッドの特徴」について探っていきます。

違い@1@、独自の名前空間。

JavaScriptのオブジェクトの中では、独自の名前空間が適用されます。

let greet = function() ｛　〇〇〇〇　｝;

オブジェクトの外側で、「greet」という関数を定義しました。

let greet = function() ｛　〇〇〇〇　｝; let greet = function() ｛　△△△△　｝; 「「３▶︎ syntaxError: Identifier 'greet' has already been declared」」

その上で、同じ変数名で別の関数を定義すると、「'greet'はすでに宣言されています」となり、エラーになります。
これは、当たり前ですね。変数や定数は一意のものであるべきで、重複した名前のものがあってはならないからです。

const taro = ｛ bbgreet() { bbconsole.log("よう！") } ｝;

それではさっきの「taro」オブジェクト。
オブジェクト内で、メソッド「greet」を定義しています。

const hanako = ｛ bbgreet() { bbconsole.log("ごきげん麗しゅう") } ｝;

新たに「hanako」オブジェクトを作りました。
ここでもメソッド「greet」を定義して、処理内容はtaro.greetは別のものです。

そしてこれはエラーになりません。それぞれの「greet」が異なる名前空間に存在しているからです。

名前空間？

唐突ですが、「きつね」という名前。
世間一般で「きつね」といえばあの可愛い動物のことを指します。
しかしうどん屋さんの中での「きつね」は、きつねうどんのことを指すでしょう。あるいは学校の生徒の間では、密かに先生につけたあだ名かもしれません。

このとき、世間一般（グローバルな環境）、うどん屋さん、学校の生徒の間ではそれぞれ別の「名前空間」を持っていると言えます。
うどんを食べ終えて外に出たら、グローバルな名前空間に従えば良いわけで、「きつね」という名前が重複していたとしても、問題になりません。

同じ要領でJavaScriptにおいても、グローバル環境下とオブジェクト内では別々の名前空間を持っています。
名前空間をまたがって関数名が重複しても、エラーはならない、ということです。

const taro = ｛ bbgreet() { bbconsole.log("よう！") } ｝; const hanako = ｛ bbgreet() { bbconsole.log("ごきげん麗しゅう") } ｝;

扨（さて）話を戻しましょう。
「taro」と「hanako」オブジェクトにおいて、同じメソッド名で違う処理を用意しておくと、おもしろいことができます。

function greet(obj) { obj.greet(); }

オブジェクトの外側であるグローバル環境で、関数を定義します。

greet(taro); 「「３▶︎ よう！」」 greet(hanako); 「「３▶︎ ごきげん麗しゅう」」

ここがミソですが、引数にオブジェクト名を入れて実行してみましょう。
するとtaroとhanakoでは、それぞれが自分の名前空間にある「greet」メソッドを呼び出して実行します。
グローバル環境で定義した関数は１つのみですが、名前空間の異なるオブジェクトを参照させることで、結果２種類の処理を行うことができました。

ここではconsole.logの内容を変えただけですが、もっと色々な処理を書いていってもちゃんと実行されます。
taroにはさらにフランクな行動を、hanakoにはお上品な振る舞いを追加していきましょう。

メソッドの特徴１、

独立した名前空間の性質を利用して、１つの関数だけで違う処理を行うことができる。

function tarogreet() { console.log("よう！"); } function hanakogreet() { console.log("ごきげん麗しゅう"); }

ちなみに⬆︎は、オブジェクトやメソッドを使わずに同じ処理をしようとしたコードです。

この場合、<script>直下であるグローバル空間に、２つの関数定義が必要になってきます。さらに登場人物を増やした場合には、その数だけ関数定義することになってしまいます。

であれば「taro」「hanako」それぞれをオブジェクト化し、それぞれの処理を収納しておいたほうがコードが整然としてわかりやすいですね。

違い@2@、プロパティを参照した処理。

メソッドを使用するもう１つの利点は、「オブジェクトのプロパティを参照した処理ができる」という点です。

const jiro = ｛ bbmoney:200 bb｝;

オブジェクト「jiro」を作りました。そして、現在の所持金を表すプロパティ「money」を入れています。
jiroの所持金は200円、という設定です。

const jiro = ｛ bbmoney:200, bbpay(price) ｛ bbbbif(price <= 「「１this」」.money) { bbconsole.log("買った!"); bb｝ else ｛ bbconsole.log("無理"); bb} bb｝;

さらにメソッド「pay」を加えます。引数「price」には商品の値段を入れる予定です。
条件として、priceがthis.money以下であれば「買った！」そうでなければ「無理」と出力するようにしました。

this??

ここで「this」というキーワードが登場しました。「this」は、メソッド自身が置かれているオブジェクトを指しているものです。

現在このメソッドが置かれているオブジェクトは、「jiro」です。
となると、「this.money」は「jiro.money」を指しているということです。

ということで、if文に提示した条件は「priceがjiroの所持金200円以下であれば」という意味になります。

■ thisキーワードは、記述された場所によって指している対象が変わってきます。
今回の説明が当てはまらないケースもありますので、後日thisキーワードについての記事を設け、詳しく説明させていただきます。

グローバル環境からjiroのpayメソッドを呼び出してみましょう。

jiro.pay(150); 「「３▶︎ 買った！」」

値段となる引数を「150」としたところ、jiroは商品を買うことができました。

if(price <= this.money) ｛・・・

このとき内部では、if文の条件式が判定されています。
「price」は引数に入れた「150」ですね。
「this.money」では自身のオブジェクトからmoneyプロパティを参照して、ここは「200」となります。

(150 <= 200) で、結果はtrue。
よって「買った！」が出力されました。

ここからわかること。
メソッドでは「this」を使うことによって、自分が所属するオブジェクト内のプロパティを参照し、その値を利用した処理を行うことができます。

メソッドの特徴２、

オブジェクト内のプロパティを参照した処理ができる。

const saburo = ｛ bbmoney:100, bbpay(price) ｛ bbbbif(price <= this.money) { bbconsole.log("買った!"); bb｝ else ｛ bbconsole.log("無理"); bb} bb｝;

もう１つオブジェクト「saburo」を作りました。
saburoの所持金（money）は100円です。そして同じ処理内容の「pay」も入れておきました。

function shopping(obj,price) { obj.pay(price); }

グローバル環境にもどって関数「shopping」を定義します。第１引数にはオブジェクト、第２引数には商品の値段を入れる予定です。
「jiro」と「saburo」それぞれのオブジェクトに対して使ってみましょう。

shopping(jiro,150); 「「３▶︎ 買った！」」 shopping(saburo,150); 「「３▶︎ 無理」」

メソッドは、それぞれ自分が所属するオブジェクトのプロパティ(所持金)を参照して、結果を導きます。

メソッドの特徴を使って、かなり複雑な処理を行うことができました♪

結論と更なる疑問。

最後までお読みくださり、ありがとうございました。
今回はJavaScriptのメソッドについて紹介してきましたが、大きな特徴は２つ。

▪️ 独立した名前空間を利用することができる。

▪️ オブジェクト内のプロパティを参照した処理ができる。

通常の関数とは違い、「オブジェクトの中にいる関数」ならではの、特別な処理ができる。
これがメソッドということです。めでたしめでたしですね！

..ちょっと待て。

Math.random(・・) console.log(・・)

JavaScriptの学習中、⬆︎のようなものに遭遇するかと思います。
上は乱数を返す、Math.random。下はこの記事でもさんざん使ったconsole.log。
これらも「メソッド」と呼ばれていますよね？

この方達はどこから来たのか？ 元々あったものか？メソッドの特徴はわかったけれど、更なる疑問が湧きます。
次回はこれらの元々ある(？)メソッドについて、さらにその母体とされる「〇〇オブジェクト（ラスボス）」についてお伝えします。お楽しみに。

ではまた〜 ♫