JavaScript new object means you can create an object, use the new keyword with Object() constructor, like this:
const person = new Object();And add properties to this object, we have to do something like this:
person.firstName = 'Name1';
person.lastName = 'Name2';To create a new object use key-value pairs separated by ‘:’ inside a set of curly braces({ }) and your object is ready to be served (or consumed), like below:
const person = {
firstName: 'testFirstName',
lastName: 'testLastName'
};JavaScript new object
Simple example code.
<!DOCTYPE html>
<html>
<body>
<script>
const person = {
firstName: 'John',
lastName: 'Steve'
};
const p1 = new Object();
p1.age = '007';
p1.firstName = 'James';
p1.lastName = 'Bond';
console.log(p1)
</script>
</body>
</html> Output:
Using ‘new’ with a user-defined constructor function
This will be useful if want to create hundreds of “person” objects. To get rid of manually adding properties to the objects, we create custom (or user-defined) functions. We first create a constructor function and then use the ‘new’ keyword to get objects:
function Person(fname, lname) {
this.firstName = fname;
this.lastName = lname;
}Now, anytime you want a ‘Person’ object, just do this:
const personOne = new Person('testFirstNameOne', 'testLastNameOne');
const personTwo = new Person('testFirstNameTwo', 'testLastNameTwo');Using a Constructor Function: You can create objects using constructor functions. Constructor functions are used to create multiple objects with the same structure. Here’s an example:
function Person(firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}
const person = new Person("John", "Doe", 30);
Using Object.create(): You can create an object and specify its prototype using the Object.create() method.
const personPrototype = {
greet: function() {
console.log(`Hello, my name is ${this.firstName} ${this.lastName}.`);
}
};
const person = Object.create(personPrototype);
person.firstName = "John";
person.lastName = "Doe";
person.age = 30;
Using ES6 Classes: You can also create objects using ES6 classes, which provide a more structured way to define object blueprints.
class Person {
constructor(firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}
}
const person = new Person("John", "Doe", 30);
These are some of the common ways to create objects in JavaScript. The choice of method depends on your specific use case and coding style preferences.
Comment if you have any doubts or suggestions regarding this JS object topic.
Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version