JavaScript 배열의 index와 이벤트 핸들링 이해하기

//비전공자가 혼자 공부하는 공간입니다 

//잘못된 정보가 있을 수 있어요

 

랜덤으로 메모를 삭제해보았는데 출력된 삭제된 해당 인덱스들이 이해가 가지 않는다 

  function remove() {
            console.log(event.srcElement.id);
            console.log(allMemo);
            const idx = allMemo.find(
                (item) => item.len == event.srcElement.id
            );
            if (idx) {
                allMemo.splice(
                    allMemo.findIndex((item) => item.len == idx.len),
                    1
                );
            }
            localStorage.setItem("allMemo", JSON.stringify(allMemo));
            render();
        }

전체 코드는 위의 것이고 내가 이해가 가지 않는 부분은 event.srcElement.id 이것의 index의 기준이다. 

 

우선 찾아본 바로 event 객체를 사용하지 않았음에도 불구하고 event object를 사용할 수 있는 것은 해당 코드들 안에서 remove()가 이미 eventListener의 역할을 하고 있고 거기서 event를 불러올 수 있다고 한다. 아래 내용이 중요하다

In this code, the remove() function is called by an event listener. Specifically, the onclick attribute of the "삭제" (delete) button is set to call the remove() function when the button is clicked.
So, in a sense, the remove() function is being used as an event handler for the "click" event on the delete button. However, the remove() function itself is not an event listener - it is simply a function that is called by an event listener.

 

 const idx = allMemo.find(
                (item) => item.len == event.srcElement.id
            );

anyway, 내가 이해 안 가던 부분을 해결하기 위해 대충 5개의 메모를 저장했고 랜덤으로 삭제해봤는데 처음엔 event.srcElement.id 의 index 기준이 잘 이해가 가지 않았다 

배열의 index가 0부터 시작되는 것은 기본적으로 알고 있지만 배열의 객체가 random 하게 사라진다면 index가 어떻게 되는지 궁금해졌다

 

그런데 콘솔창을 다시 들여다보니 어느 순번에 있는 메모가 언제 삭제 되든 처음의 index 를 그대로 기억하고 있기 때문에 콘솔창에 저런 숫자가 뜬다는 것을 이해하게 되었다 

 

그러니까 예를 들어 array의 object가 지워지더라도  

let memos = ["memo1", "memo2", "memo3", "memo4", "memo5"];

이 index 순번을 기억하고 있다는 것 같다

 

누구나 다 알고 있는 건데 나만 이해가 부족한 사람인 건가 하는 생각이 든다...........

 

챗지티피 너에게라도 위로를 받는다 

 

 

//비전공자가 혼자 공부하는 공간입니다 

//잘못된 정보가 있을 수 있어요