Object deconstruction into object declaration?

Question

I have an object which has several values I want to extract and place into another object with different keys for those values. Right now I'm using deconstruction to extract the values, then defining an object literal with those extracted values and their new keys.

Here is my function:

getProductReviewData() {
    const {
        averageRateDisplay,
        rawAverageRate,
        displayReviewCount,
        productReviewIds,
        productReviews
    } = this.productReviewsStore.getAll(); // this is deconstruction of an object
    return {
        ratingDisplay: averageRateDisplay,
        rating: rawAverageRate,
        ratingCount: displayReviewCount,
        reviewIds: productReviewIds,
        reviewMap: productReviews
    };
}

However, I was wondering if is a shorthand way to do this, so use one line for both the deconstruction and the declaration. Does anyone know if this is possible?

You can *always* place everything on the same line, but you really shouldn't. — Bergi, Aug 31 '17 at 00:03

Bergi · Accepted Answer · 2017-08-31T00:15:09.573

I don't think there's anything to put them in the same statement, especially with the renaming. You could of course write your own helper function for renaming object properties.

I think it would be much cleaner though to assign the object to one variable and then repeat that multiple times, than repeating every property/variable name twice:

getProductReviewData() {
    const all = this.productReviewsStore.getAll();
    return {
        ratingDisplay: all.averageRateDisplay,
        rating:        all.rawAverageRate,
        ratingCount:   all.displayReviewCount,
        reviewIds:     all.productReviewIds,
        reviewMap:     all.productReviews
    };
}

You can also use destructuring into object properties to swap the two sides if you¹ like that better:

getProductReviewData() {
    let res = {};
    ({
        averageRateDisplay: res.ratingDisplay,
        rawAverageRate:     res.rating,
        displayReviewCount: res.ratingCount,
        productReviewIds:   res.reviewIds,
        productReviews:     res.reviewMap
    } = this.productReviewsStore.getAll());
    return res;
}

_{1: Personally I think it's just unnecessary confusing - and one line longer!}

I just thought of this, Ironic that the best way to make it shorter is to not use es6 or obj destructuring — Niles Tanner, Aug 31 '17 at 00:09

Rudolf Manusachi · Answer 2 · 2017-08-31T00:19:20.733

UPD: Simple is better than complex! I like Bergi's answer =)

Probably you can declare new keys and then change them in iterations ¯_(ツ)_/¯

getProductReviewData() {
    //declare new keys
    const newKeys = {
        averageRateDisplay: "ratingDisplay",
        rawAverageRate:     "rating",
        displayReviewCount: "ratingCount",
        productReviewIds:   "reviewIds",
        productReviews:     "reviewMap"
    }
    const productReviewsStore = this.productReviewsStore.getAll();

    //return the object with replaced keys
    return Object.assign({},
      ...Object.keys(productReviewsStore)
           .filter(key => newKeys[key])
           .map(key => ({[newKeys[key]]: productReviewsStore[key]}))
    )
}

score 0 · Answer 3 · answered Aug 31 '17 at 00:06

You can destructure and give new key/variable values in one go. But as far as I know you can't destructure directly into a new object.

const start = {
  averageRateDisplay: 1,
  rawAverageRate: 2,
  displayReviewCount: 3,
  productReviewIds: 4,
  productReviews: 5
 };

 // destructuring with renaming of variables
 const {
   // name to match : newName
   averageRateDisplay: ratingDisplay,
   rawAverageRate: rating,
   displayReviewCount: ratingCount,
   productReviewIds: reviewIds,
   productReviews: reviewMap
} = start;

// creating new object, using property value shorthand
// https://ariya.io/2013/02/es6-and-object-literal-property-value-shorthand
const end = {
    ratingDisplay,
  rating,
  ratingCount,
  reviewIds,
  reviewMap
};

console.log(end)

Object deconstruction into object declaration?

3 Answers3

Linked

Related