# Does mutable work with Objects?

**URL:** <https://talk.observablehq.com/t/does-mutable-work-with-objects/399>\
**Category:** Help\
**Created:** [February 22, 2018, 8:55am UTC](https://talk.observablehq.com/t/does-mutable-work-with-objects/399 "2018-02-22T08:55:26Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![nambrot](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/nambrot/32/270_2.png) [@nambrot](https://talk.observablehq.com/u/nambrot)\
**Post date:** [February 22, 2018, 8:55am UTC](https://talk.observablehq.com/t/does-mutable-work-with-objects/399/1 "2018-02-22T08:55:27Z")

</div>

I tried to use the (new?) mutable keyword, however it’s unclear to me whether they work with objects? I.e. I would have expected the following notebook to work?

> **[Mutable test](https://observablehq.com/@nambrot/untitled)**
>
> An Observable notebook by Nam Chu Hoai.

![48%20PM](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/1X/4e19c3bf6eaf463f833fee39b1871b8ba08ff7d5.png)

Re-evaluating any of the obj.foo cells will show the correct value

---

<div class="post-metadata">

**Author:** ![jashkenas](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jashkenas/32/1778_2.png) [@jashkenas](https://talk.observablehq.com/u/jashkenas)\
**Post date:** [February 22, 2018, 6:01pm UTC](https://talk.observablehq.com/t/does-mutable-work-with-objects/399/2 "2018-02-22T18:01:27Z")

</div>

`mutable` works with any value — but I’m afraid that it’s not a magic keyword … it doesn’t know when you later mutate the properties of any shared object, array, or other value.

What you’re looking for is:

```auto
{
  await Promises.delay(1000);
  mutable obj = {foo: "bar"};
}

```

Which is to say: you assign a new value to `mutable obj`. Does that make sense?

---

<div class="post-metadata">

**Author:** ![nambrot](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/nambrot/32/270_2.png) [@nambrot](https://talk.observablehq.com/u/nambrot)\
**Post date:** [February 23, 2018, 11:55am UTC](https://talk.observablehq.com/t/does-mutable-work-with-objects/399/3 "2018-02-23T11:55:59Z")

</div>

Totally does, mutable refers to assignment of the variable, not to mutating the value itself. Got it!

---

<div class="post-metadata">

**Author:** ![jrus](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jrus/32/586_2.png) [@jrus](https://talk.observablehq.com/u/jrus)\
**Post date:** [May 6, 2018, 5:10am UTC](https://talk.observablehq.com/t/does-mutable-work-with-objects/399/4 "2018-05-06T05:10:52Z")

</div>

Will `obj.foo = 'bar'; mutable obj = mutable obj` or the like trigger an update without creating a new object from scratch?

Edit: seems so, [https://beta.observablehq.com/@jrus/mutable-test](https://beta.observablehq.com/@jrus/mutable-test)

What I don’t understand is why the “reset” button on that page doesn’t cause the `update_obj` cell to reevaluate, but pressing the “run” arrow on the top `obj` cell does.

---

<div class="post-metadata">

**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\
**Post date:** [May 6, 2018, 3:26pm UTC](https://talk.observablehq.com/t/does-mutable-work-with-objects/399/5 "2018-05-06T15:26:13Z")

</div>

The _update\_obj_ cell only references _mutable obj_, not _obj_, and so is not re-run when _obj_ changes.

Also, the _mutable_ operator only tracks shallow mutability ([assignments to _mutable_.value](https://github.com/observablehq/notebook-stdlib/blob/b293bd75dac0f6f9418b9d32c1004f7ba5acaee5/src/mutable.js#L7)), not deep changes to an object. Setting _obj_.foo will modify the _obj_ object internally, but cells that reference _obj_ won’t be re-run until you assign a value to _mutable obj_, even if the new value is the same as the old value.

Even with the _mutable_ operator, it’s still a good practice to use immutable values whenever possible. Meaning, instead of this:

```auto
{
  mutable obj.foo = "bar";
  mutable obj = mutable obj;
}

```

Say:

```auto
{ mutable obj = {foo: "bar"}; }

```

Or, if you want to be fancy and only change _obj_.foo:

```auto
{ mutable obj = {...mutable obj, foo: "bar"}; }

```

Or, without spread syntax (for Safari):

```auto
{ mutable obj = Object.assign({}, mutable obj, {foo: "bar"}); }

```

---

<div class="post-metadata">

**Author:** ![Evan](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/evan/32/276_2.png) [@Evan](https://talk.observablehq.com/u/Evan)\
**Post date:** [May 7, 2018, 12:41pm UTC](https://talk.observablehq.com/t/does-mutable-work-with-objects/399/6 "2018-05-07T12:41:15Z")

</div>

Thanks - this helps clarify something that I was tripping over the other day.

---

<div class="post-metadata">

**Author:** ![hellonearthis](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/hellonearthis/32/3935_2.png) [@hellonearthis](https://talk.observablehq.com/u/hellonearthis)\
**Post date:** [November 28, 2020, 1:45pm UTC](https://talk.observablehq.com/t/does-mutable-work-with-objects/399/7 "2020-11-28T13:45:17Z")

</div>

That is awesome @mbostock, that was totally what I was looking for to get my ML colour prediction notebook working in an observable way.

> **[Brain JS colour recommendation](https://observablehq.com/@hellonearthis/brain-js-colour-recommendation)**
>
> Based on hackernoon/how-to-make-a-machine-learning-recommendation-system-from-scratch github repo The training works but I don't display predictions. They are printed to the console but need to be multiplyed by 255 to become real colours. I have a...