점표기법(Dot notation) vs 괄호표기법(Bracket Notation)

객체의 Properties의 접근법에는 위의 두가지가 있다.

Dot Notation (읽기 쉽고 더 자주 사용)

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

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

프로퍼티 식별자는 알파벳( _ & $ 포함)로 시작한다. 숫자로 시작할 수는 없다.

 

Bracket Notation

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

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

프로퍼티 식별자는 문자열(String)을 갖는다. 어떤 문자든 공백을 포함할수 있다.

변수가 문자열로 해석되면 변수 또한 쓸 수 있다.

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); // woof

위의 예시와 비슷하지만, 주요한 차이점은 bracket notation을 통해 변수를 통과시킨다. 

obj 안에 있는 dog 프로퍼티를 찾는것 같지만, 여기서 dog는 'cat'의 값을 갖는다. 

bracket을 사용함으로써, 문자열값이 패스되고 'cat' 프로퍼티를 찾는다. obj["cat"] // meow

같은 예시에서 dot notation을 사용한다면 변수에 접근할 수 없기에 dog 변수의 값대신 dog 문자열의 값을 찾는다.

 

array 에서도 사용

let arr = ['a', 'b', 'c'];

let letter = arr[1]; // objectName["propertyName"]

console.log(letter); // b

 

Dot notation	Bracket notation
프로퍼티 식별자는 오직 알파벳만 가능( _ & $ 포함)	프로퍼티 식별자는 문자열 혹은 문자열을 참조하는 변수
숫자로 시작할 수 없음	숫자로 시작할 수 있음
변수를 포함할 수 없음	변수, 공백 사용 가능
OK ㅡ obj.prop_1, obj.prop$	OK ㅡ obj["1prop"], obj["prop name"]
NOT OK ㅡ obj.1prop, obj.prop name

 

---

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