3

What does the ... in {onClick, onMouseover, ...others} syntax mean in the following ES6/Typescript/React snippet? It did not follow the others variable later in code.

componentWillUnmount() {
    {onClick, onMouseover, ...others} = this.props.listeners;

    _.each(others, function(listener) {
        PageStore.removeChangeListener(listener);
    });
}
Ling Zhong
  • 1,744
  • 14
  • 24
  • It's a JavaScript (ES6) feature called destructuring assignment - see the linked question above. – joews Oct 18 '15 at 20:10
  • 1
    the linked question doesn't explain about the "...", which did not follow the `others` variable later in code – Ling Zhong Oct 18 '15 at 20:16
  • @joews thanks a lot for editing the question for better clarity :) – Ling Zhong Oct 18 '15 at 20:24
  • 2
    the `...` in `{ a, b , ...others } = obj` means "gather the members from `obj` that have not been assigned into a new object called `others`." e.g. for `{ a, b, ...others } = { a: 1, b: 2, c:3 , d: 4 }`, `others` would be `{ c: 3 , d: 4 }`. – joews Oct 18 '15 at 20:25
  • 3
    `...` is either the [spread](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator) operator, or in this case the [rest](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters) operator – azium Oct 18 '15 at 20:25
  • 1
    @azium: Almost but not quite. Object rest [is an ES7 proposal](https://github.com/sebmarkbage/ecmascript-rest-spread). – Felix Kling Oct 18 '15 at 20:50
  • The linked duplicate question clearly does not provide any relevant to explanation of `...`. How to reopen this question? – Ling Zhong Oct 19 '15 at 22:56

0 Answers0