This is an article in the series "tips and tricks javascript"
What is javascript object? In fact almost everything in javascript is an object. But in this post, we will learn which method objects are used the most and most widely, which every project must use. Besides, there are also "Array methods in javascript".
What is javascript object?
To fully understand this article, you must first understand "What is an javascript object?" and above all you have to understand how to create, modifying, and working an object. In the previous tutorial of tipjs, talked a lot about Objects you can check out. In the previous "Array method in javascript" we talked a lot about how to use the Array method.
The javascript object is a collection of key/value . The values may include properties and methods and may contain all other types of JavaScript data, such as String , Number and Booleans .
Objects have many useful integrated methods that we can use and access to simply work with individual Objects. The tutorial of this post will go through important integrated Object methods, and is accompanied by examples that illustrate each specific case when using the object.
Object.create ()
Object.create() is a method used to create a new Object and use that object to extend more to an object, let's look at an example below.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | // Initialize an object with properties and methods const job = { position: 'cashier', type: 'hourly', isAvailable: true, showDetails() { const accepting = this.isAvailable ? 'is accepting applications' : "is not currently accepting applications"; console.log(`The ${this.position} position is ${this.type} and ${accepting}.`); } }; // Use Object.create to pass properties const barista = Object.create(job); barista.position = "barista"; barista.showDetails(); Output The barista position is hourly and is accepting applications. |
Above that we also see that we can change the value of a properties of the new Object we have just used Object.create() .
Object.keys ()
Object.keys() is a method used to create an Array with all the keys of an Object. And from the experience of tipjs, maybe this is a very good method. Because tipjs are used a lot.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | // 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 ["boss", "secretary", "sales", "accountant"] |
Once we have an Array from using Object.keys() , we can continue to use Method Array in javascript for further development like iterate:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | // Iterate through the keys Object.keys(employees).forEach(key => { let value = employees[key]; console.log(`${key}: ${value}`); }); Output boss: Michael secretary: Pam sales: Jim accountant: Oscar |
Object.values ()
Object.values() is a method in contrast to Object.keys() that creates a new Array with all the values of an object.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | // 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, "26-July-2018", "mobile", "Chrome"] |
Object.entries ()
Object.entries() is a method that creates a nested array with the key / value of an Object.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | // 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 [ ["name", "Ubuntu"] ["version", 18.04] ["license", "Open Source"] ] |
Object.assign ()
Object.assign() is a method used to copy values from one object to another. In the example below, we use Object.assign() to merge them together:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | // Initialize an object const name = { firstName: 'Philip', lastName: 'Fry' }; // Initialize another object const details = { job: 'Delivery Boy', employer: 'Planet Express' }; // Merge the objects const character = Object.assign(name, details); console.log(character); Output {firstName: "Philip", lastName: "Fry", job: "Delivery Boy", employer: "Planet Express"} |
But the important thing is when using Object.assign() it is a shallow-cloning. See also "shallow-cloning in javascript" . In addition, if you merge an object, we can use (...) , see the example if you are interested:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | // Initialize an object const name = { firstName: 'Philip', lastName: 'Fry' }; // Initialize another object const details = { job: 'Delivery Boy', employer: 'Planet Express' }; // Merge the object with the spread operator const character = {...name, ...details} console.log(character); Output {firstName: "Philip", lastName: "Fry", job: "Delivery Boy", employer: "Planet Express"} |
And spread syntax is also a shallow cloning. See also The difference between Shallow copying and Deep copying in javascript object
Object.freeze ()
Object.freeze() used to prevent an act of changing the value attribute of an object, in addition to preventing an action such as deleting or adding properties.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | // 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 {username: "AzureDiamond", password: "hunter2"} |
To understand Object.freeze() not an example of this, you can understand the suggested tipjs you can read more about this article: How can I deep freeze an object in JavaScript?
Object.seal ()
Object.seal() is a bit opposite of Object.freeze() which is used to prevent the behavior of adding a new property but allowing modification of existing properties. For example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | // 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 {username: "AzureDiamond", password: "*******"} |
At this point, we recommend that you continue to see more articles on "Differences Object.freeze () and Object.seal () in JavaScript"
Conclusion and draw lessons
The best thing is to give you a way to see, understand and use method objects in javascript effectively and subtly. For each example, we try to pass on articles that go further. Do not ignore it wastefully. Because each article contains more knowledge. In addition, you should also learn about "Array method in javascript" .
If you are interested in articles about javascript please follow: Tips and tricks javasccript
Further reference: digitalocean.com