JavaScript - adding properties to an object using the spread syntax within a ternary statement

Question

I want to conditionally append different headers to my request object. I don't want to use if/else.

The following ... gives syntax error expression expected.

I've looked at some other examples on SO but they don't seem to work. I just can't get my syntax right.

headers is some object that comes from function args which may or may not exist.

What is the correct way to write this?

    const req = {
      meta: {
        id: "asd123"
      }
    }

    {...req.meta, ...( headers ? headers : { "Content-Type": "application-json" })}

I want my output to look something like this

    const req = {
      meta: {
        id: "asd123"
      }
      headers: {
        ContentType: "application-json",
      }
    }

Nina Scholz · Accepted Answer · 2020-07-04 16:25:14Z

2

You need req as complete object for spreading and a new headers property.

result = { ...req, headers: (headers || { "Content-Type": "application-json" }) };

If you like to use short hand properties, you need to update headers first.

headers = headers || { "Content-Type": "application-json" };
result = { ...req, headers };

edited Jul 4, 2020 at 16:25

answered Jul 4, 2020 at 16:18

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

vijay kiran reddy Over a year ago

import React, { Component } from "react"; class Testt extends Component { obj = { user1: "vijay", imageUrl: "picsum.photos/id/1/200/300" }; render() { return ( <div> <img src={this.obj.imageUrl}></img> {/* <h1 {this.obj.user1}> </h1>; // error : '...' expected */} <h1 {...this.obj.user1}> </h1> </div> ); } } export default Testt; why does it ask me to use spread operator at h1 tag but not for img tag ? @Nina Scholz

Nina Scholz Over a year ago

@vijaykiranreddy, i have no idea of react.

genius42 · Accepted Answer · 2020-07-04 16:18:17Z

1

If you just typed this line

{...req.meta, ...( headers ? headers : { "Content-Type": "application-json" })}

Into your IDE, this is not an expression. You should assign it to a variable or use it in another way. The ternary part seems fine to me.

answered Jul 4, 2020 at 16:18

genius42

2431 silver badge6 bronze badges

Comments

mmfallacy · Accepted Answer · 2020-07-04 16:19:04Z

1

Probably

{...req, headers: headers || { "Content-Type": "application-json" }}

req.headers will be assigned to headers if it exists or { "Content-Type": "application-json" } if not.

answered Jul 4, 2020 at 16:19

mmfallacy

1868 bronze badges

Comments

Subhadeep · Accepted Answer · 2020-07-04 16:25:02Z

0

As header is coming as a funtion's args - you can first default initialize that header with undefined. Then just try this code -

if header is present then simply destructure it - {...req.meta, ...( headers ? {headers} : { "Content-Type": "application-json" })}

answered Jul 4, 2020 at 16:25

Subhadeep

1495 bronze badges

Comments

Rishabh Sharma · Accepted Answer · 2020-07-04 16:30:59Z

0

Code Readability has its own importance. Thus, I find below solution as most appropiate:

req.headers = headers || { "Content-Type": "application-json" }

Also, You can use Nullish coalescing operator '??' as below :

req.headers = headers ?? { "Content-Type": "application-json" }

But, '??' is a recent addition to the language. Old browsers may need polyfills.

answered Jul 4, 2020 at 16:30

Rishabh Sharma

15 bronze badges

Collectives™ on Stack Overflow

JavaScript - adding properties to an object using the spread syntax within a ternary statement

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related