JavaScript 생성자에서 값을 반환하는 방법

JavaScript에서 생성자 함수는 일반적으로 new 키워드를 통해 새로 생성된 객체(this)를 암묵적으로 반환합니다. 하지만 생성자 내부에서 객체를 명시적으로 반환하면, new 연산자는 this 대신 그 객체를 결과값으로 돌려줍니다.

반면 숫자나 문자열 같은 원시 타입(primitive)을 반환하면 무시되고 기존처럼 this가 반환된다는 점도 함께 기억해 두면 좋습니다.

예제 코드

다음은 JavaScript 생성자에서 값을 반환하는 방법을 보여주는 코드입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 20px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>생성자에서 값 반환하기</h1>
<div style="color: green;" class="result"></div>
<button class="Btn">클릭하세요</button>
<h3>위 버튼을 클릭하면 생성자에서 반환한 객체가 출력됩니다</h3>
<script>
    let resEle = document.querySelector(".result");
    function Human(){
        this.firstName = 'Rohan';
        this.lastName = 'Sharma';
        this.age = 22;
        return {firstName:'Mohit',lastName:'Sharma'};
    }
    let obj = new Human();
    document.querySelector(".Btn").addEventListener("click", () => {
        for(i in obj){
            resEle.innerHTML += 'Key = ' + i + ' : Value = ' + obj[i] + '<br>'
        }
    });
</script>
</body>
</html>

코드 설명

위 코드에서 주목할 부분은 Human 생성자 함수입니다. 내부에서 this.firstName, this.lastName, this.age 속성을 설정했지만, 마지막에 return {firstName:'Mohit', lastName:'Sharma'}처럼 새로운 객체를 명시적으로 반환하고 있습니다.

이 경우 new Human()으로 생성한 obj에는 this에 할당된 속성이 아니라, 명시적으로 반환된 객체만 담기게 됩니다. 따라서 버튼을 클릭해 객체의 키와 값을 출력하면 다음과 같은 결과를 확인할 수 있습니다.

실행 결과

위 코드를 실행하면 다음과 같은 출력 결과가 나타납니다.

JavaScript 생성자에서 값을 반환하는 방법

버튼을 클릭하면 반환된 객체의 속성이 아래와 같이 표시됩니다.

JavaScript 생성자에서 값을 반환하는 방법

정리

생성자 함수가 객체를 명시적으로 반환하면 new 연산자의 결과는 그 객체가 됩니다.
원시 타입(숫자, 문자열 등)을 반환하면 무시되고 this가 그대로 반환됩니다.
일반적인 상황에서는 생성자에서 값을 명시적으로 반환하지 않는 것이 권장되며, 이 동작은 특수한 패턴(예: 싱글톤 구현)에서 활용됩니다.