Spread operator not working on Objects with string as key

Question

Im writing some code atm with ES6 and Babel (es2015 preset) and I cant spread one Object as I am used to. Normally I would take an Object, use a spread and map the inner content like [...someObject].map(dosomestuff). But my one object does not behave as expected and the only difference I found so far are the keys:

let myObject = {
  'key': content,
  'key2': content,
  'key3': content
};

let array = [...myObject];

Since the object gets generated form a file structure, the keys are formed by variables and can include special chars, so i need to set them like object[key] = value. Why cant I use the spread operator on that object (the array is always empty)? And is there a workaround thats as comfortable as the spread-operator (I dont mean making a new Array with Object.keys and use that)

I want get an array that i can map like [content, content, content].map(doSomething) — knigge, May 18 '17 at 20:53
You can `map()` keys to values or use `Object.values(myObject)` — Nenad Vracar, May 18 '17 at 20:54
[`...` is not an operator!](https://stackoverflow.com/questions/37151966/what-is-spreadelement-in-ecmascript-documentation-is-it-the-same-as-spread-oper/37152508#37152508) *"Why cant I use the spread operator on that object"* You can only use a spread *element* when that element is *iterable*. Objects are not iterable. — Felix Kling, May 18 '17 at 21:01

Sagiv b.g · Answer 1 · 2017-05-18T21:10:50.273

5

The object spread works on bojects, you can't spread an object into an array.

You should spread it to another object:

let myObject = {
  'key': "content1",
  'key2': "content2",
  'key3': "content3"
};

let myObject2 = {
  'key4': 'content4'
}

let newObj= {...myObject, ...myObject2};
console.log(newObj);

This is not part of ES6, but it is on stage 3

edited May 18 '17 at 21:10

answered May 18 '17 at 20:55

Sagiv b.g

30,379
9
68
99

1

This is invalid ES6. – Felix Kling May 18 '17 at 21:01
using `babel` https://babeljs.io/docs/plugins/transform-object-rest-spread/ – Sagiv b.g May 18 '17 at 21:05
1

Sure, but how should somebody deduce that from your answer? – Felix Kling May 18 '17 at 21:05

score 2 · Answer 2 · answered May 18 '17 at 21:10

Why cant I use the spread operator on that object?

First of all, ... is not an operator!.

You can only use a spread element when that element is iterable. Objects are not iterable.

And is there a workaround thats as comfortable as the spread-operator (I dont mean making a new Array with Object.keys and use that)

Not in ES6.

I am assuming that you want to get the property values from the object.

If you don't wan to write a helper function and don't necessarily want to use a spread element, you can actually make use of Array.from's ability to take a mapping function as second argument:

Array.from(Array.keys(myObject), x => myObject[x]);

If you really don't want to use Object.keys (Object.values doesn't exist in ES6), then you can write yourself your own helper function as a generator:

function* values(obj) {
  for (var x in obj) {
    // You can use `obj.hasOwnProperty(x)` to guard against inherited properties
    // to achieve the same effect as `Object.keys`
    yield obj[x];
  }
}

let myObject = {
  'key': 'content',
  'key2': 'content1',
  'key3': 'content2'
};

console.log([...values(myObject)]);
// or
console.log(Array.from(values(myObject)));

score 0 · Answer 3 · answered May 18 '17 at 20:54

0

With Chrome I see that using spread on an object results in an exception. What does work is using Map

answered May 18 '17 at 20:54

Eugene

9,242
2
30
29

Spread operator not working on Objects with string as key

3 Answers3