Object destructuring adds unxexpected key:value pair

Question

I'm using destructuring of req.body to get all the field inputs. But for some reason, the _csrf token gets passed in??

Here's the code:

 let bizReq = {
        logo,
        category,
        name,
        owner,
        phone,
        location,
        website,
        email,
      } = req.body;

    /// EG result (console.log(bizReq);)
    new biz:  {
      name: 'Jasmine Gregory',
      email: 'sojopo@mailinator.com',
      location: 'Itaque aperiam iusto',
      owner: { firstName: 'Mary', lastName: 'Garrett' },
      phone: '+1 523 308-3805',
      website: 'https://www.kezobazi.cm',
      category: 'Clothes',
      logo: 'https://eu.ui-avatars.com/api/? 
      background=89023E&color=fff&name=Jasmine+Gregory&length=2&size=512',
      _csrf: 'ATqvC5qR-h1JPRec_usro3V4Pb6jYv80Tj5Y' ----------????---------
   }

Where am I going wrong here? Thanks in advance

I don't think this is possible, unless you're logging the wrong object? Also what does the `new` before `biz:` mean? — evolutionxbox, Apr 26 '21 at 10:47
You're not using proper syntax `let newObj = {prop1, prop2} = obj`. This means `let newObj = obj` — Som Shekhar Mukherjee, Apr 26 '21 at 10:49
OP, try removing `bizReq =` and the destructuring should work as expected — evolutionxbox, Apr 26 '21 at 10:52
@evolutionxbox It's what gets console.logged `console.log("new biz: ", bizReq);` — Mendi Sterenfeld, Apr 26 '21 at 11:22
@MendiSterenfeld there's no reason to have that variable when you already have `req.body` — evolutionxbox, Apr 26 '21 at 11:23
I think what he expects is that bizReq only contains the "destructured bits" rather than the entire contents of req.body, however it doesn't work like that. The destructuring part in the middle is only a destructuring device and not an object representation (ie it's not an object that you could assign to bizReq). — James, Apr 26 '21 at 11:36

Som Shekhar Mukherjee · Answer 1 · 2021-04-26T15:58:59.530

If you want to filter out certain properties from an object consider using Rest Parameter.

Note: let newObj = {prop1, prop2} = obj is equivalent to let newObj = obj.

const data = {
  name: "Jasmine Gregory",
  email: "sojopo@mailinator.com",
  location: "Itaque aperiam iusto",
  owner: { firstName: "Mary", lastName: "Garrett" },
  phone: "+1 523 308-3805",
  website: "https://www.kezobazi.cm",
  category: "Clothes",
  logo: "https://eu.ui-avatars.com/api/?",
  background: "89023E&color=fff&name=Jasmine+Gregory&length=2&size=512",
  _csrf: "ATqvC5qR-h1JPRec_usro3V4Pb6jYv80Tj5Y",
};

let {_csrf, ...bizReq} = data;

console.log(bizReq);

If you want to be safe and destructure only the properties that you want, avoiding the risk of including any malicious data present in req.body.

You can first destructure the required properties out of req.body and then construct the bizReq variable using these properties.

let { name, email, location, owner, phone, website, category, logo, background } = data;
let bizReq = { name, email, location, owner, phone, website, category, logo, background }

Or if you're into one liners like me, you can use an IIFE

const data = {
  name: "Jasmine Gregory",
  email: "sojopo@mailinator.com",
  location: "Itaque aperiam iusto",
  owner: { firstName: "Mary", lastName: "Garrett" },
  phone: "+1 523 308-3805",
  website: "https://www.kezobazi.cm",
  category: "Clothes",
  logo: "https://eu.ui-avatars.com/api/?",
  background: "89023E&color=fff&name=Jasmine+Gregory&length=2&size=512",
  _csrf: "ATqvC5qR-h1JPRec_usro3V4Pb6jYv80Tj5Y",
};

let bizReq = (
  ({name, email, location, owner, phone, website, category, logo, background}) => 
  ({name,email,location,owner,phone,website,category,logo,background})
)(data);

console.log(bizReq);

Thanks, but the problem is that other (malicious) key-value pairs can be added to the `...bizReq` object. — Mendi Sterenfeld, Apr 26 '21 at 14:33
@MendiSterenfeld Nice point! I've updated my answer addressing the same. — Som Shekhar Mukherjee, Apr 26 '21 at 15:59
Thanks for the IIFE, can you explain to me what's going on there? ;--) — Mendi Sterenfeld, Apr 26 '21 at 16:27
@MendiSterenfeld Created an anonymous function and immediately called it passing in `data` as an argument. Now, in the function parameter destructured the desired properties and then finally returned an object containing all the properties. — Som Shekhar Mukherjee, Apr 26 '21 at 17:37

score 2 · Accepted Answer · answered Apr 26 '21 at 10:53

This is not quite proper object destructuring.

Here is an example so that you know where you went wrong:

let obj = { a, b } = { a: 1, b: 2, c: 3 };
console.log(obj); // will print { a: 1, b: 2, c: 3 }

The let statement above is equivalent to:

let obj = ( { a, b } = { a: 1, b: 2, c: 3 } );

Assignment expressions in JS (expressions that look like p = q) will always return the right hand side of the expression. This is so that equal operators can be chained. The expression r = p = q is parsed as r = (p = q), and in order for both r and p to be assigned q, (p = q) must return q.

This means that the expression { a, b } = { a: 1, b: 2, c: 3 } will always return { a: 1, b: 2, c: 3 }. Consequently, the code is equivalent to

let obj = { a: 1, b: 2, c: 3 };

and there's your mistake.

If you want to limit the keys a certain object has, check out "Filter object properties by key in ES6".

Object destructuring adds unxexpected key:value pair

2 Answers2