3

I understand that JavaScript objects, including arrays, are automatically passed by reference, so I have something like this:

class Thing {
    constructor( ) {
        this.letters = [ "A", "B" ];
        this.numbers = [ 1, 2, 3 ];

        this.change( this.letters, this.numbers );
    }

    change( _letters, _numbers ) {
        let l = _letters;
        let n = _numbers;

        l = [ ];
        n = 6;
    }
}

var t = new Thing( );
console.log( t );

The log request shows that there has been no change to the properties of Thing. And yet, under different conditions that I can not recognise, I have accidentally modified passed parameters inside a function, and have had to use something like n = Array.from( _numbers ) to avoid modifying the source property. Would someone be able to explain what is happening, and why?

I would like to pass object properties by reference such that I can modify more than one related property in a single function call, and thereby reserve the return value for debugging purposes.

Thank you.

5
  • 5
    Your example is not modifying the objects, you are just reassigning the variables. You would have to have accessed some property to modify the object, eg _letters[1] = 'C' or l[1] = 'C' Commented Oct 1, 2021 at 19:13
  • 1
    With @PatrickEvans, on the first two lines of change(), l and n are references to your class's properties. However, on the next two lines, you reassign those variables to now be references to an empty array and 6. l and n no longer reference your class's properties, they now reference values declared in the scope of change(). Commented Oct 1, 2021 at 19:20
  • @DylanLandry: Thank you. That makes complete sense. How, then, would we typically (or in best practice) modify the objects passed? Is it only through references (e.g. _letters[1] ) and iteration that we can change the original values?
    – POD
    Commented Oct 1, 2021 at 19:50
  • 1
    @DylanLandry Well, no, l and n are not references. All they do is hold the same object reference as the this.letters and this.numbers properties respectively.
    – Bergi
    Commented Oct 1, 2021 at 23:02
  • 1
    @POD There is no pass-by-reference in JavaScript. There is passing of reference values though.
    – Bergi
    Commented Oct 1, 2021 at 23:03

1 Answer 1

1

The issue is the scoping. When you declared with let, the declaration is scoped to the function change and you are also reassigning the block-scoped variables here:

l = [ ];
n = 6;

If you want to change the class properties, you can do:

change(_letters, _numbers) {
    this.letters = _letters; // `this` scoped to class
    this.numbers = _numbers; // `this` scoped to class
  }

See the example:

// simple demo start
let numbers = [1, 2, 3];

let n = numbers;
n.push(4)
console.info(n, typeof n);

n = 6; // reassign n
console.info(n, typeof n, numbers);
// simple demo end

// refactored class
class Thing {
  constructor() {
    this.letters = ["A", "B"];
    this.numbers = [1, 2, 3];

    this.change(this.letters, this.numbers);
  }

  change(_letters, _numbers) {
    let l = _letters; // `let` is scoped to `change()`
    let n = _numbers; // `let` is scoped to `change()`

    l = []; // only changes scoped l
    n = 6; // only changes scoped n
  }

  changeFix(_letters, _numbers) {
    this.letters = _letters; // `this` scoped to class
    this.numbers = _numbers; // `this` scoped to class
  }
}

var t = new Thing();
console.log(t);

t.change(['C'], [4]);
console.info(t);

t.changeFix(['C'], [4]);
console.info(t);

1
  • 1
    You can also edit class properties from outside the class through the class instance: i.numbers = [4,5,6]; Commented Oct 1, 2021 at 21:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.