How to replace 'undefined' with an empty string in JavaScript

Question

I'm pulling in product data from an API. For more than half of the products, the product year doesn't exist. Instead, it returns as undefined.

Instead of displaying the word undefined, I'd like to replace it with an empty string.

Here's my code below:

product.photos.map(() => {
    let year = "";
    if (product.year === undefined) {
        year = product.year;
    }
    // Then output the data
    output += `
            <div class="card">
              <img class="img-fluid" src=${product.photos[0].text} alt=${product.model} />
              <h3>${product.year} ${product.manufacturer} ${product.model}</h3>
              <p>${product.hours} hours</p>
              <a href='https://used.battlefieldequipment.ca/en/${product["group-code"]}/${product["serial-number"]}' class="btn btn-primary">View Details</a>
            </div>         
        `;
});

Doesn't seem to work. How would I go about correcting this?

I think you meant to do if (product.year !== undefined) { (negating the expression). Alternative, you could use the 'falsy' mechanics of javascript to default to an empty string: let year = product.year || ""; — nbokmans
– nbokmans, Commented Sep 2, 2021 at 18:27

Bulent · Accepted Answer · 2021-09-02 18:31:04Z

5

I think you should use

product.year = product.year ?? ''

instead of

let year = "";
if (product.year === undefined) {
  year = product.year;
}

answered Sep 2, 2021 at 18:31

Bulent

3,4411 gold badge19 silver badges25 bronze badges

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

1 Comment

nullromo Over a year ago

If product is a reference to an object somewhere else, then setting product.year = ... will change the underlying object, so be careful that this is not an unintended externality.

nullromo · Accepted Answer · 2021-09-02 18:36:49Z

3

You could use the nullish coalescing operator inline in your output string.

product.photos.map(() => {
    // output the data
    output += `
            <div class="card">
              <img class="img-fluid" src=${product.photos[0].text} alt=${product.model} />
              <h3>${product.year ?? ''} ${product.manufacturer} ${product.model}</h3>
              <p>${product.hours} hours</p>
              <a href='https://used.battlefieldequipment.ca/en/${product["group-code"]}/${product["serial-number"]}' class="btn btn-primary">View Details</a>
            </div>         
    `;
});

answered Sep 2, 2021 at 18:36

nullromo

2,7374 gold badges25 silver badges55 bronze badges

1 Comment

infused Over a year ago

Thank you!! Never knew about this.

Collectives™ on Stack Overflow

How to replace 'undefined' with an empty string in JavaScript

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related