What is wrong with my object spread operator usage?

Question

var color3 = {
    name: 'Black',
    type: 'special',
    rating: 1
};

var rateColor3 = (colorName, Nrating) => ({ ...colorName, Nrating });
console.log(color3.rating); ///// 1
console.log(rateColor3(color3, 6).rating);//////1
console.log(color3.rating);//////1

I want to use object spread operator while keeping color3 immutable, But the output of my 2nd console.log is 1 instead of 6, what am i doing wrong?

Look at the whole object. `Nrating ` is a completely different property than `rating` — charlietfl, Dec 14 '18 at 19:51

JAM · Accepted Answer · 2018-12-14T20:02:08.727

2

You are assigning a the value 6 to the key NRating to the object, not the existing rating.

So your object would look like this:

{
    name: 'Black',
    type: 'special',
    rating: 1,
    Nrating: 6
}

To override the existing rating property, you have to do:

var rateColor3 = (colorName, Nrating) => ({ ...colorName, rating: Nrating });

or change your parameter Nrating to rating.

var color3 = {
    name: 'Black',
    type: 'special',
    rating: 1
};

var rateColor3 = (colorName, rating) => ({ ...colorName, rating });

console.log(rateColor3(color3, 6));

edited Dec 14 '18 at 20:02

answered Dec 14 '18 at 19:51

JAM

6,045
1
32
48

_"You are applying a new property to your object called Nrating"_ - actually, that is not true. And still it doesn't answer the OP question. – kind user Dec 14 '18 at 19:55
@kinduser try `console.log(rateColor3(color3, 6).Nrating)` using the original code. – JAM Dec 14 '18 at 19:58
It's not _applying_ a new property. It's just a basic dot notation to _get_ specified key value. – kind user Dec 14 '18 at 19:59
1

Oh sorry for beeing semantically incorrect. I'll fix it shortly! – JAM Dec 14 '18 at 20:01

kind user · Answer 2 · 2018-12-14T20:14:57.743

1

First of all you are not mutating the original color3 object, but returning a new one. Secondly:

({ ...colorName, Nrating });

will return a new object with a fourth prop Nrating: 6, since it's a shorthand for object assignment. You'll have to simply assign the value to the rating key instead.

var color3 = {
    name: 'Black',
    type: 'special',
    rating: 1
};

var rateColor3 = (colorName, Nrating) => ({ ...colorName, rating: Nrating });

console.log(rateColor3(color3, 6));

edited Dec 14 '18 at 20:14

answered Dec 14 '18 at 19:53

kind user

40,029
7
67
77

The fourth property is `Nrating: 6`. The variable isn't evaluated when using it as the property name, only as the value. – Barmar Dec 14 '18 at 20:13
@Barmar Dunno how I missed it. Thanks. – kind user Dec 14 '18 at 20:15

score 0 · Answer 3 · answered Dec 14 '18 at 19:53

Nrating needs a property name

var color3 = {
   name: 'Black',
   type: 'special',
   rating: 1
};

var rateColor3 = (colorName, Nrating) => ({ ...colorName, rating: Nrating });
console.log(color3.rating); ///// 1
console.log(rateColor3(color3, 6).rating);//////6
console.log(color3.rating);//////1

score 0 · Answer 4 · answered Dec 14 '18 at 19:54

You have created a new property Nrating. Change your rating to Nrating.

var color3 = {
    name: 'Black',
    type: 'special',
    rating: 1
};

var rateColor3 = (colorName, Nrating) => ({ ...colorName, Nrating });
console.log(color3.rating); ///// 1
console.log(rateColor3(color3, 6).Nrating);//////6
console.log(color3.rating);//////1

What is wrong with my object spread operator usage?

4 Answers4