Ternary operator - when variable is undefined

Question

I have a fn that creates and populate variable linkedinInsight when its invoked.

Just a quick overview of this fn, it will check the response data and see if there is a match. If yes, it would populate the linkedinInight variable with the data.

Using Ternary operation, I am unable to display "undefined" when the variable is undefined. linkedinInsight === undefined ? "undefined" : "Variable exist"

However, if the fn gets a match, I could see "Variable exist" displayed.

In the case where variable is undefined, from the console, it is showing

Error handling response: TypeError: Cannot read properties of undefined (reading 'insight_tags')
    at chrome-extension://fpncfpgjnkfnlafmojhhpgophpgikaao/popup.js:13:60

The objective here is to present the data and if we couldnt find data, I would like to return a "Data not found message".

Any help guys?

document.addEventListener(
  "DOMContentLoaded",
  function () {
    var checkPageButton = document.getElementById("clickIt");
    checkPageButton.addEventListener(
      "click",
      function () {
        chrome.tabs.getSelected(null, function (tab) {
          const backgroundPage = chrome.extension.getBackgroundPage();

          const linkedinInsight =
            backgroundPage["_linkedin_pixel_data"][tab.id].insight_tags;


          alert(
            linkedinInsight === undefined ? "undefined" : "Variable exist"
          );

Answer 1

The issue is in below line, replace

const linkedinInsight =
            backgroundPage["_linkedin_pixel_data"][tab.id].insight_tags;

with

const linkedinInsight =
            (backgroundPage && backgroundPage["_linkedin_pixel_data"] && backgroundPage["_linkedin_pixel_data"][tab.id] && backgroundPage["_linkedin_pixel_data"][tab.id].insight_tags) || undefined;

Or if optional chaining is supported

const linkedinInsight =
                backgroundPage?.["_linkedin_pixel_data"]?.[tab.id]?.insight_tags;