Let's get straight into it. Below you'll find 5 useful functions that can be used on objects in JavaScript. 😎
YouTube Video
If you don't like reading, feel free to watch my YouTube video instead 👇
1. assign()
Starting us off we have Object.assign()
. This one is great for initializing/merging objects, and you can use it to set defaults.
Let's see it in action.
Below is a function that accepts an options
parameter. When Object.assign()
is used, any properties in the target object are overwritten by the equivalent properties in the source object.
function foo(options) {
const defaults = {
maxPoints: 5000,
startingCash: 100,
rounds: 3,
};
// { maxPoints: 20000, startingCash: 100, rounds: 5 }
options = Object.assign(defaults, options);
}
foo({
maxPoints: 20000,
rounds: 5
});
Hint: the spread (...
) syntax serves a similar purpose.
2. defineProperty()
Did you know there's a fancy way to define new object properties in JavaScript? Well, there is.
If you use this function to add a new property to an existing object, you can "customize" its definition. For example, you can make a property immutable.
Let's see an example:
const person = {
name: "Dom",
age: 28,
favoriteColor: "Blue"
};
// Add an immutable "country" property
Object.defineProperty(person, "country", {
value: "Australia",
writable: false
});
// Doesn't work!
person.country = "New Zealand";
There are many other things you can do with the defineProperty
function, and I recommend you read the MDN documentation for more info!
3. entries()
Compared to the previous 2 functions, this one is a little simpler. This function takes the key-value pairs in an object and converts them into a two-dimensional array.
Here are a couple of use cases for this:
- building URL query strings
- looping over an object (combine with array destructuring)
An example:
const color = {
red: 0,
green: 149,
blue: 120
}
for (const [key, value] of Object.entries(color)) {
console.log(`${key} => ${value}`);
}
/*
Output:
red => 0
green => 149
blue => 120
*/
Remember this one because you'll be surprised when you need it 😉
4. fromEntries()
If you didn't work it out from the last function, JavaScript calls two-dimensional arrays of key-value pairs "entries".
This function will take a two-dimensional array and convert it into an object. Pretty cool.
Let's see it:
const colorArray = [
["red", 0],
["green", 149],
["blue", 120],
];
// { red: 0, green: 149, blue: 120 }
const color = Object.fromEntries(colorArray);
Keep in mind that, while the most likely argument for this function is an array, this works on any type of iterable including strings.
5. Object.freeze()
Last but not least is Object.freeze()
. This one does what it says on the box: it will freeze the object passed into it.
A frozen object means:
- new properties cannot be added
- existing properties cannot be changed
- existing properties cannot be deleted
Example:
const person = {
name: "Dom",
age: 28,
favoriteColor: "Blue"
};
// none of these work ❌
person.country = "Australia";
person.name = "Rodney";
delete person.age
Tip: you can use Object.unfreeze()
to reverse this effect
Enrol Now 👉 JavaScript DOM Crash Course
If you're learning web development, you can find a complete course on the JavaScript DOM at the link below 👇
https://www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1
Enjoy!
Top comments (1)
Wow. I'll refer to this one on my next project.