JavaScriptのゲッター(getter)とセッター(setter)の違いとは?使い方を実例で解説
ゲッター(getter)とセッター(setter)を使用すると、オブジェクトアクセサ(Object Accessors)を定義できます。両者の違いは、ゲッターがオブジェクトからプロパティの値を取得するために使われるのに対し、セッターはオブジェクトのプロパティに値を設定するために使われるという点です。ここでは、具体例を挙げながらそれぞれの使い方を解説します。
ゲッター(getter)とは
ゲッターは、get キーワードを使って定義します。対応するプロパティにアクセスしたタイミングで関数が自動的に実行され、その戻り値が取得されます。
コード例
次の例では、「business」という名前のオブジェクトを作成し、ゲッター「comp」を通じて「company」プロパティの値を取得して表示しています。
<html>
<body>
<script>
var business = {
Name: "Musk",
Country : "America",
company : "PayPal",
get comp() {
return this.company;
}
};
document.write(business.comp);
</script>
</body>
</html>
実行結果
PayPal
セッター(setter)とは
セッターは、set キーワードを使って定義します。対応するプロパティに値を代入すると関数が自動的に実行され、引数として渡された値をもとに処理を行えます。
コード例
次の例では、「business」という名前のオブジェクトを作成し、セッターを使って「company」プロパティの値を「PayPal」から「SolarCity」へ変更しています。
<html>
<body>
<script>
var business = {
Name: "Musk",
Country : "America",
company : "PayPal",
set comp(val) {
this.company = val;
}
};
business.comp = "SolarCity";
document.write(business.company);
</script>
</body>
</html>
実行結果
SolarCity
ゲッターとセッターの違いまとめ
- ゲッター:
getキーワードで定義し、プロパティの値を読み取る(取得する)際に呼び出される。 - セッター:
setキーワードで定義し、プロパティに値を代入する(設定する)際に呼び出される。 - アクセサを活用することで、内部データを直接公開せずに読み書きを制御できるため、入力値のチェック(バリデーション)や算出プロパティの実装などにも役立ちます。
-
JavaScriptにおける関数とメソッドの違いとは?わかりやすく解説
JavaScriptにおいて、関数とメソッドは本質的には同じものです。両者の違いは、メソッドがオブジェクトのプロパティとして定義された関数であるという点にあります。つまり、独立して定義されたものを「関数」、オブジェクトに紐づけられたものを「メソッド」と呼びます。 JavaScriptの関数の基本形 まず、一般的な関数の定義方法を見てみましょう。 function functionname(param1, param2){ // 処理内容 } JavaScriptのメソッドの例 メソッドは、オブジェクトに関連付けられた関数です。次の例では、employeeオブジェクトの中にdetails
-
JavaとJavaScriptの違いとは?歴史・技術・使い分けを徹底解説
ウェブ開発者のジェレミー・キースは2009年、「JavaとJavaScriptの関係は、ハムとハムスターの関係のようなものだ」と語りました。この比喩がどれほど正確かは議論の余地がありますが、その本質は的確です。共通する言語的ルーツを持つにもかかわらず、JavaとJavaScriptはまったく異なる2つのプログラミング言語なのです。年月とともに両者の重なりも多少増えましたが、今なおJavaScriptはウェブサイトにインタラクティブ性をもたらすフロントエンド言語の主流であり続け、Javaはサーバーサイドやアプリケーション開発で人気を保っています。開発者を採用したい方、プログラミングを学びたい方