Introduction
JavaScript programming language – the cornerstone of the modern Web development.
As we know, in JavaScript, everything is an object (plain JavaScript object, array data structure, function, keyed collections like Map, Set, Weak Map or Weak Set).
It’s really important to remember this concept. Without this, it will be difficult to keep it up with your everyday work.
In this article, we will see the summary of the possible ways to create JavaScript object.
1. Object literal
With object literal we have entity with specific object property names and the value for each object property where everything is grouped inside curly braces. We can have static and dynamic properties inside the object. For dynamic properties, we have square brackets around property name variable or expression. We can have also the shorthand notation for object property name. Inside the example below, you can find:
- person object literal
- shorthand notation for name property
- classic/standard initialization of the surname property
- dynamic property (key) for age property
- dynamic property with expression for location property
- object method where “this” object represents the reference to the person object
- arrow function where we are showing the outer context where person object is initialized using this object
const ageKey = 'age';
const name = 'John';
const person = {
name,
surname: 'Doe',
[ageKey]: 41,
['location']: 'New York',
getName() {
return this.name;
},
showOuterContext: () => {
console.log(this);
}
};
console.log(person);
console.log(person.getName());
console.log(person.showOuterContext());
/**
{
name: 'John',
surname: 'Doe',
age: 41,
location: 'New York',
getName: [Function: getName],
showOuterContext: [Function: showOuterContext]
}
John
Window { ... }
*/
2. Constructor function
When we have a constructor function, we are passing all the properties as the arguments of the constructor, and then we need to initialize this object. Inside the example below, we have object.assign() function call in order to assign all properties to this object using property shorthand notation.
function Person(name, surname, age) {
Object.assign(this, { name, surname, age });
}
const person = new Person('John', 'Doe', 46);
console.log(person);
3. EcmaScript6 Class
ECMAScript 6 (ES6) introduced significant enhancements to JavaScript, and one of the most notable additions is the class syntax. Classes provide a more structured and object-oriented way to define and work with objects and prototypes in JavaScript.
class Person {
constructor(name = 'John', surname = 'Doe', age = 40) {
Object.assign(this, { name, surname, age });
}
}
const defaultPerson = new Person();
console.log(defaultPerson);
// Person { name: 'John', surname: 'Doe', age: 40 }
const person = new Person('Mark', 'Robertson', 48);
console.log(person);
// Person { name: 'Mark', surname: 'Robertson', age: 48 }
4. Factory function
Basically, a factory function creates the object using literal, where we have function arguments as the object properties. Inside the example below, you can find shorthand notation for all properties of the person object.
function Person(name, surname, age) {
return {
name,
surname,
age
}
}
const person = Person('John', 'Doe', 43);
console.log(person);
5. Create method from Object class
Create method accepts the JavaScript object which will be used as the prototype of the new object (result of the create method).
const personData = {
name: 'Mark',
surname: 'Harris',
showFullName: function() {
console.log(`${this.name} ${this.surname}`);
}
};
const person = Object.create(personData);
person.age = 41;
// "age" is a property set on "person", but not on "personData" object
console.log(person.showFullName());
// Mark Harris
console.log(person); // image below
Conclusion
Being proficient with JavaScript object is the key in modern Web development. When you are familiar with all the possible variations, you can decide which option is the best for you in everyday work (for specific task). Happy Codding!
