JavaScript에서 배열 요소 접근 오류

때때로 초보 프로그래머들은 요소 배열을 마치 단일 요소인 것처럼 작업하려고 합니다. 이 오류의 본질이 무엇인지 살펴보겠습니다.

다음과 같은 문단이 주어졌다고 가정합시다:

<p>1</p>
<p>2</p>
<p>3</p>

어떤 프로그래머가 모든 문단의 텍스트에 동일한 값을 넣기로 결정했다고 가정합니다. 이를 위해 그는 이러한 요소들에 대한 참조를 변수에 저장했습니다:

let elems = document.querySelectorAll('p');

그런 다음 우리의 프로그래머는 실수로 변수에 접근할 때 마치 배열이 아니라 단일 요소가 들어있는 것처럼 했습니다. 결과적으로 문단의 텍스트는 변하지 않지만, 특징적으로 콘솔에 오류도 발생하지 않습니다:

elems.textContent = '!';

여기서 올바른 해결책은 요소 배열을 루프로 순회하며 각 요소에 대해 개별적으로 필요한 작업을 수행하는 것입니다:

for (let elem of elems) {
	elem.textContent = '!';
}