자바스크립트 기초 for 문

[홍명인]

안녕하십니까 선생님 자바스크립트 너무 흥미롭게 배우고있는 성실제자입니다.
지금까지 너무 이해가 쉽고 좋게 강의를 수강중인데요. 한가지 이해가 어려운 부분이 있어서요!
동작원리부터 알아야 좋은 개발자가 될수 있다고하여 모든 동작원리를 이해하려고 노력중인데
원리하나를 못깨우쳐 진행을 못하고있습니다ㅠ 도움한번 요청드립니다.

바로 for 문에서 var 선언을 사용하는 경우입니다.
자바스크립트 강의 Level 2 -> [ 탭기능 만들며 배우는 for 기능 2] 강의 내용 입니다.

1. 처음에 이해가 안갔던 부분은 for 반복문(var선언) 수행 시 i = 0 이고 i <3 일때 까지 명령을 수행하라고 했으니
i가0 일때 스크립트가 작성이 됐는데 클릭이 안됐다고 삭제 되는부분 이 이해가 가지 않았습니다.
이 부분은 스크립트가 0~3 으로 남아있는게아닌 [i] 로 남아있어 명령을 수행할 때 변수 [i]를 가지고 와 명령을 수행한다.
라고 이해를 하기는 했는데 맞게 이해를 했을까요?

2. 그렇게 이해를 하고 var 선언으로 반복문을 돌릴 수 있지않을까 고민하다 i를 다시 0으로 바꾸면 i<3 이라서 될것같다
라고생각하여 아래와 같이 코드를 수행해봤는데 동작하지 않았습니다. 혹시 이유가 뭘까요?

for(var i = 0; i<3; i++){
document.querySelectorAll('.tab-button')[i].addEventListener('click',function(){
document.querySelectorAll('.tab-button')[0].classList.remove('orange')
document.querySelectorAll('.tab-button')[1].classList.remove('orange')
document.querySelectorAll('.tab-button')[2].classList.remove('orange')
document.querySelectorAll('.tab-button')[i].classList.add('orange')
document.querySelectorAll('.tab-content')[0].classList.remove('show')
document.querySelectorAll('.tab-content')[1].classList.remove('show')
document.querySelectorAll('.tab-content')[2].classList.remove('show')
document.querySelectorAll('.tab-content')[i].classList.add('show')
 if(i==3){
i = 0
}
 })}

3. 긴글 읽어주시느라 정말 감사합니다 그리고 마지막 질문 한가지가 있습니다. 바로 let에 대해서인데요!
for 문을 수행하는 조건이 따로 있는걸까요? for 반복문을 완료하고 '.tab-button'[2] 수행되려면 for문이 계속적으로
 반복하고있어야 된다고 생각하는데
for(let i=0; i<3; i++){
    console.log(i)
}수행해보니 1회밖에 수행을 안하더라고요.
반복문을 종료하고 i 가 0일때 반복문으로 변수 i가 i++ 반복으로 1,2,3 .....1,2,3.... 이렇게 반복되는게 아니라면
 '.button'[2] 이 어떻게  addEventListener에 반응하는지 궁금합니다 

너무나도 긴글 읽어주셔서 정말 감사드리고 혹시 자바스크립트 동작원리 이해를 위해 추천해 주실만한 책이나 자료 같은게
 있을까요? 물론 스승님의 유튜브 영상 은 전부 시청중입니다! 다시한번 감사드립니다.🫶

[codingapple]

반복문은 그냥 코드 복붙문법일 뿐 이벤트리스너랑 변수문제입니다 
이벤트리스너 3개를 달아놨는데 이벤트리스너 안에 있는 코드는 클릭시 실행됩니다 
그리고 컴퓨터가 코드실행시 i 변수같은걸 발견하면 i 변수 정의를 주변에서 찾아서 씁니다 

근데 반복문 돌릴 때 var쓰면 var i 변수가 적힌 포스트잇이 반복문 바깥에 생깁니다 
반복문 돌릴 때 let쓰면 let i 변수가 적힌 포스트잇이 이벤트리스너마다 각각 생깁니다

3번은 콘솔창에 동그라미 3 떠있으면 3번 실행되었다는 뜻입니다

[고진영]

 for (let i = 0; i < 3; i++){
  document.querySelectorAll('.tab-button')[i].addEventListener('click',function(){
    let tabb = document.querySelectorAll('.tab-button');
    let tabc = document.querySelectorAll('.tab-content');
    tabb[0].classList.remove('orange');
    tabb[1].classList.remove('orange');
    tabb[2].classList.remove('orange');
    tabb[i].classList.add('orange');
    tabc[0].classList.remove('show');
    tabc[1].classList.remove('show');
    tabc[2].classList.remove('show');
    tabc[i].classList.add('show');
  })
}
저는 이런식으로 만들어서 동작시켰습니다.
var변수와 let변수의 차이점을 찾아보시면 도움되실거같아요

[홍명인]

자세한 설명 감사드리고요 설명을 참고하여 제가 동작순서를 한번 풀이해봤는데요
맞나한번 검사부탁드립니다. 감사합니다.

1. callStack 에 for 반복문 실행
2. document.querySelectorAll('tab-button')[0]~[2].addEventListener ->  webAPI로 이동 하여 조건만족할때 까지 대기
2. callStack 비어있는 상태
3. tab-button 을 클릭 시 webAPI에 있는 document.querySelectorAll('tab-button')[0]~[2].addEventListener
    callStack 으로 이동( queque , event loop 을 거쳐)
4. callStack 에서 addEventListener의 콜백함수 를 수행하려 하는데 var i 로 할당 선언한 변수가 3 이라서 원하는 값이 나오지
않는것!!

이게맞을까요?

이걸 4시간동안 이해못한 저는 빡대가리 인가요? ㅠ,.ㅠ

 

[codingapple]

맞습니다

[홍명인]

빡대가리가 맞다는거죠? ㅜㅜ

라무튼 감사합니다!

[글쓴이]

글