탭메뉴 for문 질문 드립니다!

"use strict";

//제가 만든 방법인데, 이런 방법은 코드가 길어서 비효율적인가요?
// for문을 돌리면 페이지 로드되자마자 조건문만큼 반복되어야 하지만
//이 방법은클릭 이벤트로 받은 this 인덱스 번호 만큼만 실행하면 되서 효율적일 것 같은데 아닌가요..?
$('.tab-button').click(function() {
let buttonIndex = $(this).index();
let thisTabContent = $('.tab-content').eq(buttonIndex);
$('.tab-button').removeClass('active');
$('.tab-content').removeClass('show');
$(this).addClass('active');
$(thisTabContent).addClass('show');
});

//선생님 브라우저가 로드 되자마자 for문은 3번 돌고 나서 i = 3이 되었는데,
// eq(i)번째의 값을 클릭이벤트로 받아오는게 이해가지 않습니다 ㅠㅠ
//let 키워드는 {중괄호} 범위롤 참고하는 것을 알고 있지만,
// 이미 끝난 반복문의 값을 순서대로 0,1,2 번을 찾아 이벤트를 실행하는 것이
// 아무리 찾아봐도 이해되지 않습니다 ㅠㅠ
for(let i = 0; i < $('.tab-button').length; i++) {
console.log(i+'이벤트바깥 i 위');
$('.tab-button').eq(i).click(function(){
console.log(i+'이벤트 안 i');
$('.tab-button').removeClass('active');
$('.tab-content').removeClass('show');
$('.tab-button').eq(i).addClass('active');
$('.tab-content').eq(i).addClass('show');
});
console.log(i+'이벤트바깥 i 아래');
}