how to get nested object value inside a function in javascript while object destructuring?

Question

while practicing object destructuring ; I faced some problems.

I have a object like this:

const secondObject = {
    value : 2,
    credit: 23, 
    details: {
        serialNumber : 4
    }
}

Now I want to get 'serialNumber' value inside a function parameter. so I invoke a function like this :

function output({value, details}){
    console.log(`value: ${value} , detail: ${details}`);
}
output(secondObject);

when I log it into console the result showing : detail: [object Object]

*but if I do like this ,I got the serialNumber's value : *

 const {details: {serialNumber}} =  secondObject;
console.log(serialNumber);

can anyone tell me how can I get the value inside a function?

Answer 1

If you want to get a specific attribute inside details, then you can directly access it:

function output({value, details}){
    console.log(`value: ${value} , detail: ${details.serialNumber}`);
}

or equivalently, as suggested by Nick Parsons in the comments:

function output({value, details: {serialNumber}}){
    console.log(`value: ${value} , detail: ${serialNumber}`);
}

If instead you want to show the full object contained in details, then you can use JSON.stringify, as explained here. Have a look at this piece of code.

const secondObject = {
    value : 2,
    credit: 23, 
    details: {
        serialNumber : 4,
        fooBar: 42
    }
}

function output({value, details}){
    str = JSON.stringify(details);
    console.log(`value: ${value} , detail: ${str}`);
}

output(secondObject);
// value: 2 , detail: {"serialNumber":4,"fooBar":42}