[JS] querySelector 안티패턴

다음은 querySelector를 이용해 'element' 클래스의 property를 가져오는 예제입니다

안티패턴
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');

한번의 querySelector의 연산으로 모든 property를 가져오는 것이 효과적입니다.

왜?

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트리 탐색에 대한 불필요한 비용이 증가합니다.

따라서 한 번의 연산만 함으로서 탐색비용을 최소한으로 하는 것이 좋습니다