5 Must Know JavaScript Object Functions 🧑‍💻✍️

#javascript #webdev #beginners #programming

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