TIL 015|点マークと括弧マーク

オブジェクトのpropertyにアクセスするには、ポイントタグ法とカッコタグ法の2つの方法があります.

1.点記号

let myself = {
  name: 'Code Kim',
  country: 'South Korea',
  age: 30,
  cats: ['냥순', '냥돌']
};

// Dot Notation
myself.name  // 'Code Kim'
myself.age   // 30

オブジェクト名の後にポイントを追加し、キーを追加すると、そのキーに対応する値が出力されます.

2.かっこタグ

let myself = {
  name: 'Code Kim',
  country: 'South Korea',
  age: 30,
  cats: ['냥순', '냥돌']
};

// Bracket Notation
myself['name']  // 'Code Kim'
myself['age']   // 30

オブジェクトの名前の後にカッコ[]を付け、キーを1つ追加すると、キーに対応する値が出力されます.

3.差異

let myself = {
  name: 'Code Kim',
  country: 'South Korea',
  age: 30,
  cats: ['냥순', '냥돌']
};

let myKey = 'cats';

console.log(myself['cats']);  // ['냥순', '냥돌']
console.log(myself[myKey]);   // ['냥순', '냥돌']
// 변수 myKey 활용 가능
console.log(myself.myKey);    // undefined
// 변수 myKey 활용 불가능

カッコタグ法ではproperty識別子として変数を使用できますが、ポイントタグ法では不可能です.
上記の例で、オブジェクトにmykeyをキー値とするpropertyがある場合、どうなりますか?

let myself = {
  name: 'Code Kim',
  country: 'South Korea',
  age: 30,
  cats: ['냥순', '냥돌'],
  myKey: "Hello, world!"
};

let myKey = 'cats'
console.log(myself['cats']);  // ['냥순', '냥돌']
console.log(myself[myKey]);   // ['냥순', '냥돌']
// 여기서 myKey는 객체 밖에 있는 변수에 해당한다.
console.log(myself.myKey);    // "Hello world!"
// 여기서 myKey는 객체 안에 있는 key값에 해당한다.

references

https://youngban.tistory.com/46
https://codeburst.io/javascript-quickie-dot-notation-vs-bracket-notation-333641c0f781