Objects, in JavaScript, are the most important data type and form the building blocks for modern JavaScript. These objects are quite different from JavaScript’s primitive data types (Number, String, Boolean, null, undefined, and symbol) in the sense that these primitive data types all store a single value each (depending on their types).
Definition of Object
An object is a list of items, an item is a name-value pair.
We call each item as:
- A property of Object <= If the item’s value has a complex or basic data type.
- A method of Object <= If the item’s value is a function.
Ex:
1 2 3 4 5 6 7 | var myFirstObject = { firstName: 'QuanTien', favoriteAuthor: 'Music', greet: function() { console.log('Hello Bro!'); } }; |
Creating an Object
There are different ways to create new objects:
- Create a single object, using an object literal.
- Create a single object, with the keyword
new. - Create an object using
Object.assign(). - Create an object using
Object.create().
Using an Object Literal
All you have to do is throw your key value pairs separated by ‘:’ inside a set of curly braces({ }) and your object is ready to be served (or consumed).
Ex:
1 2 3 4 | const person = { firstName: 'testFirstName', lastName: 'testLastName' }; |
Using the JavaScript Keyword ‘new’
Here are 2 ways you can use the ‘new’ keyword pattern .
Using the ‘new’ keyword with in-built Object constructor function
To create an object, use the new keyword with Object() constructor, like this:
1 | const person = new Object(); |
Now, to add properties to this object, we have to do something like this:
1 2 | person.firstName = 'testFirstName'; person.lastName = 'testLastName'; |
Using ‘new’ with user defined constructor function
We first create a constructor function and then use the ‘new’ keyword to get objects:
1 2 3 4 | function Person(fname, lname) { this.firstName = fname; this.lastName = lname; } |
Now, anytime you want a ‘Person’ object, just do this:
1 2 | const personOne = new Person('testFirstNameOne', 'testLastNameOne'); const personTwo = new Person('testFirstNameTwo', 'testLastNameTwo'); |
Using Object.assign() to create new objects
Object.assign method can take any number of objects as parameters. The first parameter is the object that it will create and return. The rest of the objects passed to it will be used to copy the properties into the new object. Let’s understand it by extending the previous example we saw.Ex:
1 2 | const orgObject = { company: 'ABC Corp' } const carObject = { carName: 'Ford' } |
Now, you want an employee object of ‘ABC Corp’ who drives a ‘Ford’ car. You can do that with the help of
Object.assign as below:1 | const employee = Object.assign({}, orgObject, carObject); |
Using Object.create() to create new objects
The
Object.create() method creates a new object, using an existing object as the prototype of the newly created object.Ex:
Imagine you have an organization represented by
orgObject:1 | const orgObject = { company: 'ABC Corp' }; |
And you want to create employees for this organization. Clearly, you want all the employee objects.
1 2 3 4 | const employee = Object.create(orgObject, { name: { value: 'EmployeeOne' } }); console.log(employee); // { company: "ABC Corp" } console.log(employee.name); // "EmployeeOne" |
Object Methods
Object.keys()
Object.keys() is a method used to create an Array with all the keys of an Object.
Ex:
1 2 3 4 5 6 7 8 9 10 11 12 | // Initialize an object const employees = { boss: 'Michael', secretary: 'Pam', sales: 'Jim', accountant: 'Oscar' }; // Get the keys of the object const keys = Object.keys(employees); console.log(keys); |
Output:
1 | ["boss", "secretary", "sales", "accountant"] |
Object.values()
Object.values() is a method opposite to Object.keys(), it creates a new Array with all the values of an object.
Ex:
1 2 3 4 5 6 7 8 9 10 11 12 | // Initialize an object const session = { id: 1, time: `26-July-2018`, device: 'mobile', browser: 'Chrome' }; // Get all values of the object const values = Object.values(session); console.log(values); |
Output:
1 | [1, "26-July-2018", "mobile", "Chrome"] |
Object.entries()
Object.entries() is a method that creates a nested array with the key/value of an Object.
Ex:
1 2 3 4 5 6 7 8 9 10 11 | // Initialize an object const operatingSystem = { name: 'Ubuntu', version: 18.04, license: 'Open Source' }; // Get the object key/value pairs const entries = Object.entries(operatingSystem); console.log(entries); |
Output:
1 2 3 4 5 | [ ["name", "Ubuntu"] ["version", 18.04] ["license", "Open Source"] ] |
Object.freeze()
Object.freeze() is used to prevent an action from modifying an object’s value attribute, and can also prevent an action such as deleting or adding more properties.
Ex:
1 2 3 4 5 6 7 8 9 10 11 12 13 | // Initialize an object const user = { username: 'AzureDiamond', password: 'hunter2' }; // Freeze the object const newUser = Object.freeze(user); newUser.password = '*******'; newUser.active = true; console.log(newUser); |
Output:
1 | {username: "AzureDiamond", password: "hunter2"} |
Object.seal()
Object.seal() is slightly opposite to Object.freeze(), which is used to prevent the addition of new properties but allows modification of previously existing properties.
Ex:
1 2 3 4 5 6 7 8 9 10 11 12 13 | // Initialize an object const user = { username: 'AzureDiamond', password: 'hunter2' }; // Seal the object const newUser = Object.seal(user); newUser.password = '*******'; newUser.active = true; console.log(newUser); |
Output:
1 | {username: "AzureDiamond", password: "*******"} |
