In Javascript, why does returning a function from a constructor function ruin the object?

Question

When I create a new object from a function, using the new operator, I get an object whose properties I can access.

However, if I return a function from the constructor, the object has no properties and returns undefined when I try to access them. Why?

function Car1() {
  this.brand = "Honda"
}
var car1 = new Car1()
console.log(car1.brand) // "Honda" 

function Car2() {
  this.brand = "Honda"
  return function() {
    console.log('TEST');
  }
}
var car2 = new Car2()
console.log(car2.brand) // undefined. why??

If the other objects are returned at the end of the function, the original new object content will be overwritten. Because you are passing back the new function — Mars.Tsai, Nov 04 '19 at 06:09
I'm not returning another object. But I am returning a function — CodyBugstein, Nov 04 '19 at 06:10
because you added the property `brand` to one object, and `return` a different one. *"I'm not returning another object. But I am returning a function"* Functions are objects. check `someFunction instanceof Object` in the console. — Thomas, Nov 04 '19 at 06:11
```typeof(car1) === 'object'``` ```typeof(car2) === 'function'``` ```car1 instanceof Object === true``` ```car2 instanceof Object === true``` The last one means that you can access car2 as a plain Object although it's actually a derived Function. — tibetty, Nov 04 '19 at 06:19

score 4 · Accepted Answer · answered Nov 04 '19 at 06:16

From the MDN docs for the "new" operator:

If the constructor function doesn't explicitly return an object, the object created in step 1 is used instead. (Normally constructors don't return a value, but they can choose to do so if they want to override the normal object creation process.)

So you are explicitly returning a function object in the return, which overrides the default return of the object which was created by the Car2 constructor function.

The function object you are returning doesn't have the brand property in it therefore you are getting undefined, you can check this by explicitly adding a brand property to the returned function object:

function Car2() {
    this.brand = "Honda"
    const func =  function(){
        console.log('TEST');
    }
    func.brand = "Toyota";
    return func;
}
var car2 = new Car2()
console.log(car2.brand)

TedTran2019 · Answer 2 · 2019-11-04T06:16:58.310

0

You're returning a function, that's why.

var car2 = new Car2()
console.log(car2.brand) // undefined

car2() // TEST
But if you do car2(), you console.log ('TEST')

car2 is just the function you returned.

edited Nov 04 '19 at 06:16

answered Nov 04 '19 at 06:12

TedTran2019

887
5
15

Ya but what happened to the `brand` property? – CodyBugstein Nov 04 '19 at 06:12
It's on the original object, the constructor for Car2. But you returned an anonymous function instead, which doesn't have the brand property on it – TedTran2019 Nov 04 '19 at 06:13

score 0 · Answer 3 · answered Nov 04 '19 at 06:15

new keyword is used to create object from the constructor function. The constructor implicitly returns this context when new is used with the constructor.

But in second example you explicitly returned a function body from the constructor, so car2 doesn't contain the instance of Car2 but the function body which is being returned.

The returned function doesn't contain brand property hence the value is undefined.

In Javascript, why does returning a function from a constructor function ruin the object?

3 Answers3