Spread operator not working in Object.assign()

Question

I'm trying to use the spread operator to populate a new object from an old object, without copying the pointer of the old object. But the new object comes out empty. :(

Here's my code:

const obj = {
  a: 'a',
  b: 'b',
  c: 'c'
};

const test1 = Object.assign({}, ...obj);
const test2 = {};

console.log('obj', obj);
console.log('test1', test1);
console.log('test2', test2);

test1 should show up in the console with the same content as obj, but it's empty.

What am I doing wrong? Is there another way of doing it, without using Object.assign()?

(Also have this in a jsbin.)

UPDATE:

I've tried:

const test = {...obj};

But I keep getting Unexpected token on the first dot of the spread. It works in JSBin, but not on my local. So I'm thinking I may have done something wonky with Webpack or Babel.

Here's my webpack.config.js:

var path = require('path');

const DEV = process.env.NODE_ENV === 'dev';
const PROD = process.env.NODE_ENV === 'prod';

module.exports = {
    devtool: 'source-map',
    entry: './src/index.js',
    module: {
        loaders: [{
            test: /\.js$/,
            loaders: ['babel-loader'],
            exclude: /node_modules/
        },{
            test: /\.(png|jpg|gif)$/,
            loaders: ['url-loader'],
            exclude: /node_modules/
        },{
            test: /\.(css|sass|scss)$/,
            use: ['style-loader', 'css-loader?importLoaders=2', 'sass-loader'],
            // exclude: /node_modules/
        },{
            test: /\.(svg)$/,
            use: ['file-loader'],
            // exclude: /node_modules/
        },
        {
            test: /\.(otf)(\?.*)?$/,
            loader: 'url-loader?limit=10000&mimetype=application/font-sfnt'
        }]
    },
    output: {
        path: path.join(__dirname, 'dist'),
        publicPath: '/dist/',
        filename: 'bundle.js'
    }
}

And here's my .babelrc:

{
    "presets": ["env", "react"]
}

[`...` is not an operator!](https://stackoverflow.com/questions/37151966/what-is-spreadelement-in-ecmascript-documentation-is-it-the-same-as-spread-oper/37152508#37152508) — Felix Kling, Feb 14 '18 at 04:19

Sagiv b.g · Accepted Answer · 2018-02-13T22:47:07.193

4

When you spread an object you need to wrap it inside an object body (same goes for arrays):

const test1 = Object.assign({}, {...obj});

With that said, i don't see any benefit from combine Object.assign with the object spread.
You could just do:

const test1 = {...obj};

Or this:

const test1 = Object.assign({}, obj);

Edit
I should mention that the object spread syntax is a proposal (in stage 3) and you need the babel plugin babel-plugin-transform-object-rest-spread to support it.

Just do:

npm install --save-dev babel-plugin-transform-object-rest-spread

And add it in your .babelrc file:

{
  "plugins": ["transform-object-rest-spread"]
}

edited Feb 13 '18 at 22:47

answered Feb 13 '18 at 22:15

Sagiv b.g

30,379
9
68
99

Updated question to reflect that I'd tried the `{...obj}` but kept getting unexpected token. – NotoriousWebmaster Feb 13 '18 at 22:25
@NotoriousWebmaster Use the last snippet then. You don't need any spread syntax (which is only for iterable stuff in ES6!) to use `Object.assign`. – Bergi Feb 13 '18 at 22:34
@NotoriousWebmaster see my edited answer. you need a babel plugin, i was sure you already had it. – Sagiv b.g Feb 13 '18 at 22:47
@Sagivb.g I added `babel-preset-stage-2` and it worked with `{...obj}`. Yay! What's the difference between stage-2 and `transform-object-rest-spread`? Tried looking it up, but docs weren't specific. – NotoriousWebmaster Feb 13 '18 at 23:03
1

I think its a matter of adding a bunch of features vs adding a specific feature. babel stage 2 will support most of the ES proposals that are currently in stage 2 and above, where `transform-object-rest-spread` will just add a support for this specific feature. – Sagiv b.g Feb 13 '18 at 23:05
By the way, you could use [babel stage 3 preset](https://babeljs.io/docs/plugins/preset-stage-3/) to support `transform-object-rest-spread` because as i mentioned in my answer, it is currently on stage 3. – Sagiv b.g Feb 13 '18 at 23:24

score 0 · Answer 2 · answered Feb 13 '18 at 22:09

0

The spread operator is not properly used in this case.

You just want: Object.assign({}, obj), alternatively: test1 = { ...obj }. What you are doing is more like Object.assign({}, obj.a, obj.b, obj.c);

answered Feb 13 '18 at 22:09

dmamills

197
1
5

Thanks @dmamills. It seems to work in jsbin, but not in my stack. Keep getting Unexpected token. :( Is it something I'm doing wrong with webpack? – NotoriousWebmaster Feb 13 '18 at 22:18
2

Actually `Object.assign({}, ...obj)` is just an error if obj is not *iterable*. It does not spread (unordered!) object properties to parameters – Bergi Feb 13 '18 at 22:34

Spread operator not working in Object.assign()

2 Answers2