Difference between constructor and function that returns literal object

Asked

Viewed 348 times

6

What is the practical difference between me creating a construction function in this way:

function construtora (nome, sobrenome) {
    this.nome = nome
    this.sobrenome = sobrenome
}

Or in this way:

function construtora (nome, sobrenome) {
    let obj = {}
    
    obj.nome = nome
    obj.sobrenom = sobrenome
    
    return obj
}  

1 answer

3

In your first example, you have a function that works as a (constructor Function), which returns a new object instance if you call it using the operator new. Thus:

function construtora(nome, sobrenome) {
  this.nome = nome;
  this.sobrenome = sobrenome;
}

const instance = new construtora('John', 'Doe');
console.log(instance);

As you did not specify in the answer whether you are using the new or not, I find it pertinent to say that if you simply invoke the function, without using the operator new, an object will not be returned. The call will simply return undefined:

function construtora(nome, sobrenome) {
  this.nome = nome;
  this.sobrenome = sobrenome;
}

const instance = construtora('John', 'Doe');
console.log(instance); // undefined

As of Ecmascript 2015 (alias ES6), this classic "prototypical" pattern to achieve a certain type of "object orientation" in Javascript has been less used, since the construction class has been introduced. But make no mistake, because class is merely syntactic sugar for this ancient prototypical approach.


In his second example, I would not say that the function (construtora) is, in fact, a constructor function. You are creating a kind of factory function (Factory Function), why you create a literal object and return it. It is worth saying that in both cases an object is being created, but there is a subtle difference which I enter in more detail in this other answer.

Briefly (read the question referred to to learn more), in this second example, you are creating a literal object (which is not the case in the first example). So if you check, the way the objects were built is different, and in this case the constructors as well. See:

function construtora1(nome, sobrenome) {
  this.nome = nome;
  this.sobrenome = sobrenome;
}

function construtora2(nome, sobrenome) {
  let obj = {};
  obj.nome = nome;
  obj.sobrenom = sobrenome;
  return obj;
}

const instance = new construtora1('John', 'Doe');
const obj = construtora2('Luiz', 'Felipe');

console.log(instance);
console.log(obj);

console.log(instance.constructor.name); // "construtora1"
console.log(obj.constructor.name); // "Object"

Note that despite own ownership (Own properties) of objects instance and obj be the same, the builders are different, which also indicates a different prototype chain.


By way of preference, I personally consider the function name of the first example construtora correct, since the function is building an object (contrutora is the constructor of the object if it was created through the operator new).

However, the function name (construtora) of the second example does not seem to me so precise, since it is not the function (construtora) that builds the object, but yes Object. Remember that internally, when you create literal objects, they are built from Object.

From the semantic and internal point of view of language, there is the difference that when calling a function without the operator new, internal property [[Call]] is invoked. When the function is called using the operator new, internal property [[Construct]] is called. Consult this table to learn more.

The specification itself (in the table referred to) refers to the functions they implement [[Call]] as "callable" and the functions they implement [[Construct]] as "constructors". It is worth noting that all constructor Function is, also, callable.


It’s not about the question, but note that I put a semicolon at the end of each statement. It may seem "fresh," but I’ve created this habit to avoid some bizarre situations which may occur if you do not use the semicolon on all lines (see more on the subject here).

Browser other questions tagged

You are not signed in. Login or sign up in order to post.