return문이 없는 함수
JavaScript는 함수에 return문을 작성하지 않아도 값이 반환됩니다. Chrome 개발자 도구의 콘솔에서는 JavaScript 코드를 작성할 수 있는데, 다음 예제처럼 즉시 실행 함수를 사용하면 Hello와 undefined가 출력되는 것을 확인할 수 있습니다.
Chrome 개발자 도구는 코드를 실행 후 함수의 반환 값을 출력합니다. 따라서, undefined는 즉시 실행 함수의 반환 값을 의미합니다.
이러한 동작은 함수 표현식에서도 동일하게 발생합니다.
그렇다면, ES6에 도입된 화살표 함수는 어떻게 동작할까요?
마찬가지로, undefined가 반환됩니다.
다음은 함수에 return문을 작성 후 함수를 호출합니다.
이번에는 undefined를 출력하지 않고 Hi라는 문자열이 콘솔에 출력되었습니다. 즉, JavaScript의 함수에 return문이 없는 경우 undefined가 반환된다는 것을 알 수 있습니다.
생성자 함수의 반환 값
생성자 함수에서 return문을 명시하지 않으면 this로 바인딩된 객체를 반환합니다.
그렇다면, 생성자 함수에서 return문을 작성하고 this와 바인딩되지 않은 객체를 반환하면 어떻게 될까요?
생성자 함수에 return문이 존재하는 경우 this와 바인딩된 객체가 아닌 return문에 작성된 객체가 반환됩니다. 이는 객체뿐만 아니라 배열을 반환해도 동일합니다.
다음은 생성자 함수에서 빈 배열을 반환합니다.
하지만, 예외의 경우가 있는데 리턴 값이 원시 타입의 값인 경우 return문에 작성된 값을 무시하고 this와 바인딩된 객체가 반환됩니다. 다음 예제는 return문에 원시 타입의 값인 'Hello'를 작성하였습니다.
예상과는 다르게 this와 바인딩된 객체가 반환된 것을 확인할 수 있습니다.
정리
- 함수에 return문이 없으면 undefined를 반환합니다.
- 생성자 함수에서 return문이 없으면 this와 바인딩된 객체가 반환됩니다.
- 생성자 함수에서 return문에 명시된 값의 타입이 원시 타입인 경우 return문은 무시됩니다.
'JavaScript > 함수' 카테고리의 다른 글
| [JavaScript]메서드와 this(Method and this) (0) | 2022.07.04 |
|---|---|
| [JavaScript]함수와 메서드(Function and Method) (0) | 2022.07.03 |
| [JavaScript]함수의 length, name 프로퍼티 (0) | 2022.06.28 |
| [JavaScript]익명 함수(Anonymous Functions) (0) | 2022.06.28 |
| [JavaScript]함수 생성 방법 (0) | 2022.06.27 |
댓글