JavaScript Object Constructor Operator - new
Tags: javascript, node, tutorial, webdev
Published: 2021-02-10 22:45:09

<a href="https://skillshare.eqcm.net/c/2680282/974625/4650" target="_top" id="974625"><img src="//a.impactradius-go.com/display-ad/4650-974625" border="0" alt="" width="728" height="90"/></a><img height="0" width="0" src="https://skillshare.eqcm.net/i/2680282/974625/4650" style="position:absolute;visibility:hidden;" border="0" />

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

See the example below:

```js
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.

```js
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:

```js
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.

```js
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:

```js
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.

```js
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:

```js
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.

---
[![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1613216173820/rZ5SZDXgh.png)](https://domain.mno8.net/c/2653712/848392/9560)

---
### Return from constructor
If `return` is called with an object, then the object is returned instead of `this` object.

```js
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:

```js
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.

```js
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:

```js
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:

```js
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.

```js
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:

```js
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
```

---

[![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1613216267892/cgCrviTiF.png)](https://www.buymeacoffee.com/techstackmedia)

---

<a href="https://skillshare.eqcm.net/c/2680282/300216/4650" target="_top" id="300216"><img src="//a.impactradius-go.com/display-ad/4650-300216" border="0" alt="Learn on Skillshare" width="300" height="250"/></a><img height="0" width="0" src="https://skillshare.eqcm.net/i/2680282/300216/4650" style="position:absolute;visibility:hidden;" border="0" />