Topics

Kevin Powell - Community•9mo ago

Bawdy Ink Slinger

If `console.dir(x, {showHidden: true, });` prints `TestController {}`, does that mean x empty?

I wrote some code that keeps erroring saying click() does not exist on my testController object. To troubleshoot, I wrote this code:

const testController = new TestController();
console.dir(testController, {showHidden: true, }); // TestController {}

const testController = new TestController();
console.dir(testController, {showHidden: true, }); // TestController {}

Does TestController {} mean the object has no functions, properties, getters/setters, methods (or whatever word categorizes all of these things), or do I need to pass in different options to see everything on it?

45 Replies

ἔρως•9mo ago

https://developer.mozilla.org/en-US/docs/Web/API/console/dir

console: dir() method - Web APIs | MDN

The method console.dir() displays an interactive list of the properties of the specified JavaScript object. The output is presented as a hierarchical listing with disclosure triangles that let you see the contents of child objects.

ἔρως•9mo ago

i dont see the 2nd parameter

Bawdy Ink Slinger•9mo ago

I'm writing typescript, and this is the generated js file for my class:

export class TestController {
    click(selector
    ) {
        const asyncClick = Promise.resolve(this).then((testController) => {
            selector.$.trigger('click');
            console.log(`asyncClick`, testController);
            return testController;
        });
        return Object.assign(asyncClick, this);
    }
    expect(actual) {
        return {};
    }
}

export class TestController {
    click(selector
    ) {
        const asyncClick = Promise.resolve(this).then((testController) => {
            selector.$.trigger('click');
            console.log(`asyncClick`, testController);
            return testController;
        });
        return Object.assign(asyncClick, this);
    }
    expect(actual) {
        return {};
    }
}

ἔρως•9mo ago

so, no, there's no options or anything to send

Bawdy Ink Slinger•9mo ago

@ἔρως there is here: https://nodejs.org/api/console.html#consoledirobj-options I'm using node

ἔρως•9mo ago

are you running the code in the browser or in node?

Bawdy Ink Slinger•9mo ago

node but i'm using jsdom that's why the code might appear otherwise

ἔρως•9mo ago

https://nodejs.org/api/util.html#utilinspectobject-options <-- why don't you try this instead?

Bawdy Ink Slinger•9mo ago

well, I have in the past but console.dir supposedly calls it anyway I guess I'll try it here too

ἔρως•9mo ago

yeah, but seems that that has a lot more options maybe one of them will work for you

Bawdy Ink Slinger•9mo ago

const testController = new TestController();
console.log(inspect(testController, { showHidden: true, showProxy: true, getters: true})); // TestController {}

const testController = new TestController();
console.log(inspect(testController, { showHidden: true, showProxy: true, getters: true})); // TestController {}

Could I be missing something else or does this confirm it's an empty object?

ἔρως•9mo ago

maxdepth as well set to null?

Bawdy Ink Slinger•9mo ago

you mean depth? same output

ἔρως•9mo ago

yes then it's empty if you're in vscode, you can press f12 and see if there's anything in it

Bawdy Ink Slinger•9mo ago

you mean in debug mode or something?

ἔρως•9mo ago

no

Bawdy Ink Slinger•9mo ago

oh no, nm

ἔρως•9mo ago

just the editor put the prompt on the value, press f12 and it searches the definition

Bawdy Ink Slinger•9mo ago

Yeah, it takes me to my file:

import { Assertion } from './assertion';
import { Selector } from './selector';


export class TestController {
  click(
    this: TestController,
    selector:
    Selector
  ): TestControllerPromise {
    const asyncClick = Promise.resolve(this).then<TestController>((testController) => {
      selector.$.trigger('click');
      console.log(`asyncClick`, testController);
      return testController;
    });
    return Object.assign(asyncClick, this);
  }

  expect<A>(actual: A | Promise<A>): Assertion<A> {
    return {} as Assertion<A>;
  }
}

export interface TestControllerPromise<T = TestController>
  extends TestController,
    Promise<T> {}

import { Assertion } from './assertion';
import { Selector } from './selector';


export class TestController {
  click(
    this: TestController,
    selector:
    Selector
  ): TestControllerPromise {
    const asyncClick = Promise.resolve(this).then<TestController>((testController) => {
      selector.$.trigger('click');
      console.log(`asyncClick`, testController);
      return testController;
    });
    return Object.assign(asyncClick, this);
  }

  expect<A>(actual: A | Promise<A>): Assertion<A> {
    return {} as Assertion<A>;
  }
}

export interface TestControllerPromise<T = TestController>
  extends TestController,
    Promise<T> {}

I don't understand how it's possible to new TestController() and get an empty object back Am I making some obvious mistake?

ἔρως•9mo ago

that's how objects work you get an object when you call new

Bawdy Ink Slinger•9mo ago

an empty one?

ἔρως•9mo ago

no, it has 1 public method called expect

Bawdy Ink Slinger•9mo ago

why isn't click public? also, why doesn't it say expect is on the new TestController()?

ἔρως•9mo ago

https://tenor.com/view/confused-what-really-no-words-huh-gif-4487358

Tenor

Confused Castle

ἔρως•9mo ago

I KNOW! IT DOESN'T HAVE A CONSTRUCTOR wait, that doesn't make sense

Bawdy Ink Slinger•9mo ago

but if there is no defined constructor, doesn't it get a default, no-arg one?

ἔρως•9mo ago

yeah that's why i said this try to use TestController.click directly? or pass TestController to console.dir?

Bawdy Ink Slinger•9mo ago

the typescript compiler says click doesn't exist. I can for it to run anyway if you want.

console.log(inspect(TestController, { showHidden: true, showProxy: true, getters: true, depth: null}));
/*
<ref *1> [class TestController] {
  [length]: 0,
  [name]: 'TestController',
  [prototype]: {
    [constructor]: [Circular *1],
    [click]: [Function: click] { [length]: 1, [name]: 'click' },
    [expect]: [Function: expect] { [length]: 1, [name]: 'expect' }
  }
}
*/

console.log(inspect(TestController, { showHidden: true, showProxy: true, getters: true, depth: null}));
/*
<ref *1> [class TestController] {
  [length]: 0,
  [name]: 'TestController',
  [prototype]: {
    [constructor]: [Circular *1],
    [click]: [Function: click] { [length]: 1, [name]: 'click' },
    [expect]: [Function: expect] { [length]: 1, [name]: 'expect' }
  }
}
*/

hm... So many questions, but is [constructor]: [Circular *1], normal?

ἔρως•9mo ago

yes it's a circular reference it references TestController

Bawdy Ink Slinger•9mo ago

okay

ἔρως•9mo ago

the length: 0 means it takes no arguments to create it

Bawdy Ink Slinger•9mo ago

I know how to read the rest of this output but I don't know what it tells me re: new TestController() returning an empty object

ἔρως•9mo ago

I KNOW WHAT IT MAY BE, and if it is that, it's dumb as hell

Bawdy Ink Slinger•9mo ago

🙂

ἔρως•9mo ago

the object doesn't have anything but the prototype does and the prototype is part of the constructor but what you have is no longer a constructor, but an instance to a class i may be absolutely wrong but it kinda makes sense

Bawdy Ink Slinger•9mo ago

I would've assumed inspect would have shown me I guess I'll create an empty constructor and see if that changes anything

ἔρως•9mo ago

don't do that just try to do console.log(new TestController().click); and see what it says

Bawdy Ink Slinger•9mo ago

[Function: click]

ἔρως•9mo ago

it works! i was right it didn't fetch the prototype 🤣 probably to avoid going down the prototype chain

Bawdy Ink Slinger•9mo ago

I don't see that as an option to show in inspect either?

ἔρως•9mo ago

i didn't see anything either and it doesn't make sense either it should show 1 prototype, i think

Bawdy Ink Slinger•9mo ago

hm well here's what my code does now:

    console.log(`inspecting TestController: `, inspect(TestController, { showHidden: true, showProxy: true, getters: true, depth: null}));
    console.log(`inspecting new TestController: `, inspect(new TestController, { showHidden: true, showProxy: true, getters: true, depth: null}));
    console.log(`inspecting new TestController(): `, inspect(new TestController(), { showHidden: true, showProxy: true, getters: true, depth: null}));
    console.log(`inspecting new TestController().click: `, inspect(new TestController().click, { showHidden: true, showProxy: true, getters: true, depth: null}));
    console.log(`inspecting new TestController().click(): `, inspect(new TestController().click, { showHidden: true, showProxy: true, getters: true, depth: null}));

/*
inspecting class name:  <ref *1> [class TestController] {
  [length]: 0,
  [name]: 'TestController',
  [prototype]: {
    [constructor]: [Circular *1],
    [click]: [Function: click] { [length]: 1, [name]: 'click' },
    [expect]: [Function: expect] { [length]: 1, [name]: 'expect' }
  }
}
inspecting new class name:  TestController {}
inspecting new class name():  TestController {}
inspecting new class name().click:  [Function: click] { [length]: 1, [name]: 'click' }
inspecting new class name().click():  [Function: click] { [length]: 1, [name]: 'click' }
*/

    console.log(`inspecting TestController: `, inspect(TestController, { showHidden: true, showProxy: true, getters: true, depth: null}));
    console.log(`inspecting new TestController: `, inspect(new TestController, { showHidden: true, showProxy: true, getters: true, depth: null}));
    console.log(`inspecting new TestController(): `, inspect(new TestController(), { showHidden: true, showProxy: true, getters: true, depth: null}));
    console.log(`inspecting new TestController().click: `, inspect(new TestController().click, { showHidden: true, showProxy: true, getters: true, depth: null}));
    console.log(`inspecting new TestController().click(): `, inspect(new TestController().click, { showHidden: true, showProxy: true, getters: true, depth: null}));

/*
inspecting class name:  <ref *1> [class TestController] {
  [length]: 0,
  [name]: 'TestController',
  [prototype]: {
    [constructor]: [Circular *1],
    [click]: [Function: click] { [length]: 1, [name]: 'click' },
    [expect]: [Function: expect] { [length]: 1, [name]: 'expect' }
  }
}
inspecting new class name:  TestController {}
inspecting new class name():  TestController {}
inspecting new class name().click:  [Function: click] { [length]: 1, [name]: 'click' }
inspecting new class name().click():  [Function: click] { [length]: 1, [name]: 'click' }
*/

ἔρως•9mo ago

yup, it doesn't go down the prototype chain that's bizarre but makes sense, as prototype chains can be extremely long

Bawdy Ink Slinger•9mo ago

thank you for the help 🙂

ἔρως•9mo ago

you're welcome

Kevin Powell - Community Join

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.

34KMembers

View on Discord

Want results from more Discord servers?

Add your server

More Posts

Help with menu Overlay problemHi, ya'll o/ Please help me with this problem. So, on mobile, when you click on the hamburger butto I want to add rate limit to nextjs app router APIsam making website and i want to add rate limit for my api endpoints but can't seem to find good way Get JSON API and PostI have a JSON API file attached in html file. Can i update data in the json file using a website an Best Practice NavBar?Is this a good practice when creating a responsive navBar? Im creating another nav inside a nav for UseState() and useEffect()why countdown example in useState() doesnt need useEffect()? but when it comes to like changing a te Not Responsive My Text Here In Mobile DeviceHelp Me Guys I Can't Solve It In Responsive.formData in web-componentsHello, I made a web component: ```js class Toggle extends HTMLElement { #toggle = /*html*/` phpdoc an array structure with autocomplete in vscodeis there any good way to phpdoc an array structure and have vscode autocomplete the keys? i know i Is it wrong to use the mask-image property? Is it obsolete?I've been learning how to use the mask-image property but without the -webkit- prefix it doesn't wor warning while using react-redux should i ignorelet me know if code is required