Use of colon in object assignment destructuring JavaScript

Question

Working with React.js and React Router:

import React, { Component } from 'react';

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={} />
)

*{ component: Component, ...rest }*

...rest is the use of spread syntax but what does *component: Component* do?

Answer 1

In ES6 this will assign the value to a new variable in this case named foo

let obj = {
  name: 'Some Name',
  age: '42',
  gender: 'coder'
};
let { name: foo, ...rest } = obj;
console.log({foo, rest}) // { foo: 'Some Name', rest: { age: 42, gender: 'coder' } }
//

In this case, name will not be defined

See assigning to new variable names