return 문이란 무엇인가?
자바스크립트에서 함수는 선택적으로 return 문을 가질 수 있습니다. 함수가 처리한 결과값을 외부로 반환하고 싶다면 return 문이 반드시 필요합니다. 이 문장은 항상 함수 본문의 마지막에 위치해야 하며, return 문이 실행되는 순간 함수는 즉시 종료되고 그 뒤에 작성된 코드는 더 이상 실행되지 않습니다.
또한 return 문 뒤에 값을 지정하지 않으면 함수는 자동으로 undefined를 반환합니다. 이 점을 기억해 두면 디버깅 시 많은 도움이 됩니다.
기본 예제
아래 코드는 두 개의 문자열을 받아 하나로 합친 후 결과를 반환하는 함수의 예입니다. 버튼을 클릭하면 concatenate 함수가 호출되고, 반환된 값이 화면에 출력됩니다.
<html>
<head>
<script>
function concatenate(first, last) {
var full;
full = first + last;
return full;
}
function DisplayFunction() {
var result;
result = concatenate('John', ' Wright');
document.write(result);
}
</script>
</head>
<body>
<p>아래 버튼을 클릭하여 함수를 호출해 보세요.</p>
<form>
<input type="button" onclick="DisplayFunction()" value="함수 호출">
</form>
</body>
</html>코드 설명
위 예제의 동작 흐름은 다음과 같습니다.
1. concatenate 함수: 매개변수로 전달받은 first와 last 문자열을 연결하여 변수 full에 저장한 뒤, return full;을 통해 결과값을 호출자에게 돌려줍니다.
2. DisplayFunction 함수: concatenate('John', ' Wright')를 호출하고, 반환된 값 'John Wright'를 변수 result에 저장한 후 화면에 출력합니다.
return 문 사용 시 주의사항
- return 문이 실행되면 함수가 즉시 종료되므로, 그 이후의 코드는 절대 실행되지 않습니다.
- 하나의 함수에서 여러 조건에 따라 다른 값을 반환할 수 있으며, 각 분기마다 return 문을 배치할 수 있습니다.
- return 키워드와 값 사이에 줄바꿈을 넣지 않도록 주의하세요. 자바스크립트는 세미콜론 자동 삽입(ASI) 규칙 때문에 의도치 않게 undefined를 반환할 수 있습니다.