This content originally appeared on DEV Community and was authored by ABIDULLAH786
Every day we are working on real-world problems so if the implementation language is JavaScript then we must work with objects. And to work efficiently we must know the most used methods of the object. And I want to reference that information in this article is based on Mozila
Table Of Contents
- create()
- assign()
- keys()
- values()
- entries()
- fromEntries()
- freez() & seal()
Object.create()
The object.create() method Is used to create a new object and link I to the prototype of an existing object. It returns a new object with the specified prototype object and properties.
let student = {
name: "Abid",
age: 23,
display() {
console.log("Name: ", this.name);
}
};
let std = Object.create(Student); // Object Creation
std.name = "Ahmed"
std.display(); // with same properties
Object.assign ()
The Object.assign() method assigns/copies enumerable and own properties from a source object to a target object. It returns the modified or new target object.
const target = { a: 1, b: 2 };
const source = { c: 4, d: 5 };
// it merge the objects and return new objects
const newTarget = Object.assign(target, source);
console.log(target);
// expected output: Object { a: 1, b: 2, c: 4, d:5 }
console.log(newTarget);
// expected output: Object { a: 1, b: 2, c: 4, d:5 }
As you have noticed in above example that after merging two objects it returned the result in new object, but also it changed target object itself. If we do not want to reflect out changes on existing objects then we have to use empty {} object as a first parameter of assign method.
const target = { a: 1, b: 2 };
const source = { c: 4, d: 5 };
// it merge the objects and return new objects
const newObj = Object.assign({},target, source);
console.log(target);
// expected output: Object { a: 1, b: 2 }
console.log(newObj);
// expected output: Object { a: 1, b: 2, , c: 4, d:5 }
If the source and target property are the same then it overwrites the target property by the new value of source.
const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
const newObj = Object.assign({}, target, source);
console.log(target);
// expected output: Object { a: 1, b: 2}
console.log(newObj);
// expected output: Object { a: 1, b: 4, c: 5 } // the target property is overwrite by source
Cloning an object
const obj = { a: 1 };
const copy = Object.assign({}, obj);
console.log(copy); // { a: 1 }
Here the cloning has two different behaviors if the object has no inner object then the cloning work as deep clone and when the cloning object has any nested object the cloning work as shallow copy only for nested object, it will be more cleared with example:
let obj1 = { a: 0 , b: { c: 0}};
let obj2 = Object.assign({}, obj1);
console.log(JSON.stringify(obj2)); // { "a": 0, "b": { "c": 0}}
obj1.b.c = 3; // it reflect the changes in every shallow copy
console.log(JSON.stringify(obj1)); // { "a": 0, "b": { "c": 3}}
console.log(JSON.stringify(obj2)); // { "a": 0, "b": { "c": 3}}
In above example the obj1 has the inner object like this b: { c: 0} so this object's reference will be shared with all new clones and change in one place will cause in all places.
3. Object.keys():
Object.keys() create and return an array containing the keys/names of an object.
let student = {
name: "Abid",
age: 23,
status: "Student"
};
console.log(Object.keys(Student)) // ['name', 'age', 'status']
console.log(Object.keys(Student))
4. Object.values()
Object.values() create an array containing the values of an object.
let student = {
name: "Abid",
age: 23,
status: "Student"
};
console.log(Object.values(Student)) // ['Abid', 23, 'Student']
5. Object.entries():
Object.entries() returns an array of the key/values pairs of an object.
let student = {
name: "Abid",
age: 23,
status: "Student"
};
console.log(Object.entries(student)) // [ ["name", "Abid"], ["age", 23], ["status", "Student"]]
6. Object.fromEntries()
Object.fromEntries() does the exact opposite of Object.entries(). It takes an array of key values pairs and convert them into single object.
let student = {
name: "Abid",
age: 23,
status: "Student"
};
let studentArray = [["name", "Abid"], ["age", 23], ["status", "Student"]];
console.log(Object.fromEntries(studentArray)) // {name: 'Abid', age: 23, status: 'Student'}
7. Object.freez() and Object.seal()
Common Points:
- Both prevents a JavaScript object from being altered.
- You can’t add new properties
- You can’t remove existing properties.
Difference:
Object.seal() allows the modification of existing properties.
Note: The compiler does not throw any error if we violate any of the above mentioned rule.
Code Level Example (freez and seal)
let frozen = Object.freeze({ username: "Abid"})
let sealed = Object.seal({ username: "Abid"})
// Adding new Property
frozen.name = "Ahmed"
sealed.name = "Ahmed"
// removing existing property
delete frozen.username;
delete sealed.username;
// updating the existing property
frozen.username = "Ahmed"
sealed.username = "Ahmed"
console.log(frozen) // { username: 'Abid' }
console.log(sealed) // { username: 'Ahmed' }
Important Points: (freez and seal)
- Remember that both methods perform a shallow freeze/seal on the object.
- This means that nested objects and arrays are not frozen or sealed and can be changed.
- To prevent this, you need the concept of deep freezing of objects which I will be discussing in upcoming post
Exploring new concepts in #JavaScript and sharing with others is my passion and it gives me pleasure to help and inspire people. If you have any suggestion or want to add something please comment.
If you liked the post follow me on: Twitter, Linkedinand GitHub!
This content originally appeared on DEV Community and was authored by ABIDULLAH786
ABIDULLAH786 | Sciencx (2022-07-24T17:33:12+00:00) JavaScript Object Methods. Retrieved from https://www.scien.cx/2022/07/24/javascript-object-methods/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.