browser-inconsistent unexpected "undefined" string when using object destruction

Question

When I am trying out some object destruction syntax in some browser consoles, something unexpected happened. Firstly I entered

action = {
      type: "SET_APPS_UI_REVERT",
      device: 23456,
      managedApps: "12345"
    }

and then

( { type, status, appsInfo, device,managedApps,appName } = action);

lastly

status

So both chrome and firefox decided to give me an "undefined" that is a string, rather than a undefined value, while edge would give me an usual undefined. However, when I typed

const { type, status, appsInfo, device,managedApps,appName } = action

and then

status

in edge, it gives me a "" rather than undefined.

Is this results of some browser inconsistency? Or actually some bugs?

Screenshots are below

chrome-66-0-3359-181-no-const.PNG

edge-41-16299-402-0-with-edgehtml-16-16299-no-const.PNG

edge-41-16299-402-0-with-edgehtml-16-16299-with-const.PNG

firefox-60-0-1-no-const.PNG

Answer 1

Using the following syntax:

( { type, status, appsInfo, device,managedApps,appName } = action);

You are explicitly saying "destructure action.status to the existing variable status.

If you don't already have a variable called status in the local scope then it will attempt to assign action.status to the window.status property. This property only accepts a string, so when action does not have a status property, you've effectively done this:

window.status = undefined;

Since window.status coerces to a string, when this is read back you get window.status === "undefined";.

Even though this doesn't have any effect on the statusbar in Firefox, it still exhibits the behaviour.

Your second part is expected behaviour also:

const { type, status, appsInfo, device,managedApps,appName } = action

Is different from before because you're declaring a scoped variable called status. This is where the browser differences come in. In Chrome, when you declare const status in devtools, the devtools is considered the "scope" and you can access it after it's declared. In Edge however, you can declare const within Dev Tools, but you can never access the value. Reference.

So in Edge, you get this kind of behaviour:

{
    const status = action.status;
    typeof status === "undefined"; // true
}
status; // The value of window.status. const status is out of scope