JS destructuring complicated statement?

Question

let messages = {
  1: {
    id: '1',
    text: 'Hello World',
    userId: '1',
  },
  2: {
    id: '2',
    text: 'By World',
    userId: '2',
  },
};

// what does this statement do?
const {
  [1]: message,
  ...otherMessages
} = messages;

console.log("other messages: ", otherMessages);

We didn't have a variable otherMessages, so how does the rest syntax work on this variable? What does the above statement do in general, it's somewhat complicated?

This is just normal [object destructuring where you collect the rest of the properties in `otherMessages`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring) — VLAZ, Mar 09 '19 at 13:15
@CodeManiac nice, I was looking for a canonical about destructuring and you have already made one a month (to the day!) ago. — VLAZ, Mar 09 '19 at 13:24
@HenokTesfaye Did you check linked answer ? if you don't find related answer just let me know — Code Maniac, Mar 09 '19 at 13:27
There is no such thing as a "spread operator" in JavaScript. Spread and rest are both syntaxes but neither of them are operators. This is an example of the rest syntax because it is collecting comma-separated entries from `messages`, it is not distributing comma-separated entries to anywhere like the spread syntax does. — Patrick Roberts, Mar 09 '19 at 13:29

jo_va · Accepted Answer · 2019-03-09T13:35:48.823

This is a destructuring assignment. See MDN fore more information

On the left side of the = sign, you declare the variables to be destructured, and on the right side the variable to desctructure.

Doing this, you are declaring two variables message and otherMessages:

const { [1]: message, ...otherMessages } = messages;

and you are extracting the value of key 1 into message, and the rest of the messages object will be desctructured into otherMessages.

Since messages contains two entries with keys 1 and 2, otherMessages will be an object containing the remaining keys, which is only key 2.

score 0 · Answer 2 · answered Mar 09 '19 at 13:15

0

When trying to assign the variable otherMessages, the runtime checks to see where it is declared. As it goes up the scopes if it reaches the top level, in this case window, it will declare the variable and then assign to it using the destructuring syntax.

Think about this another way: if you were to do something like this:

otherMessages = [1, 2]

Without declaring otherMessages as a var before hand, wouldn’t the runtime declare the variable for you?

answered Mar 09 '19 at 13:15

Radu Diță

13,476
2
30
34

1

"*Without declaring otherMessages as a var before hand, wouldn’t the runtime declare the variable for you*" well, not exactly. It would go up the scope chain if no binding is found for a variable, it would a new property called `otherMessages` on the global object and assign the value to it. – VLAZ Mar 09 '19 at 13:23

JS destructuring complicated statement?

2 Answers2