TIL 015 | 점표기법(Dot Notation) vs 괄호표기법(Bracket Notation)

김태규·2021년 8월 9일

객체의 프로퍼티에 접근하는 방법에는 2가지가 있는데, 점표기법과 괄호표기법이다.

1. 점표기법(Dot Notation)

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

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

객체의 이름 뒤에 점을 찍어주고 그 뒤에 key를 넣어주면 그 key에 해당하는 value값이 출력된다.

2. 괄호표기법(Bracket Notation)

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

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

객체의 이름 뒤에 대괄호 [ ]를 써주고 안에 key를 넣어주면 그 key에 해당하는 value값이 출력된다.

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 활용 불가능

괄호표기법에서는 변수를 프로퍼티 식별자로 사용할 수 있지만, 점표기법에서는 불가능하다.

만약 위의 예시에서 객체 안에 myKey를 key값으로 하는 프로퍼티가 있다면 어떻게 될까?

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값에 해당한다.