중첩반복문 질문드립니다.

[김영인]

탭기능 구현하면서 중첩반복문 사용해서 코드 간소화 해보았습니다.
근데 중첩반복문 작동방식이 이해가 가지 않습니다.
일단 브라우저에서 작동하는 순서는
1. 탭 버튼중 하나를 누른다. (예를들어 0번탭)
2. 0번탭을 누르면서 이벤트리스너 'click' 작동
3. 이벤트리스너 안의 forEach 반복문이 버튼의 개수만큼 실행되며 3개 버튼 모두 orange 클래스가 사라짐
4. 0번탭에 orange 클래스가 추가됨

근데 여기서 for문의 역할이 이해가 가지 않습니다.
console.log(i)로 탭을 클릭할때 i가 무엇이 출력되는지 확인해보니 0번탭 누르면 0, 1번탭 누르면 1, 2번탭 누르면 2가 출력됩니다.
하지만 for문 for (let i = 0; i < 버튼.length; i++) { 는 i가 0~2가 될때까지 반복해준다는 코드인데 왜 0번탭을 눌렀을때 for문이 멈추고 아래 코드들이 작동하고 끝나는지 궁금합니다.
여기서 for문의 역할은 무엇인가요?

[김영인]

선생님!!!! 이해 갔습니다.

for문을 통해 버튼 개수만큼 for문 안의 이벤트리스너 함수를 브라우저에 등록해두고

이후 버튼 클릭시 이벤트리스너 함수가 실행되는 원리였습니다. 감사합니다 :)

[codingapple]

넴 이해안가면 for 버리고 복붙해보면 됩니다

[김영인]

어 그런 간단한 방법이 있었군요! ㅋㅋㅋㅋㅋ 꿀팁 감사합니당

[글쓴이]

글