2021年10月23日 JavaScript (JS Primer)
関数の上書きについて
functionキーワードで同じ名前の関数を宣言した場合、
同じ名前の関数を上書きします。このことから、関数は名前で区別していることが分かります。
function fn(x) { return `x: ${x}`; } function fn(x, y) { return `x: ${x}, y: ${y}`; } console.log(fn(2, 10)); // => x: 2, y: 10
varにも同じ性質があります。
var array = [1, 2]; console.log(array); // => [ 1, 2 ] var array = [1, 2, 3] console.log(array); // => [ 1, 2, 3 ]
メソッド
関数とメソッドは機能としては同じです。
オブジェクトのプロパティのバリューが関数の場合、そのプロパティをメソッドと呼びます。
次のコードではオブジェクト内でmethod1プロパティに関数を定義しています。
const obj = { method1: function() { return "これはメソッドです"; } }; console.log(obj.method()); // => "これはメソッドです"
以下のように短縮することが出来ます。
const obj = { method() { return "this is method"; }, method2() { return "メソッド２です！！！やったあああ！！！"; } }; console.log(obj.method2()); // => "メソッド２です!!!やったあああ!!!"
メソッドを呼び出す場合は()をつける必要があります。
オブジェクトとプロパティについて
オブジェクトとは、プロパティの集合体です。オブジェクトは、キーとバリューの組み合わせであるプロパティを何個でも持てます。オブジェクトは、オブジェクトリテラル{ }で囲むことで、オブジェクトとして認識されます。
プロパティとは、キーとバリューが対になったもののことです。オブジェクトに属する変数のようにイメージすると分かりやすいです。実際、変数のように使用することが出来ます。下記の例では、makerというキーとappleというバリューが１つのプロパティとして扱われています。この時、makerに紐づくappleというバリューの値を変えたい場合があると思います。その時は以下のように操作します。
// オブジェクト.プロパティ名(キーに紐づくバリューにorangeという値を入れています) iPhone.maker = orange iPhone.maker //=> orange
まるで、makerという変数に値を代入しているように扱うことが出来ます。それが変数のように扱う事ができると言われる理由です。プロパティでは、バリューに紐づくキーを使ってバリューの値を操作する事が出来ます。
画像引用
ただし、以下のようにプロパティのバリューの部分に関数が入っている場合はプロパティとは呼ばなくなるので注意です。call: function(){}の部分はメソッドと呼ばれます。ここで、callは関数と紐づく変数と同じように扱われ関数の呼び出しなどにもcallが使われます。
画像引用
プロパティに関する所見
オブジェクトとプロパティの違いについて
オプジェクトとプロパティを同じもののように認識していたが厳密にはこのような違いがあります。
// オブジェクトはオブジェクトリテラルを含む全てを指します。 {key: value} // プロパティはキーとバリューの組み合わせを指します。 key: value // オブジェクト内では、複数のプロパティを持つことが出来ます。 {key: value, key2: velue2}
プロパティの定義方法について
キーとバリューの組み合わせがプロパティですが、constの宣言内でプロパティを定義する場合と宣言の外でプロパティを定義したい場合の差異をまとめとして書いておきます。
// constで宣言する際にプロパティのバリューを定義する場合 const obj = {key: value} // 宣言の外でプロパティを定義したい場合 obj.key = value
