JS 클로저 내부에서 루프 변수 값 참조 문제

면접 대비용으로 비동기 루프 처리 구현 중인데 예상한 값으로 출력이 안 됩니다.

코드:

function createAlerts() {
  const functions = [];
  for (var i = 0; i < 3; i++) {
    functions.push(function() {
      console.log(i);
    });
  }
  return functions;
}

const alerts = createAlerts();
alerts[0]();
alerts[1]();
alerts[2]();

오류: 0, 1, 2가 나와야 하는데 모두 3으로 출력됨.

시도: 콘솔 로그 위치 변경, 함수 호출 시점 조정.

질문: var 변수가 루프 내에서 어떻게 공유되길래 모든 콜백이 마지막 값만 참조하는 건가요?