들어가기 전에

함수는 입력과 출력으로 이루어져 있습니다. 입력은 지난 시간에 배운 매개변수와 인수를 사용하죠. 그렇다면 출력은 어떤 방식으로 되는 걸까요?

학습 목표

리턴을 이용해서 함수의 출력을 구현해봅시다.

핵심 단어

• return

강의 듣기

리턴

콘솔에 1+1을 치고 엔터를 누르면 2가 나오게 되죠? 이 때 1+1은 2의 표현식이라고 부릅니다.

지난 시간에 구현한 sum 함수를 다시 살펴봅시다.

function sum(left, right) {
  document.write(left + right);
}

여기에서는 sum 함수를 실행시키면 document.write를 사용해서 바로 화면에 출력을 해 주었습니다. 하지만 만약에 출력 결과를 빨간색으로 만들어주는 작업이 필요하다고 하면 어떻게 해야 할까요? sumColorRed라는 새로운 함수를 만들어서 빨간색으로 write해주는 작업을 진행해 주어야겠죠.

이렇게 하면 필요할 때마다 함수를 계속해서 만들어 주어야 하기 때문에 굉장히 불편할 겁니다. 그렇기 때문에 이 함수를 약간 바꾸어서 계산한 값의 표현식으로 만들어봅시다. 콘솔에 1+1을 치면 2가 나오는 것처럼 만들어주는 것이죠.

즉, sum이라는 함수를 여러 버전으로 만들지 않고 다음과 같이 사용하고 싶은 것입니다.

document.write(sum(2,3)+'<br>');
document.write('<div style="color:red">'+sum(2,3)+'</div>');

즉, sum 자체가 어떤 write를 수행하는 것이 아닌, 적절한 값을 돌려주는 것입니다. 이를 위해서는 리턴을 사용해서 다음과 같이 만들어주면 됩니다.

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

생각해보기

1) 리턴을 사용했을 때의 이점이 무엇인지 생각해 보세요.