Skip to content
Advertisements

JavaScript “New” Operator

Why “new”?

We don’t just create a normal object using JavaScript. For example; we need to do it in a different way if we want to create many similar objects, such as multiple users or a menu item. Using the JavaScript “new” operator, we can create a user-defined object type or constructor function.

        function info(name) {
            this.name = name;
            this.isAdmin = true;
        }

        let person1 = new info("alex");

        console.log(person1.name);
        console.log(person1.isAdmin);

alex
true

In the example above, the function works in the following order.

1- An empty javascript object occurs.
2- This object connects the constructor to another object.
3- Usually changes the object, adds new features.
4- If the function does not return its object, it returns.

Syntax:

new constructor[arguments]

constructor: A class that specifies the type of object.
arguments: A list of values ​​the constructor will look for.


Now let’s make another example. Let’s first specify the user’s name. Alice, Alex, Jack, Rick …..We do not use invariants by doing this. This makes it easier to read in less time. We can build a constructor. The main purpose of this constructor is; reusable object creation code apply.

function user(name) {
            this.name = name;
            this.isAdmin = false;
        };


        // person 1
        let person1 = {
            name: "Rick",
            isAdmin: false
        };

        console.log("person1: " + person1.name);
        console.log("person1 is admin?: " + person1.isAdmin);

        // person 2
        let person2 = {
            name: "Maria",
            isAdmin: true
        };

        console.log("person2: " + person2.name);
        console.log("person2 is admin?: " + person2.isAdmin);

person1: Rick
person1 is admin?: false
person2: Maria
person2 is admin?: true


JavaScript “New” Operator Examples

Example 1

We’re creating a new function called Car. We create a new object with this function “new” operator. We are assigning variables named name, model, and year. In these variables, we assign the values ​​with the “new” operator. Finally we’re returning with console.log in the console.

        function Car(name, model, year) {
            this.name = name;
            this.model = model;
            this.year = year;
        };

        let car1 = new Car("Audi", "A5", 2018);

        console.log(car1);
        console.log("name: " + car1.name);
        console.log("model: " + car1.model);
        console.log("year: " + car1.year);

Car {name: “Audi”, model: “A5”, year: 2018}
name: Audi
model: A5
year: 2018


Example 2

We can operate the “new” operator directly with the function.

        let person1 = new function () {
            this.name = "maria";
            this.surname = "allen";
        }

        console.log(person1);
        console.log("name: " + person1.name);
        console.log("surname: " + person1.surname);

{name: “maria”, surname: “allen”}
name: maria
surname: allen


Example 3

We are creating a function named “PersonInfo”. We assign four parameters to this function. Then we run the “new” operator. And we’re entering parameters. We’re finally turning it on the console.

        function PersonInfo(name, surname, age, sex) {
            this.name = name;
            this.surname = surname;
            this.age = age;
            this.sex = sex;
        }

        let oliver = new PersonInfo("oliver", "allen", 27, "Male");
        let maria = new PersonInfo("maria", "quenn", 21, "famale");

        console.log(oliver);
        console.log(maria);

PersonInfo {name: “oliver”, surname: “allen”, age: 27, sex: “Male”}
age: 27
name: “oliver”
sex: “Male”
surname: “allen”

PersonInfo {name: “maria”, surname: “quenn”, age: 21, sex: “famale”}
age: 21
name: “maria”
sex: “famale”
surname: “quenn”


Example 4

        var date1 = new Date();
        var newParagraph = document.createElement("p");
        var newText = document.createTextNode('The date is : ' + date1);
        newParagraph.appendChild(newText);
        document.body.appendChild(newParagraph);    

The date is: Sun Feb 24 2019 08:38:56 GMT + 0300 (Arabia Standard Time)


Example 5

        function carName(car) {
            if (!new.target) { 
                return new carName(car);
            }
            this.car = car;
        }

        let audi = carName("Audi");
        console.log(audi.car); 

Audi


  • constructive functions or, briefly, constructors are normal functions, but there is a common agreement to name before capitalization.
  • Constructor functions should only be called using new. Such a call means initially leaving it blank and finally returning it.

Example 6

        let myObj = {
            name: "alex"
        };

        function myFunc1() {
            return myObj;
        }

        function myFunc2() {
            return myObj;
        }

        console.log(new myFunc1() == new myFunc2())

true


Example 7

example 7

        function Calculator() {

            this.read = function () {
                this.a = +prompt('a?', 0);
                this.b = +prompt('b?', 0);
            };

            this.sum = function () {
                return this.a + this.b;
            };

            this.mul = function () {
                return this.a * this.b;
            };
        }

        let calculator = new Calculator();
        calculator.read();

        alert("Sum=" + calculator.sum());
        alert("Mul=" + calculator.mul());
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: