Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

Returning values from a constructor in JavaScript?

Javascript Web Development Object Oriented Programming

In JavaScript, constructors typically don't need explicit return statements since they automatically return the newly created object. However, you can override this behavior by explicitly returning an object from a constructor.

How Constructor Returns Work

When you use the new keyword with a constructor:

  • If the constructor returns an object, that object becomes the result
  • If the constructor returns a primitive value (string, number, boolean), it's ignored and this is returned instead
  • If there's no explicit return, this is returned automatically

Example: Returning an Object from Constructor

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Constructor Return Example</title>
</head>
<body>
<h1>Returning Values from Constructor</h1>
<div id="result" style="color: green; font-size: 18px; margin: 20px 0;"></div>
<button onclick="demonstrateConstructor()">Show Constructor Return</button>

<script>
function Human() {
    this.firstName = 'Rohan';
    this.lastName = 'Sharma';
    this.age = 22;
    
    // Explicitly returning a different object
    return {firstName: 'Mohit', lastName: 'Sharma'};
}

function demonstrateConstructor() {
    let obj = new Human();
    let resultDiv = document.getElementById('result');
    resultDiv.innerHTML = '';
    
    for (let key in obj) {
        resultDiv.innerHTML += 'Key = ' + key + ' : Value = ' + obj[key] + '<br>';
    }
}
</script>
</body>
</html>

Output

Key = firstName : Value = Mohit
Key = lastName : Value = Sharma

Example: Returning Primitive Values

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Primitive Return Example</title>
</head>
<body>
<h1>Returning Primitives from Constructor</h1>
<div id="output" style="color: blue; font-size: 16px; margin: 20px 0;"></div>
<button onclick="testPrimitiveReturn()">Test Primitive Return</button>

<script>
function TestConstructor() {
    this.name = 'Original';
    return 'This string will be ignored'; // Primitive return is ignored
}

function testPrimitiveReturn() {
    let obj = new TestConstructor();
    let output = document.getElementById('output');
    
    output.innerHTML = 'obj.name = ' + obj.name + '<br>';
    output.innerHTML += 'typeof obj = ' + typeof obj;
}
</script>
</body>
</html>

Output

obj.name = Original
typeof obj = object

Comparison of Return Behaviors

Return Type Behavior Result
Object Overrides default Returned object becomes the instance
Primitive (string, number, boolean) Ignored this is returned instead
No return statement Default behavior this is returned automatically

Common Use Cases

  • Singleton Pattern: Return the same instance every time
  • Factory Pattern: Return different objects based on parameters
  • Object Validation: Return a default object if construction fails

Conclusion

Constructor functions in JavaScript automatically return this unless you explicitly return an object. Returning primitives from constructors is ignored, making this feature useful for implementing design patterns like singletons or factories.

Updated on: 2026-03-15T23:18:59+05:30

233 Views

Learn More in Our Tutorials

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements