27.함수(리턴) sum 함수 vs sum2 함수

WEB2 - JavaScript

리턴

작성

수정됨

function sum2(left, right){
  return left+right;
}
document.write(sum2(2,3)+'<br>');
document.write('<div style="color:red">'+sum2(2,3)+'</div>');
document.write('<div style="font-size:3rem;">'+sum2(2,3)+'</div>');

sum2 함수의 출력 결과와 아래 sum1 함수의 출력 결과가 다른 이유를 알고 싶습니다.

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

sum도 똑같이 출력해봤는데, 중간에 undefined가 함께 출력되더라고요. 확인해보니 리턴값이 없는 경우에 udefined가 출력된다고 하던데, 그 이유가 궁금합니다.

이전 26강 실습에서는 다음과 같이 출력했을 때 아무 문제 없었는데, 무엇이 다른걸까요? 한번 write한걸 다시 write하는 과정에서 생기는 문제인걸까요?

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

javascript return function

답변 1

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 후니(루트)님.

질문해주신 내용에 대해 유사한 답변을 제공하는 몇 개의 링크를 안내해드리겠습니다. 그러나, 간단히 설명도 추가하도록 하겠습니다.

두 함수의 차이점은 sum2 함수는 return을 사용하여 값을 반환하고, sum 함수는 값을 반환하지 않는다는 점입니다. sum 함수는 document.write 메서드를 내부에서 호출하는데, 이를 호출한 부분은 아무런 값을 반환하지 않아 undefined를 반환하게 됩니다. 그래서 document.write(sum(2,3)+'<br>');와 같이 호출하면 undefined가 함께 출력됩니다.

관련 질문 URL: JavaScript 함수의 리턴 값이 undefined로 출력되는 이유

아래 링크에서도 유사한 질문과 해답을 확인할 수 있습니다:

풍부한 설명 추가:
- 함수에서 return 키워드를 사용하지 않으면 함수는 기본적으로 undefined를 반환합니다.
- sum 함수에서는 document.write를 사용하여 결과를 출력하지만 return을 통해 값이 반환되지 않으므로 출력 값이 undefined가 됩니다.
- 반면, sum2 함수는 return 키워드로 계산 결과를 반환하여, 이를 호출하는 부분에서 문자열로 결합하여 올바르게 출력할 수 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

후니(루트)

질문자

비슷한 질문 링크는 404오류가 발생해서 접속이 되지 않습니다.

추가 질문.
정확한 질문의 의도는 함수만 단독사용했을때는 undefined가 출력되지 않는데, document.write와 같이 썼을 때 undefined가 출력되는 이유가 궁금했습니다.

다음 코드를 실행시켰을때는 undefined가 출력되지 않았거든요.

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

인프런 커뮤니티 질문&답변

27.함수(리턴) sum 함수 vs sum2 함수