JavaScript에서 체이닝의 장점과 단점

체이닝이 코드를 줄여주긴 하지만, 대부분의 경우 변수를 도입하는 것이 여전히 더 편리합니다. 두 예제를 비교해 보세요 - 지금은 변수 elem를 도입했기 때문에 임의의 수의 속성을 설정할 수 있으며, querySelector는 단 한 번만 호출됩니다:

let elem = document.querySelector('#elem');
elem.value = 'www';
elem.type  = 'submit';

하지만 지금은 새 변수를 도입하지 않았기 때문에 querySelector를 두 번 호출해야 합니다:

document.querySelector('#elem').value = 'www';
document.querySelector('#elem').type  = 'submit';

제 생각에는 이 코드가 한 줄은 짧아졌지만 더 복잡해졌습니다. 게다가 id의 값을 'elem'에서 다른 값으로 변경하고 싶다면, 여러 곳에서 수정해야 하는데 이는 그리 편리하지 않습니다.

또 다른 문제도 있습니다 - 브라우저 부하입니다. querySelector 메서드가 수행하는 페이지 내 요소 검색은 상당히 느린 작업입니다 (그리고 일반적으로 페이지 요소와의 모든 작업은 느린 작업입니다 - 이것을 기억하세요).

우리의 경우, 매번 querySelector를 사용하면 브라우저는 매번 HTML 페이지를 처리하고 주어진 id를 가진 요소를 여러 번 찾게 됩니다 (id가 동일하다고 해도 상관없습니다 - 브라우저는 불필요한 작업을 여러 번 수행하여 브라우저 작동을 느려지게 할 수 있습니다).

반면에 변수 elem를 사용하는 경우 페이지 검색이 전혀 발생하지 않습니다 (요소가 이미 찾아졌고 그에 대한 참조가 변수에 저장되어 있습니다).

다음 코드가 주어졌습니다:

<img id="image" src="avatar.png" width="300" height="500">

console.log(document.querySelector('#image').src);
console.log(document.querySelector('#image').width);
console.log(document.querySelector('#image').height);

이 코드의 단점을 지적하세요. 그리고 이를 수정하세요.