JS에서 forEach 메소드를 사용하는 방법을 배우십시오!

안녕하세요, 크리에이터 여러분.

forEach 메서드는 배열이나 노드 목록으로 작업할 때 정말 편리합니다.
이를 통해 해당 컨테이너의 각 요소에 대해 콜백 함수를 실행할 수 있습니다.
1분 안에 사용법을 알아봅시다!

비디오 버전을 보고 싶다면 바로 여기:

1. 사용방법

이를 사용하려면 최대 3개의 매개변수를 사용할 수 있는 콜백 함수를 제공해야 합니다.
해당 매개변수는 다음과 같습니다.

현재 값

지수

그리고 작업 중인 어레이/노드 목록.

const array = [1, 2, 3];

array.forEach((current, index, arr) => {
    console.log(current, index, arr);
});

콘솔/터미널을 살펴보면 다음을 볼 수 있습니다.

2. 실제 예를 들어 세 개의 버튼을 만들어 봅시다.

HTML 파일에서 세 개의 버튼을 만듭니다.

<button data-action="modify">Modify</button>
<button data-action="delete">Delete</button>
<button data-action="update">Update</button>

JS 파일에서 버튼을 선택합니다.

const buttons = document.querySelectorAll('button'); 

.queryAll 메서드는 노드 목록을 반환하고 노드 목록은 프로토타입의 forEach 메서드에도 액세스할 수 있습니다.

따라서 이를 사용하여 각 버튼에 이벤트 리스너를 연결할 수 있습니다.

buttons.forEach(btn => {
    btn.addEventListener('click', (e) => {
        alert(e.target.getAttribute
        ('data-action'))
    })
});

이것은 기본적인 예이지만 이제 이 방법이 얼마나 유용한지 알게 되었습니다!
코드 반복을 쉽게 피할 수 있습니다.

와서 제 유튜브 채널을 보세요:

곧 봐요!

엔조.