Update Nested Object Property in JavaScript

Question

I have the following piece of code below:

class Set {
  constructor() {
    console.log("New Set!");
  }

  get repsCompleted() {
    return this._repsCompleted;
  }

  set repsCompleted(value) {
    this._repsCompleted = value;
  }
}

class Exercise {
  constructor(name) {
    console.log(name);
    this.name = name;
  }

  get sets() {
    return [new Set(), new Set(), new Set()]
  }
}

let barbellSquat = new Exercise("Barbell Squat");
let updatedBarbellSquat = updateRepsCompleted(barbellSquat);

console.log(updatedBarbellSquat);

function updateRepsCompleted(exercise) {
  for (var i = 0; i < exercise.sets.length; i++) {
    exercise.sets[i].repsCompleted = 5;
  }

  return exercise;
}

I have a class exercises, which has a property sets, which is an array of objects of type Set.

So I create a new object off the Exercise class then pass the object to a function, whose purpose is to update the set objects and set the property "repsCompleted" to 5.

Then I console.log the exercise object, only to find that repsCompleted is undefined. I can't figure out why.

Here's a fiddle with the code:

https://jsfiddle.net/the_archer/a09tpr63/10/

Don't use Set, that's a built-in JavaScript type.

Barmar
– Barmar

2019-09-10 17:06:35 +00:00
Commented Sep 10, 2019 at 17:06 — Barmar
– Barmar, Commented Sep 10, 2019 at 17:06

Barmar · Accepted Answer · 2019-09-10 17:25:17Z

1

You shouldn't use a getter for sets. A getter or setter is used every time the corresponding property is read or assigned, to allow you to customize the way that property works. The getter isn't only used the first time the property is accesssed.

So every time you use exercise.sets it creates a new array containing 3 empty Set objects. sets should be an ordinary property so you can retrieve the same value every time. You can initialize it in the constructor.

If you want to hide the sets property, like you did with repsCompleted in the Set class, you can use the same method: use a different name for the actual property, and define a getter and setter that accesses it. You can also initialize it lazily by checking whether the property is set yet.

class Set {
  constructor() {
    console.log("New Set!");
  }

  get repsCompleted() {
    return this._repsCompleted;
  }

  set repsCompleted(value) {
    this._repsCompleted = value;
  }
}

class Exercise{
  constructor(name) {
    this.name = name;
    this._sets = null;
  }
  
  get sets() {
    if (!this._sets) {
      this._sets = [new Set(), new Set(), new Set()];
    }
    return this._sets;
  }
  
  set sets(value) {
    this._sets = value;
  }
}

let barbellSquat = new Exercise("Barbell Squat");
let updatedBarbellSquat = updateRepsCompleted(barbellSquat);

console.log(updatedBarbellSquat);

function updateRepsCompleted(exercise) {
  for (var i = 0; i < exercise.sets.length; i++) {
    exercise.sets[i].repsCompleted = 5;
  }

  return exercise;
}

edited Sep 10, 2019 at 17:25

answered Sep 10, 2019 at 17:09

Barmar

789k57 gold badges555 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Hirvesh Over a year ago

Can you explain why getters behaves as such?

Barmar Over a year ago

That's the whole point of getters. When you access the property, it runs the getter instead of just returning value of the property normally.

Yousaf Over a year ago

@Hirvesh getters are executed each time you lookup that propery

Barmar Over a year ago

@Hirvesh I guess you thought it's only used the first time to initialize the value, but that's not how it works.

Barmar Over a year ago

@Hirvesh Getters and setters allow you to totally override the way a property is implemented.

|

Collectives™ on Stack Overflow

Update Nested Object Property in JavaScript

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related