JS: If variable gets object from a function, doas the variable stores the content of the object or a link to the object?

Question

I am new to Java Script and I don't understand, what a variable is storing, if it gets the return value of a function that is a object. My fear is, that such a variable is not storing the value, but only a link to a memory, that is maybe overwritten a little later.

I tried this to find it out:

This function returns a object with the content: name="first" or name="second":

var returnObject = function (theSecond) {
    var obj = { name : "first" };
    if (theSecond) {
        obj.name = 'second';
    }
    return obj;
};

2 variables are now receiving, what the function returns:

var obj1 = returnObject(false); // obj3.name==first
var obj2 = returnObject(true);  // obj2.name==second

Do the variables store copys of the object that is in the function, or do they link to the objecs in the function? If it is only a link, they are linking to a cleared memory, that can be unexpected overwritten. Therefor I hope, that they are storing copys of the object.

Is obj3 only a link to ojb1?

var obj3 = obj1;        // obj3 is a link to obj1?

It seems, that obj3 is not storing a copy of obj1 but only a link to obj1 because:

obj3.name = "third";    // obj3.name==third and immediately obj1.name==third

Ok, the variable obj1 shows now the same as the variable obj3, because it is a link to obj3.

Confusing:

obj1 = returnObject(false); // obj1.name==first BUT still obj3.name==third. WHY???

Why is the link broken now? obj3.name is still "third" but obj1.name is "first"!? How can obj3 store a different value as obj1?

A copy function?

var copy = function (obj) { return obj; };

Using it:

obj2 = copy(obj1);      // obj2.name==first

Is obj2 now a copy of obj1, or a link to obj1?

obj2.name = "secondAgain";  

obj2.name is now secondAgain but immediately obj1.name is also secondAgain. It seems, that it is not a copy function. obj2 is only a link to obj1. :-(

Now I am a confused JavaScript beginner. :-((

Tags: javascript object copy function link return-value pointer clone assign assigning

UPDATE:

I understand the 2 answers that:

var retObj = function { return { name : "first" }; };
var objA = retObj();

... has the same effect like:

var objA = { name : "first" };

And:

var copy = function (obj) { return obj; };
var objB = copy(objA);

... has the same effect like:

var objB = objA;

But why:

... can a variable, that is a reference to a other variable, stores a individual object?

var retObjX  = function () { return { name : "X"  }; };
var retObjX2 = function () { return { name : "X2" }; };
var objX = retObjX();   // objX=X
var objY = objX;        // Y refers X
objX = retObjX2();      // objX=X2 BUT! objY=X

I think, that the variable objY ist not a reference to the variable objX, but a reference to the objext in retObjX() because: objY shows still X not X2.

What, if the object, that a function returns, is not a constant literal object, but a object that is build dynamically? Would a reference variable show the object that was build the last time by this function?

var retObjDyn = function () { return { rnd : Math.floor(Math.random() * 100) }; };
var objDynX = retObjDyn();  // 44
var objDynY = objDynX;      // 44
objDynX = retObjDyn();      // objDynX=78 BUT STILL: objDynY=44

objDynY that is a reference to the object that was stored in objDynX, shows still this object, even when objDynX shos a different object.

Now I think, that retObjDyn() builds a new object at every invoke. But are these objects save, or is the memory released for other things? Than objDynY can change its content unexpected.

Answer 1

It seems confusing but it's a simple concept in reality. Objects in JavaScript are passed by reference, such as arrays and objects; that's the bottom-line.

In you first function you create a new object on every call:

var returnObject = function (theSecond) {
    var obj = { name : "first" }; // create a new object
    if (theSecond) {
        obj.name = 'second';
    }
    return obj; // return the new object
};

Object literal notation {} creates a new object.

Do the variables store copys of the object that is in the function, or do they link to the objecs in the function? If it is only a link, they are linking to a cleared memory, that can be unexpected overwritten. Therefor I hope, that they are storing copys of the object.

The variables obj1 and obj2 hold different objects. They are not linked to the function. Once the function returns the object then it's done and the object gets assigned to your variable. No memory is leaking. You can check that they're different objects:

obj1 === obj2 // false, not the same object

Is obj3 only a link to ojb1?

var obj3 = obj1; 

Yes, the variable obj3 holds the same object as the variable obj1, thus:

obj3 === obj1 // true, same object, just a reference

So by this rule, your copy function is not copying an object but just taking an object and returning that same object. It is not a copy. To copy an object you have to create a new object, and loop all the properties of the old object, assign them to the new object, and return the result. A simple example:

function copy(obj) {
  var newObj = {}; // a brand new object
  for (var i in obj) {
    if (obj.hasOwnProperty(i)) {
      newObj[i] = obj[i]; // copy property
    }
  }
  return newObj;
}

Answer 2

A variable doesn't hold the object but it holds the reference. If you assign this variable to another one, they both share the same reference.

From what I heard: when you pass an object (anything non-primitive) to a function as parameter, a reference will be passed. This means that your copy-function actually assigns the reference. Your returnObject returns a new one

obj1 = returnObject(false) will make a new object (which you are instantiating in the function)