TIL. [javascript] return에 대해서 2

지난 글에서 return에 대해서 간단히 훑었다. 간략한 정의 정도는 된 것 같다.

허나 지난 글에서 공부하면서 과연 return을 어떻게 사용해야하는 지에 대해 궁금했었다.

"함수가 있고, 대입한 값이 있으면 그 자체만으로도 함수는 제 역할을 하는 것이 아닌가? 왜 굳이 return을 사용해야 하지?" 이런 생각이 들었기 때문이다.

이런 궁금증은 여러 글과 생활코딩 강의(https://www.youtube.com/watch?v=6MzCHO8M3Uc)를 통해서 해소됐다.

생활코딩 강의에서 나왔던 예제를 통해서 설명해보자. 이런 함수가 있다고 치자.

function sum(left, right){
	document.write(left+right+'<br>');
	}
sum(2,3); //5

위의 함수는 5라는 값을 출력한다. 나는 이러한 함수와 값만 있다면 충분하다고 생각했다. 정상적으로 결과가 출력되는 것만으로 충분하다고 생각했기 때문이다.

허나 생활코딩 강의에선 여기에 추가적인 상황을 더해 return의 필요성을 설명했다. 만약 sum(2,3)을 통해 나오는 값을 그대로 하고 이 값에 다양한 상황을 적용해야한다면?

function sum(left, right){
	document.write(left+right+'<br>');
	}
function sumColorRed(left, right){
	document.write('<div style="color:red">'+(left+right)+'</div><br>');
	}
sum(2,3);
sumColorRed(2,3);

이렇게 sum()함수 외에도 sumColorRed()라는 함수를 따로 지정해 여기에 값을 대입해야한다. 같은 값을 대입하더라도 매번 다른 이름의 함수를 만들어야 하니 여간 복잡한 것이 아니다.

이 상황에서 sum함수는 값이 대입되야지만 값을 출력하게 된다. 대입되는 값이 없다면 이 함수는 미완인 것이다.

이때 return을 사용하면 간편하다. sum() 함수는 그대로 완결을 지어놓고 여기에 값을 대입하고 그 결과를 활용할 수 있기 때문이다.

function sum(left, right){
	return left+right;
	}

이렇게 함수에 return을 걸어주면 sum() 함수는 자체로 어느정도 완결성을 지니게 된다. return을 통해서 가상의 출력값이 정해졌기 때문이다. 그렇기에 sum() 함수 자체를 가지고 다양하게 이용할 수 있게 된다.

function sum(left, right){
	return left+right;
	}

document.write(sum(2,3)+'<br>');
document.write('<div style="color:red">'+sum(3,4)+'</div>');
document.write('<div style="font-size:3rem;">'+sum(4,5)+'</div>');

결과적으로 훨씬 간편해졌다. 특정 함수의 가동 방식과 return으로 출력하는 것을 정의해놓으면, 해당 함수에 어떠한 값을 대입하든 어떻게 이용하든 자유로워진다. 특히 return 문은 함수가 아직 사용될 문맥을 모를 때 유용하다.