2

I have the following object:

const restaurant = {
  openingHours: {
    thu: {
      open: 12,
      close: 22,
    },
    fri: {
      open: 11,
      close: 23,
    },
    saturday: {
      open: 0, // Open 24 hours
      close: 24,
    },
  }
};

and two pieces of code that achieve the same result but are written a little bit differently:

const { fri } = restaurant.openingHours;
const friday = { ...fri };

this above is Spread syntax for sure

const { fri: {...friday} } = restaurant.openingHours;

Is the second one is a Rest syntax? I'm not sure what is the order of the assignment (that includes also destructing) in the code

michael
  • 4,053
  • 2
  • 12
  • 31
Eitanos30
  • 1,331
  • 11
  • 19
  • 4
    @souravsatyam not really, only the second one is rest, the first one is spread. – VLAZ Dec 28 '20 at 10:40
  • 1
    The first one assigns `fri` as a reference to `restaurant.openingHours.fri` and `friday` as a copy of the same. The second one never assigns a variable `fri` but retrieves `restaurant.openingHours.fri` and creates a copy named `friday` – pilchard Dec 28 '20 at 10:41
  • 2
    When you expand the object and spread the properties within `{}`, it's spread. When you collect the remaining properties to a variable, it's rest. Does that make sense? – adiga Dec 28 '20 at 10:43
  • Why not `const friday = { ...restaurant.openingHours.fri };`? It seems inconsistent to me, that you create an intermediate variable for nothing in the first example, just to copy it later, and specify one part as dot notation, and the other as destructuring. At least use either `const fri = restaurant.openingHours.fri;` or `const { openingHours: { fri } } = restaurant;`, but this in between thing... – ASDFGerte Dec 28 '20 at 10:45
  • @ASDFGerte, The two example: **'At least use either const fri = restaurant.openingHours.fri; or const { openingHours: { fri } } = restaurant;'** Are they different from what i have written in the first example?.. Also my purpose in asking this question is to understand how does **const { fri: {...friday} } = restaurant.openingHours** exactly works – Eitanos30 Dec 28 '20 at 10:51
  • 1
    I know, that's why one is named `friday`, and the others `fri`, similar to your code. Imho, clean code-style is very beneficial in avoiding misunderstandings. Towards the latter, you just ["take the remaining, and put them into `friday`"](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Rest_in_Object_Destructuring), but haven't specified anything else, so it takes everything. – ASDFGerte Dec 28 '20 at 10:57
  • @ASDFGerte but is there a big difference between : `const { fri } = restaurant.openingHours;` and `const { openingHours: { fri } } = restaurant;`? – Eitanos30 Dec 28 '20 at 11:13
  • 1
    Not that i'd know of. The latter is the destructuring way for the prior (or rather, moving all the way to destructuring, the prior is already half the way). – ASDFGerte Dec 28 '20 at 11:15

1 Answers1

0
const { fri: {...friday} } = restaurant.openingHours;

Here ...friday is a Rest syntax because we are creating an object from an indefinite number of values.

According to DigitalOcean documentaion

  • Spread syntax is used to unpack iterables such as arrays, objects, and function calls.
  • Rest parameter syntax will create an array from an indefinite number of values.
Apratim
  • 204
  • 2
  • 9