Javascript メモ

Javascriptのオブジェクトについて自分用にメモします。

オブジェクトの省略表記

オブジェクトは省略して作ることができます。

const a = 1;
const b = 2;
const obj = {a, b}
console.log(obj) //{ a: 1, b: 2 }

オブジェクトから変数の代入

オブジェクトから変数を作ることができます。

const props = { numList: [1,2,3], children: "This is a child" };
const {numList, children} = props;
console.log(numList); // [1,2,3]
console.log(children); // "This is a child"

ただしキーと違う変数名で代入するとundefinedになります。

const {a, b} = props;
console.log(a); // undefined
console.log(b); // undefined

オブジェクトを展開する

オブジェクトの前に...と表記することで中身を展開できます。

const object = { a: 1, b:2 };
console.log({...object}); // {a: 1, b: 2}

{}で囲わないとエラーになります。

console.log(...object); // Uncaught TypeError: Found non-callable @@iterator at <anonymous>

値を更新する

{}の中でオブジェクトを展開してさらにそこにキーバリューペアを追加できます。
同じキーがあると後に追加された値で更新されます。

const object = { a: 1, b:2 };
console.log({...object, a: 5}); // { a: 5, b: 2 }
console.log({ a: 5, ...object }); // { a: 1, b: 2 }

変数名がキーになる

変数に入れたオブジェクトをさらに{}で囲むと変数名がそのままキーになります。

const object = { a: 1, b:2 };
const object2 = {object};
console.log(object2); // {object: { a:1, b:2 }
console.log(object2.object); // {a: 1, b: 2}
console.log(object2.object.a); // 1

変数をオブジェクトのキーにしたい時は[]で囲む

変数をオブジェクトのキーに指定したいときは[]で囲みます。

const num = 2;
const object = {1: "a", [num]: "b"}
console.log(object); // {1: "a", 2: "b"}

以上です。