[JavaScript] 점 표기법(정적속성) vs 대괄호 표기법(동적속성) [6/2 study]

 

 

점 표기법(정적속성) vs 대괄호 표기법(동적속성)

 

 

 

 

❗️상황

 

공부를 하면서 문득 이렇게 작성한 코드를 보고 점 표기법으로 작성을 안하는 이유가 뭐지 하고 의문이 들었다.

export default function App() {
  const [order, setOrder] = useState("createdAt");

  const sortedItems = items.sort((a, b) => b[order] - a[order]);
  
  /.../
  
}

 

❗️공부하고 깨달은 점

 

점 표기법으로 접근하려면 속성 이름이 고정된 경우에만 사용할 수 있습니다.

예를 들어, b.order와 같이 접근하는 경우에는 order가 객체의 정적 속성이어야 합니다.

그런데 지금 코드는 order값이 상태 값으로 동적으로 설정되어 있으므로 대괄호 표기법(b[order])을 사용해야 합니다.

 

❗️결론

 

점 표기법과 대괄호 표기법의 차이점

• 점 표기법 (.): 정적으로 정의된 속성에 접근합니다.
• 대괄호 표기법 ([]): 동적 속성에 접근합니다. 속성 이름이 변수로 지정될 수 있습니다.

 

🔥마무리

상태 값처럼 동적으로 변하는 값은 대괄호 표기법을 사용해야 한다는 점을 알아서 유익한 공부 였다!

오늘도 화이팅!!