❓
objectとObject、小文字と大文字の違いだけだと思ってませんか？
2024年12月号 objectとObject
はじめに(対象読者)
JavaScriptの勉強を始めるぞ！と意気込み、環境構築をして勉強を進めていくうちに
[object,Object] とコンソールに出てきて謎だな...となっている人に向けての記事となります。
objectとObjectって何が違うの？
object（小文字） とは「型」を表す一般的な概念
Object（大文字） とはオブジェクト（名前（キー）と値（バリュー）が対になったプロパティ）を生成したり扱うための機能が詰まったコンストラクタ
コードを参照しながら、説明していきたいと思います。
const obj = {key:"value"};
console.log(obj.toString());//[object Object]
console.log(String(obj));//[object Object]
Stringコンストラクタ関数とtoStringメソッドの結果は同じになります。では、toStringを再定義してしてみることにしましょう。
const customObject={
toString(){
return "custom value";
}
};
console.log(String(customObject)); //"custom value"
上記のようにStingコンストラクタ関数で文字列にしてみると、toStringメソッドの返り値であることが分かります。今のコードを書き換えてみることも可能です。
const customObject = {
toString: function f() {
return "custom value"
}
};
console.log(`${customObject}`); //"custom value"
スッと入っていきやすのが、どちらかは読者の方によると思います。
objectの中身は？
また、objのプロパティを空になるように定義し、中身を見てみると
このようにたくさんのPrototypeが生えていることに気づきます。
これを用いると、
const obj = {
"one": 1,
"two": 2,
"three": 3
};
// `Object.keys`はキーを列挙した配列を返す
console.log(Object.keys(obj)); // => ["one", "two", "three"]
// `Object.values`は値を列挙した配列を返す
console.log(Object.values(obj)); // => [1, 2, 3]
// `Object.entries`は[キー, 値]の配列を返す
console.log(Object.entries(obj)); // => [["one", 1], ["two", 2], ["three", 3]]
このように様々な情報を得ることができます。
参考文献
詳しくは↓
もっとわかりやすく簡単に知るにはこちらもおすすめです。↓
Discussion