반복문 코드에 대하여 궁금합니다.

인터랙티브 개발 실무 끝장내기 [역량 강화편]

[실습] 스크롤에 맞춰 fixed된 이미지 교체 3

작성

303

안녕하세요. 강의 보면서 재밌게 공부중에 있습니다. 다름아니라 pointBtn구현부에서 선생님이 올려주신 코드와 제가짠 코드에 대해서 뭐가 다른지 조금 궁금합니다. 저렇게 짜도 정상작동 하더라고요.

1. 반복문이 계속 돌고 있는건가요? 해당 인덱스번째가 click되는지 알기 위해서는 반복문이 계속 돌고 있어야 할거 같은데, 로그 찍어보면 첫 실행시 total개수만큼만 돌고 이후에는 안도는데, 그래서 예상으로는 클릭 Eventlistner가 전체개수만큼 생성되는걸까 추측해봤는데 맞는건가요?

2. 선생님이 올려주신 코드에서는 for문 안에 idx로 인자를 받는데,

이때 idx는 어떤 값을 가지고 있는건가요?

3. for문안 function(idx) { .... }(i) 이렇게 되는데 function자체가 언제 실행되는건가요? 함수가 리턴되지 않는데 (func)(i)이렇게 사용하는게 가능한가요?

js문법자체가 아직까지 헷갈려서 이해가 명확히 되지 않아서 질문드렸습니다! 감사합니다.

인터랙티브-웹 javascript

답변 1

코딩일레븐

지식공유자

1. 반복문이 계속 돌고 있는건가요? 해당 인덱스번째가 click되는지 알기 위해서는 반복문이 계속 돌고 있어야 할거 같은데, 로그 찍어보면 첫 실행시 total개수만큼만 돌고 이후에는 안도는데, 그래서 예상으로는 클릭 Eventlistner가 전체개수만큼 생성되는걸까 추측해봤는데 맞는건가요?

 -> for문은 한 번만 돕니다. 한 번 돌고 끝나기 때문에 맨 마지막 이벤트만 남아 있게 됩니다. ( 아래에서 더 설명)

2. 선생님이 올려주신 코드에서는 for문 안에 idx로 인자를 받는데,

이때 idx는 어떤 값을 가지고 있는건가요?

 -> for문 안에서 total 갯수 만큼 각각 실행이 됩니다. idx 는 함수 마지막 줄의 (i) 값을 가져옵니다.

3. for문안 function(idx) { .... }(i) 이렇게 되는데 function자체가 언제 실행되는건가요? 함수가 리턴되지 않는데 (func)(i)이렇게 사용하는게 가능한가요?

 -> 즉시 실행 함수는 바로 실행이 됩니다. for문의 i 를 참조하여 각각 index 넘버 (idx)를 사용하게 됩니다. 

즉시 실행 함수에 대한 자세한 설명은 이분이 잘 해주셨네요.

https://devyj.tistory.com/9

첨부해주신 코드에 console.log(pageNum) 을 찍어보세요.

더 궁금한 게 있으시면 질문 달아주세요.

호코더

질문자

감사합니다. 그러면 제가 작성한것처럼 작성해도, 효율성이나 코드가 뻑나고 그런 경우는 없는건가요?

코딩일레븐

지식공유자

작성하신 코드로는 index 값(클릭 값) 을 제대로 가져올수 없습니다. console.log(pageNum) 을 찍어보시면 pageBtn.length 값이 나올 겁니다. 맨 마지막 i 값이 들어가는거죠.

호코더

질문자

CDplayer강의에서 이번에도 같은코드로 작성해보고, 말씀하신것처럼 콘솔로그를 찍어 봤는데. 이야기해주신거와 달리 현재 pageNum이 나오는거 같은데, 혹시 제가 잘못 짚고 있는게 있을까요? 아 물론 소스도 정상 작동해서 누르는 인덱스 번호로 페이지가 넘어갑니다.

1. 자료를 조금 더 찾아보니까 표현식과 선언식에 따른 차이일까요? 클로져 사용 유무때문에 그런걸까요?

https://joshua1988.github.io/web-development/javascript/function-expressions-vs-declarations/

2. var와 let에 따른 차이는 아니겠지요? 모든 선언을 let으로 하기는 했습니다.

코딩일레븐

지식공유자

위 상황은 for문에서 let을 사용해서 원하는 index를 가져올 수 있네요.

pointBtn[i].addEventListener("click", function() {

curPageNum = i;

console.log(curPageNum);

})

위처럼 사용하셔도 i값을 제대로 가져옵니다.

for문 안의 클릭이벤트는 그저 albumChangeFunc() 에서 사용할 curPageNum을 교체해주는

역할을 하는 것이기 때문에 작성해주신 대로 사용해도 전혀 문제가 없습니다.

인프런 커뮤니티 질문&답변

반복문 코드에 대하여 궁금합니다.