[JS] 자바스크립트 속성 접근자 점 표기법(Dot Notation) vs 괄호 표기법(Bracket Notation)

개요

• JavaScript에서 Object에 접근하는 방법은 Dot Notation(점 표기법) , Bracket Notation(대괄호 표기법) 두 가지가 존재함

점 표기법(Dot Notation)

• 객체 뒤에 마침표와 속성 이름을 지정하여 객체의 속성에 접근

const person = {
name :'John' ,
age :25 ,
address : {
city :'New York' ,
state :'NY'
   }
};

console .log(person.name) ;// 출력: John
console .log(person.address .city) ; // 출력:NewYork

장점

• 가독성이 좋다, 객체 지향 프로그래밍에 익숙한 개발자에게는 더 쉽다.
• 깔끔하고 간결한 구문을 제공, 코드 작성과 유지 관리가 더 쉽다.
• 대괄호 표기법보다 빠르다.(추가적인 처리가 필요없음)

단점

• 이름에 특수문자나 공백이 포함된 속성에는 점 표기법 사용 불가
• 동적으로 속성에 액세스하는데 사용할 수 없다.

대괄호 표기법(Bracket Notation)

• 객체 뒤에 대괄호를 지정하고 따옴표 안에 속성이름을 지정하여 객체의 속성에 접근

const person = { 
  name : 'John' , 
  age : 25 , 
  address : { city 
    : ' New York' , 
    state : 'NY'
   } 
}; 

console .log (person[ ' name' ]); // 출력: John
console .log (person[ 'address' ][ 'city' ]); // 출력: New York

장점

• 속성 이름을 변수로 전달할 수 있으므로 대괄호 표기법을 사용하면 속성에 동적으로 접근할 수 있다.
• 이름에 특수문자나 공백이 포함된 속성에 접근 가능

단점

• 속성이름을 평가하기 위해 추가적인 처리가 필요하므로 점 표기법보다 약간 느림
• 구문에 익숙하지 않은 개발자에게 가독성이 좋지 않다.

ex) 동적으로 액세스하는 예시

const person = { 
  name : 'John' , 
  age : 25 , 
  address : { 
    city : 'New York' , 
    state : 'NY'
   } 
}; 

const propertyName = 'name' ; 
console .log (person[propertyName]); // 출력 : John

결론

• 두 방법 모두 장단점이 존재, 상황에 따라 뭐가 좋은지 다르다.
• 동적으로 속성에 액세스 할때는 대괄호를 써라!

출처

• https://medium.com/@maxheadway/the-differences-between-dot-notation-and-bracket-notation-in-javascript-45b07a49ebc9