안티패턴

const textContent = document.querySelector('.element').textContent;
const className = document.querySelector('.element').className;
const clientWidth = document.querySelector('.element').clientWidth;

굿패턴

const {textContent,className,clientWidth} = document.querySelector('.element');

왜?

MDN에서는 querySelector를 다음과 같이 설명하고 있습니다

Note: The matching is done using depth-first pre-order traversal of the document's nodes starting with the first element in the document's markup and iterating through sequential nodes by order of the number of child nodes.

querySelector를 호출하면 해당 element를 찾기위해 DOM 트리를 깊이우선 pre-order 순회로 탐색합니다

이렇게 매번 querySelector를 이용한 반복적인 DOM 탐색을 한다면 탐색에 대한 불필요한 비용이 증가합니다.

필요한 Property는 캐싱을 통해 저장함으로서 불필요한 탐색을 줄여 탐색비용을 최소한으로 하는 것이 좋습니다

결론) 불필요한 반복 DOM 탐색을 줄이자

참고) Toast FE Guide