객체 프로퍼티에 접근하는 방법에는 2가지가 있다.

Dot Notation

let obj = {
	cat: 'meow',
	dog: 'woof'
};

let sound = obj.cat; // objectName.propertyName;
console.log(sound); // meow

문제 예시

let obj = { ask: 1, a: 3, bunch: 3, try: 1, get: 1, "":2 }
delete obj."" // Uncaught SyntaxError: Unexpected string

닷 노테이션의 프로퍼티 식별자는 알파벳으로 시작 하기 때문에 syntax에러가 뜨는 것을 볼 수 있다.

Bracket Notation

브라켓 노테이션의 프로퍼티 식별자는 문자열이다.

예시

let obj = {
	cat: 'meow',
	dog: 'woof'
};

let sound = obj.['cat']; // objectName["propertyName"]
console.log(sound); // meow

예외
변수가 문자열로 해석된다면 변수 또한 사용이 가능하다.

예시

let obj = {
	cat: 'meow',
	dog: 'woof',
};

let dog = 'cat';			let dog = 'cat';
let sound = obj[dog];			let sound = obj.dog;

console.log(sound); // meow		console.log(sound);

bracket notation을 통해 변수를 통과시킬 수 있다는 것을 보여주고 있다.
객체 안에 있는 dog의 프로퍼티를 찾는것 같지만('woof'), 여기서 dog는 할당된 'cat'의 값을 갖는다.

브라켓 노테이션을 사용함으로써 문자열값이 통과되고 'cat' 프로퍼티를 찾게된다.
dot notation을 사용한다면 변수에 접근하지 못하고 특정 프로퍼티값에만 접근이 가능하기 때문에 닷노테이션을 사용해야만 한다.

문제예시

let obj = { ask: 1, a: 3, bunch: 3, try: 1, get: 1, "":2 }
delete obj[''] // true
console.log(obj) // { ask: 1, a: 3, bunch: 3, try: 1, get: 1 }

정상적으로 ""값이 삭제 된 것을 확인 할 수 있다.

reference
https://codeburst.io/javascript-quickie-dot-notation-vs-bracket-notation-333641c0f781