컬렉션에 대해

아시다시피 데이터 유형은 프로그래머로서 우리의 삶에서 엄청난 역할을 합니다. 우리가 하는 많은 일은 데이터를 패키징하고 보내기 전에 생성, 수집, 변환 및 조작하는 것입니다.

내 단일 페이지 애플리케이션(자바스크립트의 내 첫 번째 앱)을 구축하는 동안 너무 많이 사용하지 않은 데이터 유형인 HTML 컬렉션을 만났습니다.

다음을 실행하여 이 개체를 발견했습니다.

const deleteButton = document.GetElementsByClassName("delete-button")

내 목표는 이러한 각 버튼에 이벤트 리스너를 추가하여 앱과 함께 동적으로 표시하고 있던 레시피를 삭제할 수 있도록 하는 것이었습니다.

.GetElementsByClassName()의 출력은 HTML 컬렉션입니다. 이제 HTML 컬렉션은 라이브 객체입니다. 즉, 동일한 인수가 전달된 동일한 함수의 출력은 명시된 클래스 이름을 가진 DOM에 있는 노드 수에 따라 다른 컬렉션이 됩니다.

좋아, 나는 내 자신에게 이것이 필요한 것 같다고 생각했습니다... 이 이벤트 리스너를 렌더링된 버튼에만 추가하고 싶기 때문입니다. 그리고 그 숫자는 동시에 표시되는 레시피의 수에 따라 변경됩니다!

글쎄, 내 코드를 실행하려고 할 때 이러한 HTML 컬렉션을 반복할 수 없다는 오류 메시지를 받았습니다.

deleteButton.forEach( d => d.addEventListener("click", deleteHandler)

왜 이런 일이 일어나는지, 나는 내 코드에 디버거를 삽입하고 콘솔을 가지고 놀면서 내 의심을 가정하고 실험했습니다. 해결책을 찾을 수 없어서 MDN의 Javascript 문서를 참조했습니다.

빠르게 Array.from() 메서드를 발견할 수 있었습니다!
MDN에 따르면 이 정적 메서드는 배열과 유사하거나 반복 가능한 개체에서 얕은 복사된 새 Array 인스턴스를 만듭니다.

이것은 정확히 나에게 필요한 것처럼 들렸습니다. HTML Collection에 대한 또 다른 빠른 검색으로 내 의심이 확인되었습니다. HTML Collection은 실제로 배열과 유사한 객체로 분류됩니다!

배열과 같은 객체는 무엇입니까? 글쎄, 그것은 원시 배열과 같습니다. 고전적인 Array-와 유사하고 일부 동작 특성을 공유하지만 이것이 유사성의 끝입니다. 배열과 유사한 객체는 일반 배열이 .forEach() 및 .map()을 포함한 메서드에 액세스할 수 있는 배열 메서드에 액세스할 수 없습니다!

그래서 새로 알게 된 지식을 사용하여 새로운 친구인 Array.from() 메서드를 실험하기 시작했습니다.

const deleteButton = document.GetElementsByClassName("delete-button")

Array.from(deleteButton, (element) => {element.addEventListener("click", deleteHandler()} 
)

위의 코드에서 deleteButton이라는 변수를 선언하고 내 DOM에서 해당 클래스가 있는 모든 노드의 HTML 컬렉션인 내 GetElementsByClassName("delete-button")의 출력을 할당합니다.

그런 다음 Array.from(deleteButton...)은 기본적으로 기존 배열의 동작을 가지고 있다는 점을 제외하고는 해당 배열과 유사한 객체의 복사본을 만듭니다.

이제 화살표 함수를 Array.from()에 전달하여 각 배열 요소에 대해 .addEventListener() 함수를 호출하여 원하는 동작을 동적으로 제공할 수 있습니다!

도전에 직면하고 프로그래밍에 대해 더 많이 이해하게 되는 이 과정은 재미있고 보람 있습니다! 나는 내가 개발한 비판적 사고 능력을 실제로 적용하는 것을 즐겼습니다.