for문 console.log(i) 마지막에 undefined 출력되는 이유 (+undefined 안나오는 법)

png created by here

콜백함수를 연습하는 문제를 풀던 중
콘솔 출력 마지막에 계속 undefiend가 뜨는 현상이 나타났다.

function a(a){
	for(let i = 0; i < a; i++)
	console.log(i);
}

function bbb(num, func){
	return console.log(func(num));	
}

bbb(3, a)
//0,1,2,undefined

이 현상을 이해하기 위해서는
원래 자바스크립트 함수에서 function(){}의 {}부분에는 return값을 따로 적지 않는다면return undefined;가 기본적으로 생략되어 있다는 것을 알아야 한다.

for(let i = 0; i < a; i++)
	console.log(i);
}

여기서 마지막에 i가 a랑 같아지는 순간에 이 for문은 i가 더 이상 없다.
하지만 console.log는 마지막 값까지 모두 반환하는 특징을 가지고 있다.
그래서 console에 찍을값은 없지만 일단 결과를 반환해야하니까 생략되어 있던 return undefined;를 반환하는 것이다.

for(let i = 0; i < a; i++)
    return undefined;
}

따라서 최종적으로 마지막에는 undefined가 출력된다.

이 현상을 방지하기 위해서는 for문에서 결과를 console.log로 나타내는 것을 지양하고
function another(a){console.log(a)}와 같은 함수를 따로 만들어서 콜백함수로 불러오는 것이 좋다.

위에서 들었던 예시를 undefined가 나오지 않게 출력되도록 바꾼 코드

function a(a, func){
  for(let i =0; i < a; i++){
	func(i);
    }
 }

function bbb(b){
  console.log(b)
  }
  
a(3, bbb);
//0,1,2