DEV Community

Esto Triramdani N
Esto Triramdani N

Posted on

Object desctructuring

Object Destructuring

Object desctructuring is similar with array desctruturing concept, but you can't named the object name as you wish. Instead, you can create alias for it.

Case 1: Destruct an Object Stored in Variable/Constant

Let's say, we have function that returns an object of detail user that fetched from API.

const getUser = async (username) => {
    const user = await fetch(`/user/${username}`);
    const userJson = user.json();
    return userJson;
};
Enter fullscreen mode Exit fullscreen mode

We call that above function and store the returned object .

const main = async () => {
    const user = await getUser('estotriramdani');
    console.log(user.fullname);
    console.log(user.nickname);
};
Enter fullscreen mode Exit fullscreen mode

Now, let's destruct that constant.

const main = async () => {
    const { fullname, nickname } = await getUser('estotriramdani');
    console.log(fullname);
    console.log(nickname);
};
Enter fullscreen mode Exit fullscreen mode

Make sure fullname and nickname are the same with the original object (before destructuring).
If we destruct like this

const { name, nickname } = await getUser('estotriramdani');
Enter fullscreen mode Exit fullscreen mode

name will undefined since the returned object has no name property.
So, if we want result like that (name property), we can give that property an alias by placed double colons : after fullname followed by alias name we want.

const { fullname: name, nickname } = await getUser('estotriramdani');
Enter fullscreen mode Exit fullscreen mode

alias is usefull when we get user with the same function (we only change the username params).

const {
    fullname: fullnameUser1,
    nickname: nicknameUser1
} = await getUser('estotriramdani');
const {
    fullname: fullnameUser2,
    nickname: nicknameUser2
} = await getUser('john_doe');
Enter fullscreen mode Exit fullscreen mode

Code above will avoid naming conflicts.

Case 2: Destruct Function Parameter

This topic will extremely usefull in React. Because props (we will learn it later in React section) is an object.
We have function that receive an object.

const createHouse = (params) => {
    const { name, length } = params;
    // do other stuffs
};
Enter fullscreen mode Exit fullscreen mode

Code above is work just fine, but we can simplify it again.
The following code is equivalent with code that we've just wrote above.

const createHouse = ({ name, length }) => {
    // do others stuffs
};
Enter fullscreen mode Exit fullscreen mode

As we can see, we can destruct the object right in function params. By doing this way, we can eliminated a line.
Create a function with this kind of parameter also can be called as named parameter. We can put name or length anywhere.

createHouse({ name: 'Little House', length: 50 }); // it is valid
createHouse({ length: 50, name: 'Little House' }); // it is also valid!
Enter fullscreen mode Exit fullscreen mode

See you on the next post!

Top comments (0)