#52 JavaScriptの学習　オブジェクト取得・更新　超基本！初心者は必ず覚えましょう

オブジェクト

JavaScriptにおけるオブジェクトとは

配列　[値1, 値2, ・・・]

オブジェクト　[プロパティ値1: 値1, プロパティ値2: 値2, ・・・]

というように、配列の値に「プロパティ値」をくっつけたものが「オブジェクト」です。どのように使うかコードをみてみましょう。



const family = [
    {name: 'お父さん', age: '40'},
    {name: 'お母さん', age: '38'},
    {name: 'お兄ちゃん', age: '12'},
];

このように「name」や「age」がプロパティ値で、「お父さん」や「40」が値です。

取得

では、取得してみましょう。



const family = [
    {name: 'お父さん', age: '40'},
    {name: 'お母さん', age: '38'},
    {name: 'お兄ちゃん', age: '12'},
];
console.log(family);
// →[{name: 'お父さん', age: '40'}, {name: 'お母さん', age: '38'}, {name: 'お兄ちゃん', age: '12'}]
// すべて取得します。
console.log(family[0].name);
// →お父さん

familyという定数名だけであれば、すべてオブジェクトを取得します。値を取得する場合は「定数名[番号].プロパティ値」とします。番号にはオブジェクトの0~振り当てられた番号で、その番号のオブジェクトのプロパティ値を指定することで値を取り出すことが出来ます。

更新

値の更新は「定数名.プロパティ値 = 値」というように記述します。オブジェクトごと更新することも出来るのでみてみましょう。



const family = [
    {name: 'お父さん', age: '40'},
    {name: 'お母さん', age: '38'},
    {name: 'お兄ちゃん', age: '12'},
];
family[0] = {name: 'おじいちゃん', age: '65'}

family[2].name = 'お姉ちゃん';
family[2].age = '10';

console.log(family[0]);
// →{name: 'おじいちゃん', age: '65'}
console.log(family[2]);
// →{name: 'お姉ちゃん', age: '10'}

family[0]は「お父さん」の値があるオブジェクトを「おじいちゃんの値がある」オブジェクトにオブジェクトごと更新しています。family[2]はプロパティの値を１つずつ更新しています。

これで、オブジェクトの取得・更新はばっちりですね