This content originally appeared on DEV Community and was authored by nkumarm
Introduction
There are quite few ways to create an Object in JavaScript.
- Object literals
- Object() constructor
- Object.create()
- Constructor function
- ES6 Class
Object literals
Probably this is the fastest and easiest way to create an Object in JavaScript. This is also called as an object initializer is a comma-delimited list of zero or more pairs of property names and associated values of an object, enclosed in curly braces ({}).
const newObject = {} // Simply create a new empty object
const newObject = {
someKey: "someValue",
anotherKey: "anotherValue"
}
Object values can be either primitive data type or other object.
Object() constructor
You can create an object using the built-in Object constructor.
If passed value is null or undefined or no value passed then it creates and return an empty object.
If the value is already an object, it returns the same value.
// below options create and return an empty object
const ObjWithNoValue = new Object();
const ObjWithUndefined = new Object(undefined);
const ObjWithNull = new Object(null);
const newObject = {
someKey: "someValue",
anotherKey: "anotherValue"
}
const sameObject = new Object(someObject);
sameObject['andAnotherKey'] = "one another value";
sameObject === newObject; // both objects are same.
Object.create()
This method allows you to create a new object with a specific prototype. This approach enables the new object to inherit properties and methods from the prototype, facilitating inheritance-like behavior.
const person = {
greet: function () {
console.log(`Hello ${this.name || 'Guest'}`);
}
}
const driver = Object.create(person);
driver.name = 'John';
driver.greet(); // Hello John
Constructor function
Before ES6, this was a common method to create multiple similar objects. Constructor is nothing but a function and with the help of a new keyword you can able to create an object.
It's a good practice that
capitalizethe first character of afunction namewhen you construct the object with the "new" keyword.
function Person(name, location) {
this.name = name;
this.location = location;
greet() {
console.log(`Hello, I am ${this.name || 'Guest'} from ${this.location || 'Earth'}`);
}
}
const alex = new Person('Alex');
alex.greet(); // Hello, I am Alex from Earth
const sam = new Person('Sam Anderson', 'Switzerland');
sam.greet(); // Hello, I am Sam Anderson from Switzerland
ES6 Class
A more modern approach helps to create object just like other OOP programming languages using class with constructor function to initialize properties and methods.
class Person {
constructor(name, location) {
this.name = name || 'Guest';
this.location = location || 'Earth';
}
greet() {
console.log(`Hello, I am ${this.name} from ${this.location}`);
}
}
const santa = new Person('Santa');
santa.greet(); // Hello, I am Santa from Earth
References:
This content originally appeared on DEV Community and was authored by nkumarm
nkumarm | Sciencx (2024-10-12T17:46:27+00:00) Methods to create Objects in JavaScript. Retrieved from https://www.scien.cx/2024/10/12/methods-to-create-objects-in-javascript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.