Posted at

【JavaScript】プロパティへのアクセス

More than 5 years have passed since last update.

JavaScriptでのオブジェクトは名前と値を持つプロパティの集合である。

// taroオブジェクト生成

// {プロパティ名:プロパティ値, ...}
var taro = {living : true, age : 25, gender : 'male'};

オブジェクトの各プロパティを操作するには、操作対象のプロパティにアクセスする必要があるが、そのアクセス方法は2種類存在する。


ドット記法によるアクセス

// プロパティの取得

console.log(taro.living, taro.age, taro.gender);
// 出力:true 25 'male'

// プロパティの更新(設定)
taro.living = false;
taro.age = 40;
taro.gender = 'female';
console.log(taro);
// 出力:Object {living: false, age: 40, gender: 'female'}


ブラケット記法によるアクセス

// プロパティの取得

console.log(taro['living'], taro['age'], taro['gender']);
// 出力:true 25 'male'

// プロパティの更新(設定)
taro['living'] = false;
taro['age'] = 40;
taro['gender'] = 'female';
console.log(taro);
// 出力:Object {living: false, age: 40, gender: 'female'}


で、どうやって使い分ける?

記述の単純さから、基本はドットによるアクセスにすべき。

しかしながら、ブラケットが有利な場合も存在する。

例えば変数を使用してアクセスしたい場合。

変数の値を変えればアクセスするプロパティを変更することも可能になる。

var obj1 = { TaroTanaka: 'male',

HanakoTanaka: 'female' };
var first = 'Hanako', last = 'Tanaka';
console.log(obj1[first + last]); // 出力:female
first = 'Taro';
console.log(obj1[first + last]); // 出力:male

また、数値や予約語などといった、不正な名前を持つプロパティへアクセスする場合も有効である。

// プロパティ名に数値や予約後は使用できない(文字列は可)

var obj2 = { '123': '数値', 'class' : '予約語'};
console.log(obj['123'], obj['class']); // 出力:数値 予約語