89

Now that I've been working on Angular2 for almost 3 months, I've encountered a few scenarios which led me to wonder how does this happen ?

In the case of special this keyword it's obvious that it's passing a reference or instance of the related DOM Object or Class for Example.

But then there is another thing called ControlGroup which also does the same whenever it's assigned to another variable. And both the variables have access to same instance of that ControlGroup.

2 Answers2

162

Objects and arrays are passed by reference. Primitive values like number, string, boolean are passed by value. A reference to an object is also a primitive type and passed by value like other primitive types, but the object it refers to is still passed by reference.

This is not Angular or TypeScript specific, just how JavaScript works.

wonea
  • 4,783
  • 17
  • 86
  • 139
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • 8
    More on this here - arguably it is passing the reference by value http://stackoverflow.com/q/518000/314291 – StuartLC Mar 19 '16 at 12:57
  • 2
    Sure a reference is a primitive value and when passed is passed as value, but what the reference refers to is therefore passed by reference. I'll update my answer. – Günter Zöchbauer Mar 19 '16 at 13:01
  • Never heard of such a thing. Can you reproduce in a Plunker? – Günter Zöchbauer Nov 04 '16 at 05:45
  • I thought I was having problems passing a Javascript object by reference in Typescript, until I realized that the function to which I passed that object set the value of the object, thereby actually replacing it with a new object, so that it was not the same object as the one I had passed into the function, and I could not have expected the calling code to see the new value. – Bruce Patin Nov 07 '16 at 16:55
  • 1
    So if I pass an object (not a primitive) in to a function, and modify one of the members that are 3 more references down, and do not return it, all of the resulting objects should maintain their updates? – Dan Chase Nov 09 '18 at 17:43
  • "all of the resulting objects" if you pass an object then you pass only a reference to it. All parts of your code that get such a reference act on the same object instance. "all of the resulting objects should maintain their updates" is therefore misleading. There is only one instance and all act on the same and therefore all see the changes of others. – Günter Zöchbauer Nov 09 '18 at 17:46
  • What confused me when comparing this to other languages: If you overwrite the passed object, its new value is **not** shared as reference anymore. As long as you manipulate the fields inside the object it works as described above. – C4d Jan 29 '20 at 13:00
  • I don't know a language where this is different. What language(s) do you know where references passed to functions change the reference for the caller as well? – Günter Zöchbauer Jan 29 '20 at 14:31
1

A tweak in case you know what are you doing, could be as follows:

pseudocode:

foo() {
  int num = 1;
  bar(num);
  // num is 2!!
}
bar(int arg byRef) {
  arg = 2
}

typescript:

function foo() {
  let num = 1;
  (() => {
    const ret = bar(num) as any;
    num = ret.arg;
  })();
  // num is 2!!
}
function bar(arg) {
  arg = 2;
  return { arg };
}
Guillermo
  • 71
  • 4