Processing one object into two results returns the object first processed in both return statements no matter what

Question

I am building a firebase eco-system, but I suspect it has nothing to do with that. This is also my first question here I think so please bare with me.

So I have got one object called articleObject containing information about a product.

let articleObject = {
title: 'title of a product',
tagline: 'tagline of a product'
}

I then send the articleObject to GCP AutoML - entity extraction, split the articleObject into two and process the results twice in two different ways since one of them retains all the info I need and the other one is actually usable with Firestore noSQL database because apparently it is a piece of s- I mean it's designed to support a flat hierarchical structure with simple queries.

async function extractEntities(articleObject) {
            const projectId = 'suck-it-1454';
            const location = 'us-central1';
            const modelId = 'TEN657473824614fake';
            let content = `${articleObject.title} ${articleObject.tagline}`
            console.log(content);
            let simpleObject = articleObject;
            let complexObject = articleObject;
            const client = new PredictionServiceClient();
            // Construct request
            const request = {
                name: client.modelPath(projectId, location, modelId),
                payload: {
                    textSnippet: {
                        content: content,
                        mimeType: 'text/plain', // Types: 'test/plain', 'text/html'
                    },
                },
            };

            const [response] = await client.predict(request);
            //simple way
            for (const tagPayload of response.payload) {
                let entityType = tagPayload.displayName;
                let entityText = tagPayload.textExtraction.textSegment.content;
                let certainty = tagPayload.textExtraction.score;
                let currentCertainty;
                try {
                    currentCertainty = simpleObject[entityType][entityText]
                    if (currentCertainty > certainty){
                        continue;
                    } else {
                        simpleObject[entityType] = entityText;
                    }
                } catch(err) {
                    simpleObject[entityType] = entityText;
                    
                }
                
            }

            //complex way
            for (const tagPayload of response.payload) {
                let entityType = tagPayload.displayName;
                let entityText = tagPayload.textExtraction.textSegment.content;
                let certainty = tagPayload.textExtraction.score;
                console.log(`entityType: ${entityType}, entityText: ${entityText}, certainty: ${certainty}`);
                complexObject[entityType] = {[entityText]:certainty};
                console.log('-------------------');
                console.log(complexObject[entityType]);
                console.log('-------------------');
            }

            
            console.log(complexObject);
            console.log(simpleObject);
            await browser.close();

            return [complexObject, simpleObject]

        }

Okay so the complex way pertains to it giving me a complex result where the object is formatted as such:

let complexObject = {
    title: 'title of a product',
    tagline: 'tagline of a product',
    Brand:{"brand":0.9999993},
    Manufacturer:{"manufacturer":0.958499993, "possiblemanufacturer2":0.66555444}
    Model:{"model":0.93719993}
}

and the simple way gives me

let simpleObject = {
    title: 'title of a product',
    tagline: 'tagline of a product',
    Brand:"brand",
    Manufacturer:"manufacturer",
    Model:"model"
}

BUT - in the end the two console.log statements before the browser.close() clause gives me the same god damn object (identical). My question is why? If I reverse the order of the for loops i.e //simple way and //complex way the result is the opposite. Both the resulting objects are always the same but what changes is if it's the complex one or the simple one that is the result.

I am using node 13 and firebase emulator is using node 10 if that matters that much. I doubt it has anything to do with firebase.

Answer 1

You see the same object twice in the console because both variables simpleObject and complexObject refer to the same object in memory.

let simpleObject = articleObject;
let complexObject = articleObject;
// from this point `simpleObject` and `complexObject` refer to the same object

You can fix this issue by cloning the initial articleObject using a spread operator for example:

let simpleObject = { ...articleObject };
let complexObject = { ...articleObject };
// now `simpleObject` and `complexObject` refer to separate copies of `articleObject`