CODEWITHSUNDEEP
javascriptnode.jsexpressdestructuring
Mendi Sterenfeld
Mendi Sterenfeld

Reputation: 397

Object destructuring adds unxexpected key:value pair

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: '[email protected]',
      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

Upvotes: 0

Views: 136

Answers (2)

Som Shekhar Mukherjee
Som Shekhar Mukherjee

Reputation: 8158

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: "[email protected]",
  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: "[email protected]",
  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);

Upvotes: 3

virchau13
virchau13

Reputation: 1448

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".

Upvotes: 2

Related Questions