JavaScript 함수에서 문자열을 반환하는 방법

JavaScript 함수에서 문자열을 반환하려면 return 문을 사용합니다. return 문은 함수 내부에서 처리된 결과값을 함수 외부로 돌려주는 역할을 하며, 반환된 값은 변수에 저장하거나 다른 로직에서 활용할 수 있습니다.

기본 예제

아래 코드는 두 개의 매개변수를 받아 하나의 문자열로 연결한 뒤, return 문으로 결과를 반환하는 방법을 보여줍니다.

<html>
  <head>
    <script>
      function concatenate(name, subject) {
        var val;
        val = name + subject;
        return val;
      }
      function DisplayFunction() {
        var result;
        result = concatenate('Amit', ' Java');
        document.write(result);
      }
    </script>
  </head>

  <body>
    <p>아래 버튼을 클릭하면 함수가 호출됩니다</p>
    <form>
      <input type="button" onclick="DisplayFunction()" value="결과 보기">
    </form>
  </body>
</html>

코드 동작 원리

concatenate(name, subject) 함수는 전달받은 두 개의 인자를 더하기 연산자(+)로 연결하여 하나의 문자열을 만들고, return val; 구문을 통해 그 결과를 호출자에게 돌려줍니다.

DisplayFunction() 함수는 concatenate 함수를 호출하여 반환받은 문자열을 result 변수에 저장한 후, document.write()를 사용해 화면에 출력합니다. 버튼을 클릭하면 "Amit Java"라는 문자열이 표시됩니다.

핵심 포인트 정리

return 문: 함수의 실행 결과를 외부로 반환하며, return이 실행되면 함수는 즉시 종료됩니다.
반환값 저장: 반환된 값은 변수에 담아 재사용할 수 있습니다.
출력 방식: 예제에서는 document.write()를 사용했지만, 실무에서는 console.log()나 DOM 조작(innerHTML, textContent)이 권장됩니다.

또한 최신 JavaScript(ES6)에서는 템플릿 리터럴을 활용해 return `${name} ${subject}`;처럼 더욱 직관적으로 문자열을 조합하고 반환할 수도 있습니다.

JavaScript 함수에서 문자열을 반환하는 방법 – return 문 활용 가이드

기본 예제

코드 동작 원리

핵심 포인트 정리