DEV Community

loading...
Cover image for JavaScript Object Constructor Operator - new

JavaScript Object Constructor Operator - new

bello profile image Bello Updated on ・4 min read


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
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

The syntax above can not be called again.


image.png


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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Methods in the constructor

A function used on an object is a method.

object.method()
Enter fullscreen mode Exit fullscreen mode

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."
Enter fullscreen mode Exit fullscreen mode

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."
Enter fullscreen mode Exit fullscreen mode

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.`);
    }
  }
};
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

image.png


Learn on Skillshare

Discussion (0)

pic
Editor guide