JavaScript Object Constructor Operator - new

---

It's no exaggeration, everything in JavaScript can be constructed to be objects, be it strings, numbers, etc.

See the example below:

const name = "Monica"
typeof name; // string

const toObj = new Object(name);
typeof toObj; // object

Also, the regular { ... } syntax in the previous article only allows the creation of a single object. It is possible to create multiple similar-objects as well.

Everything is an Object in JavaScript - Audio, Date, etc.

const date = new Date();

const hrs = date.getHours();
const mins = date.getMinutes();
const secs = date.getSeconds();
const msecs = date.getMilliseconds();

const time = `The time is ${hrs}:${mins}:${secs}:${msecs}`;
console.log(time);

---

Constructor Function

The constructor functions are like the regular function declaration. The exception is that the initial letter of the function name is always in uppercase.

See the example below:

function Person(name, age) {
  this.name = name;
  this.age = age;
}

const person = new Person("Monica", 53); // instantiation
console.log(person.name, person.age); // Monica 53

It can be rewritten in form of an anonymous function but not in form of an arrow function.

const Person = function(name, age) {
  this.name = name;
  this.age = age;
}

const person = new Person("Monica", 53); // instantiation
console.log(person.name, person.age); // Monica 53

The above code snippet is the same below:

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

const person = new Person("Monica", 53); // instantiation
console.log(person.name, person.age); // Monica 53

A new object was constructed by the new operator.

The process of creating a new object is called instantiation. To create more similar objects, instantiation is needed.

const person1 = new Person("Monica", 53);
console.log(person1.name, person1.age); // Monica 53

const person2 = new Person("John", 53);
console.log(person2.name, person2.age); // John 34

We can rewrite the entire code snippet as shown below:

const person = new function Person(name="Monica", age=53) {
  this.name = name;
  this.age = age;
};

console.log(person.name, person.age); // Monica 53

The syntax above can not be called again.

---

---

Return from constructor

If return is called with an object, then the object is returned instead of this object.

function Person(name, age) {
  this.name = "Monica";
  this.age = 53;

  return { name: "John", age: 34};
}

console.log(new Person().name, new Person().age); // John 34

The code above is the same below:

const person = new function Person(name="Monica", age=53) {
  this.name = name;
  this.age = age;

  return { name: 'John', age: 34 }
};

console.log(person.name, person.age); // John 34

If return is empty, then this object is returned.

function Person(name, age) {
  this.name = "Monica";
  this.age = 53;

  return;
}

console.log(new Person().name, new Person().age); // Monica 53

---

Methods in the constructor

A function used on an object is a method.

object.method()

See the example below:

function Person(name, age) {
  this.name = name;
  this.age = age;

  this.saying = function() {
    return `${this.name} is ${this.age} years old.`;
  };
}

const person = new Person("Monica", 53);

person.saying(); // "Monica is 53 years old."

The syntax used sp far is the old syntax of creating classes.

The syntax above almost looks like the syntax in creating objects. This is because classes are the blueprint to an object. It describes the object.

Let's recall how objects are created and compare it with the examples above. See below:

const Person = (name, age) => {
  return {
    name: name,
    age: age,
    saying() {
      console.log(`${name} is ${age} years old.`);
    }
  }
};

const person = Person("Monica", 53);

person.saying(); // "Monica is 53 years old."

But we can use a destructuring technique, called property value shorthand, to save ourselves some keystrokes.

const Person = (name, age) => {
  return {
    name,
    age,
    saying() {
      console.log(`${name} is ${age} years old.`);
    }
  }
};

---

new target function check

To check if a function was called with new. It is checked by having the new.target property it.

If new.target property in the constructor mode returns the function name, the new operator was used with the function. Otherwise, it returns undefined.

See the example below:

function Person(name, age) {
  this.name = name;
  this.age = age;
  console.log(new.target); // [Function: Person]
}


const person = new Person("Monica", 53); // instantiation
console.log(person.name, person.age); // Monica 53

---

---