How to list "new" member of an JavaScript object that is not instance/static member from its base or inherited class?

I'm not sure how to define this new member thing, please check demo below, what I want is ListNewMemberNames:

The code (demo.html) is assuming running in a browser

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Var1 Test</title>
</head>
<body>
    <script>
        var1 = {value:7}  /* same as window.var1 = {value:7}*/

        ListMemberNames(window) 
        /* returns: ["__defineGetter__", ... "addEventListener", "alert", ... "var1"] */

        ListNewMemberNames(window)
        /* returns: ["var1"] */
        
        function ListMemberNames(obj){ /* tricks with .hasOwnProperty() or something*/ }
        function ListNewMemberNames(obj){ /* ? */ }
    </script>
</body>
</html>

Solution

Generally, you can't analyze the current (or outer) lexical environment (the mapping of variable names to their values) dynamically in JavaScript. This is only possible on the top level due to the fact that top-level variables declared with var (or with nothing at all) get assigned to the window - check the properties that exist on the window at the beginning of pageload, put it into an array, then look at the properties that exist on it later, and find the difference.

// always run this first
const properties = Object.getOwnPropertyNames(window);

// then your code does something
var1 = {value:7}

// and it is detectable by doing:
const newPropertiesOnWindow = Object.getOwnPropertyNames(window)
  .filter(prop => !properties.includes(prop));
console.log(newPropertiesOnWindow);

It's possible to do, barely - but I can't think of any good reason to want to do so.