DEV Community

Cover image for 5 Must Know JavaScript Object Functions ๐Ÿง‘โ€๐Ÿ’ปโœ๏ธ
Dom (dcode)
Dom (dcode)

Posted on

5 Must Know JavaScript Object Functions ๐Ÿง‘โ€๐Ÿ’ปโœ๏ธ

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
});
Enter fullscreen mode Exit fullscreen mode

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";
Enter fullscreen mode Exit fullscreen mode

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:

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
*/
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Course Thumbnail

Enjoy!

Top comments (1)

Collapse
 
jeffchavez_dev profile image
Jeff Chavez

Wow. I'll refer to this one on my next project.