(자바스크립트) for문 안에서 setTimeout 돌리면 왜 다 4만 찍히나요

진짜 몇 시간째 이거 붙잡고 있는데 도저히 이해가 안 가서 물어봅니다. 반복문 돌면서 0 1 2 3 순서대로 찍히길 기대했는데 결과가 4 4 4 4 나와요.

코드는 이렇게 생겼어요.

for (var i = 0; i < 4; i++) {
  setTimeout(function () {
    console.log(i);
  }, 100);
}

콘솔에는 그냥 4가 네 번 뜨네요. 분명히 반복 도는 순간의 i 값을 기억할 줄 알았는데 왜 마지막 값만 나오는 걸까요? setTimeout이 문제인 건지 var가 문제인 건지도 헷갈립니다. 그냥 저 안에서 i를 그대로 못 쓰는 건가요? 어떻게 고쳐야 0 1 2 3 나오는지 좀 알려주세요.