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;
};

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);
};

Now, let's destruct that constant.

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

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');

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');

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');

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
};

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
};

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!

See you on the next post!