함수 선언 질문입니다

function colorChange(standard, color) {
  if (standard > 10) {
    span.style.color = color;
  }
}
const showBall = (number, $target) => {
  const span = document.createElement("span");
  span.className = "ball";
  span.innerHTML = lotto[number];
  // colorChange(lotto[number], "red"); - 오류난 코드 
  function colorChange(standard, color) {
    if (standard > 10) {
      span.style.color = color;
    }
  }
  $target.append(span);
};

for (let i = 0; i < lotto.length - 1; i++) {
  setTimeout(() => showBall(i, $result), (i + 1) * 1000);
}

강의 듣고 제가 설정해놓은 값에서 한번 바꿔봤는데요 (저는 파라미터를 태그로 안하고 color를 지정을 해봤는데요) span이 지정이 안되었다고 오류가 나는데 저 코드랑 아예 안에서 함수 지정하고 실행한거랑 차이점이 뭔지 궁금합니다..